# NoteRichにおけるMermaid.jsの使用方法 – 完全チュートリアル 複雑なプロセス、システムアーキテクチャ、または意思決定木を単独で視覚化するのは難しいことがあります。Mermaid.jsは、シンプルなテキスト定義を使用してダイアグラムを作成できる強力なJavaScriptベースの図表作成ツールです。NoteRichでは、Mermaid.jsをエディターに直接統合し、ノートからプロフェッショナルなフローチャートやシーケンスダイアグラムなどを生成できます。 このガイドでは、NoteRichでのMermaidダイアグラムを習得するために必要なすべての情報を説明します。AIやOCRを使用して、即座にダイアグラムを生成する方法も含まれています。 --- ## 🚀 NoteRichでMermaidを使用する理由 * **テキストベース:** コードを使用してダイアグラムを定義し、バージョン管理や編集が容易になります。 * **リアルタイムプレビュー:** 入力する際に変更内容を即座に確認できます。 * **多機能:** フローチャート、シーケンスダイアグラム、クラスダイアグラム、ステートダイアグラム、ガントチャートなどをサポートしています。 * **AI & OCR搭載:** 自然言語の説明から、既存の画像をスキャンしてダイアグラムを生成できます。 * **ローカル優先:** ダイアグラムの定義はノート内にローカルに保存されるため、プライバシーが保たれ、オフラインでのアクセスが可能です。 --- ## 📝 始める方法：Mermaidダイアグラムの挿入 NoteRichでMermaidダイアグラムを挿入するには、主に3つの方法があります。 ### 方法1：スラッシュコマンド（`/`） 1. ダイアグラムを配置する場所にカーソルを置きます。 2. `/`を入力してコンポーネントピッカーを開きます。 3. **"Mermaid"**または**"Diagram"**を検索します。 4. リストから**Mermaid Diagram**を選択します。 ### 方法2：ツールバー 1. ツールバーの**Insert**ボタンをクリックします。 2. **Visualization**または**Diagrams**セクションに移動します。 3. **Mermaid**をクリックします。 ### 方法3：AIアシスタント 1. `/ai`またはツールバーから**AI Assistant**を開きます。 2. 作成したいダイアグラムを説明します（例："ユーザーログインプロセスのフローチャートを作成する"）。 3. AIがMermaidコードを生成し、それをノートに直接挿入できます。 挿入後、コードエディターとリアルタイムプレビューウィンドウが表示されるコンフィギュレーションモーディアルが表示されます。 --- ## 🛠️ Mermaidエディターのインターフェース NoteRichのMermaidエディターは効率性を重視して設計されています。 * **コードエリア:** Mermaid構文を書くための単一スペースのテキストエリアです。 * **リアルタイムプレビュー:** ダイアグラムのリアルタイムレンダリングです。構文エラーがある場合、エラーオーバーレイが表示され、デバッグが容易になります。 * **ヘルプアイコン:** "Diagram Code"の横にある`?`アイコンをクリックすると、詳細な構文リファレンスを提供する[Mermaid.jsドキュメント](https://mermaid.js.org/intro/)が開きます。 * **確認ボタン:** ダイアグラムを保存し、ノートに挿入します。 > **ヒント:** ノート内の既存のMermaidダイアグラムをダブルクリックすると、エディターを再開して変更できます。 --- ## 📊 基本的なフローチャート構文 フローチャートはMermaidで最も一般的な使用例です。以下が構築方法です。 ### 1. 方向の定義 まず、流れの方向を定義します： * `graph TD`: 上から下へ * `graph LR`: 左から右へ * `graph BT`: 下から上へ * `graph RL`: 右から左へ ### 2. ノードの追加 ノードはIDとラベルで定義されます。 ```mermaid graph TD A[開始] --> B[プロセス] B --> C{決定] C -->|はい| D[終了] C -->|いいえ| B ``` * `[Text]`: 矩形ノード。 * `(Text)`: 丸い矩形。 * `((Text))`: 円形。 * `{Text}`: 長方形（決定）。 * `[[Text]]`: サブルーチン。 ### 3. ノードの接続 * `-->`: 実線矢印。 * `-.->`: 点線矢印。 * `==>`: 太い矢印。 * `-- Text -->`: ラベル付きの矢印。 --- ## 🤖 AI搭載のダイアグラム生成 コードを書きたくない場合は、NoteRichのAIが代わりに行います。 1. **AIアシスタント**を開きます。 2. 次のようなプロンプトを入力します：*"オンラインで注文をする顧客のシーケンスダイアグラムを生成してください。"* 3. AIは次のようなコードブロックを返します： ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: 注文する Website->>Database: 在庫を確認する Database-->>Website: 在庫あり Website-->>Customer: 注文確定 ``` 4. コードをコピーするか、AIインターフェースで利用可能な"Insert"ボタンを使用して、ノートに追加します。 --- ## 📸 OCR：手書きまたは印刷されたダイアグラムのスキャン 白板の写真や印刷されたフローチャートがありますか？NoteRichの**Note Scanner (OCR)**を使用すると、それを編集可能なMermaidコードに変換できます。 1. **AIアシスタント**を開き、**Note Scanner (OCR)**を選択します。 2. 手書きまたは印刷されたダイアグラムの画像をアップロードします。 3. プロンプトで次のように指定します：*"この画像をMermaid.jsフローチャートコードに変換してください。"* 4. AIが画像の構造を分析し、対応するMermaid構文を生成します。 5. エディターで生成されたコードを確認し、認識エラーを修正します。 > **注意:** 最良の結果を得るためには、画像が明瞭であり、テキストが読み取り可能であることを確認してください。複雑な手書きスケッチは、変換後に手動で調整が必要かもしれません。 --- ## 🎨 高度な機能 ### ノードのスタイリング CSSクラスやインラインスタイルを使用して、特定のノードの外観をカスタマイズできます。 ```mermaid graph LR A[開始] --> B[プロセス] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### サブグラフ 関連するノードをグループ化して、より良い組織性を実現します。 ```mermaid graph TD subgraph Frontend A[React App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] end B --> C ``` ### シーケンスダイアグラム Mermaidはフローチャートだけではありません。システム間の相互作用を視覚化するシーケンスダイアグラムも作成できます。 ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: ノートの編集 NoteRich->>Server: データの保存 Server-->>NoteRich: 保存確認 NoteRich-->>User: ユーザーインターフェースの更新 ``` --- ## 💡 NoteRichユーザーのためのプロ級ヒント 1. **特殊文字のエスケープ**: ノードテキストに`[]`や`()`のような特殊文字が含まれている場合は、テキストを引用符で囲んでください。 ```mermaid graph TD A["ノードに[括弧]がある"] --> B["ノードに(括弧)がある"] ``` 2. **画像のコピー**: ダイアグラムが表示されたら、フローティングツールバーを表示するためにクリックします。コピー画像ボタンを使用して、Slack、Notion、メールなどの他のアプリにダイアグラムを貼り付けます。 3. **SVGのダウンロード**: プロユーザーは、プレゼンテーションや出版物に使用できる高品質なSVGファイルとしてダイアグラムをダウンロードできます。 --- ## ❓ トラブルシューティング * **ダイアグラムが表示されない?** プレビューウィンドウ内のエラーオーバーレイを確認してください。一般的な問題には、終了括弧`]`が欠けていることや、正しい矢印構文がないことがあります。 * **構文エラー?** 正しいMermaidバージョンの構文を使用していることを確認してください。NoteRichは最新の安定版のMermaid.jsを使用しています。不確かな場合は、[公式ドキュメント](https://mermaid.js.org/intro/)を参照してください。 * **OCRの精度?** OCRの結果が完璧でない場合は、AIアシスタントを使用してコードを修正してください。粗いOCR出力を貼り付けて、AIに「Mermaid構文を修正してくれ」と頼むことができます。 --- ## 🏁 結論 NoteRichのMermaid.jsは、プロセスやシステムを記録する方法を変えました。ダイアグラムをコードとして保持することで、常に最新の状態を保ち、簡単に変更でき、知識ベースとシームレスに統合されます。AI生成とOCRスキャンにより、複雑なビジュアルを作成することがこれまでになく簡単になりました。 今日からアイデアを視覚化し始めましょう！ --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Mermaid</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">フローチャート</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AIアシスタント</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">OCR</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">視覚化</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">NoteRich</span> </div>