mermaid-builder

Mermaid Builder

中核となる理念

• 正確性：Mermaid の構文規則に厳密に従います
• 明瞭さ：図で複雑な考えをシンプルに伝えます
• シンプルさ：不要な詳細を詰め込みすぎないようにします
• モジュール性：複雑な図はサブグラフに分割します

重要：ラベルの引用符ルール

ルール：スペース、特殊文字、句読点を含むラベルは二重引用符で囲みます。

%% CORRECT - labels with spaces quoted
flowchart LR
    A["User Login"] --> B["Process Request"]
    C["Pay $100?"] --> D["Confirm (Yes/No)"]

%% WRONG - will fail to render
flowchart LR
    A[User Login] --> B[Process Request]

引用符で囲む必要があるもの： スペース、特殊文字（$%&）、句読点（:,;）、演算子（()[]） 任意： シンプルな英数字（Login、Process、Node1）

迷ったら、引用符を使いましょう。使っても問題ありません。

クイックリファレンス

フローチャートの図形

構文	図形
["Text"]	長方形
("Text")	角丸
{"Text"}	ひし形（判断）
[("Text")]	円柱（データベース）
(("Text"))	円

矢印の種類

構文	種類
-->	実線の矢印
---	実線
-.->	点線の矢印
==>	太い矢印
`-->	Label

図の種類

種類	宣言	用途
フローチャート	flowchart TD	プロセス、ワークフロー、判断
シーケンス	sequenceDiagram	コンポーネント間のやり取り、API のフロー
クラス	classDiagram	OOP の構造、モデル
状態	stateDiagram-v2	状態遷移
ガント	gantt	タイムライン、スケジュール
ER	erDiagram	データベーススキーマ
円グラフ	pie	比例データ

方向： TB/TD（上から下）、BT（下から上）、LR（左から右）、RL（右から左）

各図の種類の完全な例については、references/diagram-examples.md を参照してください。

最小限の例

フローチャート

flowchart TD
    Start["Start"] --> Check{Valid?}
    Check -->|Yes| Process["Process"]
    Check -->|No| Error["Error"]
    Process --> End["End"]

シーケンス

sequenceDiagram
    Client->>Server: Request
    Server-->>Client: Response

ER 図

erDiagram
    USER ||--o{ ORDER : "places"
    USER { int id PK string email }
    ORDER { int id PK int user_id FK }

整理のためのサブグラフ

flowchart TD
    subgraph "Frontend"
        A["UI"]
    end
    subgraph "Backend"
        B["API"]
        C[("DB")]
    end
    A --> B --> C

スタイル設定

flowchart TD
    A["Success"] --> B["Error"]

    classDef successStyle fill:#C8E6C9,stroke:#388E3C
    classDef errorStyle fill:#FFCDD2,stroke:#D32F2F

    class A successStyle
    class B errorStyle

避けるべきよくあるエラー

エラー	誤り	正しい例
引用符で囲まれていないスペース	A[User Login]	A["User Login"]
無効な矢印	A -> B	A --> B
引用符で囲まれていない特殊文字	A[Cost: $100]	A["Cost: $100"]
閉じ括弧の不足	A["Node --> B	A["Node"] --> B

検証チェックリスト

• スペースを含むラベルが引用符で囲まれている
• 特殊文字を含むラベルが引用符で囲まれている
• 括弧が正しく対応している
• 矢印の構文が正しい（-> ではなく -->）
• ノード ID が一意で、意味のあるものになっている
• コメントで複雑な箇所が説明されている
• エラーなしでプレビューされている

データリネージパターン

以下については、references/data-lineage.md を参照してください。

• ETL パイプラインパターン
• 多層データアーキテクチャ
• システム間のデータフロー
• データベーススキーマのリネージ
• ストリーミングデータのリネージ
• カラムレベルのリネージ

リソース

• Mermaid ドキュメント
• ライブエディター
• 構文リファレンス

---

覚えておきましょう：引用符のルールは、Mermaid の描画エラーの最大の原因です。迷ったら、引用符で囲みましょう。