obsidian-mermaid

Obsidian Mermaid ダイアグラム

Obsidian で正しくレンダリングされ、問題なく公開できる Mermaid ダイアグラムを作成します。

このスキルを使う場面

次のような場合に有効にします：

• フローチャート、シーケンス図、ER 図を作成する
• ASCII アートを Mermaid に変換する
• Obsidian での Mermaid のレンダリングエラーを修正する

基本原則：シンプルさを最優先

ダイアグラムはひと目で理解できるようにしましょう

複雑なダイアグラムは読みにくくなります。常にノードと接続を最小限にし、要点だけを表現してください。

ノードの最小化

変更前（9 個のノード）：

flowchart LR
    A[수집] --> B[정리] --> C[보관]
    D[목표] --> E[학습] --> F[실행] --> G[측정] --> H[달성]

変更後（2 個のノード — 順次の流れはノード内のテキストで表現）：

flowchart LR
    A[수집 → 정리 → 보관]
    B[목표 → 학습 → 실행 → 달성]

接続の最小化

• 主要な流れだけを表現し、詳細は本文で説明する
• ノードは 5 個以下にし、接続線を交差させない
• 複雑な関係は、複数のシンプルなダイアグラムに分ける

テーブルと Mermaid の使い分け

形式	用途	例
テーブル	属性と値の対応付け、比較、オプション	エネルギーレベルごとのタスク
Mermaid	流れ、プロセス、フィードバックループ	入力→処理→出力
インライン	シンプルな順次の流れ	A → B → C

原則：同じ情報をよりコンパクトに表現できる形式を選びます。

---

重要なルール

1. ラベルに Markdown を使わない

よくあるエラー：

Node["1. First"]     → "Unsupported markdown: list"
Node["Text<br/>More"] → "Unsupported markdown: heading"
Node["## Header"]    → "Unsupported markdown: heading"

正しい例：

Node[First]
Node[Text]

ルール：ラベルはプレーンテキストにします。複雑な説明はダイアグラムの外に記載します。

2. 正方形に近いレイアウトを優先する

問題：flowchart LR は横に広がりすぎ、flowchart TB は縦に長くなりすぎます。

解決策：TB と内部の LR を組み合わせて、正方形に近いレイアウトを作ります。

flowchart TB
    subgraph Layer1["레이어 1"]
        direction LR
        A[항목A] ~~~ B[항목B] ~~~ C[항목C]
    end

    subgraph Layer2["레이어 2"]
        direction LR
        D[항목D] ~~~ E[항목E]
    end

    Layer1 --> Layer2

パターン：

• flowchart TB：全体の流れは上から下
• direction LR：各 subgraph の内部は横方向に配置
• ~~~：見えない接続（矢印なしで整列させるために使用）

ルール：縦に長くなりすぎる場合は、subgraph と direction LR を使います。

3. ラベルを短くする

❌ Too long:
Node["This is a very long description that will break layout"]

✅ Short and clear:
Node[Short Label]

ルール：ラベルは 15 文字未満にします。詳細はダイアグラムの下にテキストで追加します。

4. Subgraph 名に特殊文字を使わない

❌ May cause issues:
subgraph "1. Phase One"
subgraph "Phase: Setup"

✅ Safe:
subgraph Phase_One["Phase One"]
subgraph Setup["Setup Phase"]

良い例

シンプルなフローチャート

flowchart TB
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

詳細を外に記載したプロセスフロー

flowchart TB
    Input[Input] --> Process[Process]
    Process --> Output[Output]

プロセスの詳細：

• 入力：フォームからのユーザーデータ
• 処理：検証と変換
• 出力：データベースに保存

Subgraph の例

flowchart TB
    subgraph Frontend["Frontend"]
        UI[UI] --> API[API Call]
    end
    subgraph Backend["Backend"]
        Server[Server] --> DB[Database]
    end
    API --> Server

悪い例（避けてください）

ラベル内の Markdown

flowchart LR
    A["1. Start<br/>with details"] --> B{"2. Decision"}

「Unsupported markdown」エラーが表示されます。

横に広がりすぎる例

flowchart LR
    A[Very Long Process Name Here] --> B[Another Long Name] --> C[Yet Another] --> D[And More]

モバイルや幅の狭い画面では、表示が切れてしまいます。

ASCII から Mermaid への変換

ASCII アート：

┌───────┐     ┌───────┐
│ Start │────→│  End  │
└───────┘     └───────┘

Mermaid：

flowchart TB
    Start[Start] --> End[End]

品質チェックリスト

ダイアグラムの作成を完了する前に、次の点を確認します：

• ノードラベルに <br/> タグがない
• ラベルに番号付きリスト形式（1., 2.）を使っていない
• 正方形に近いレイアウト：TB と subgraph 内の LR の組み合わせを使っている
• すべてのラベルが短い（15 文字未満）
• 複雑な詳細をダイアグラムの外のテキストに移している
• Subgraph 名に特殊文字がない
• Obsidian のプレビューでレンダリングをテストした