Mermaid構文チートシート — 全ダイアグラムタイプのクイックリファレンス

Mermaid構文クイックリファレンス

このチートシートはすべてのMermaidダイアグラムタイプのコピペ用スニペットを提供します。このページをブックマークして、お手元のリファレンスとしてご活用ください。

フローチャート

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

ポイント：TD/TB 上から下、LR 左から右、[] 四角形、{} ひし形、() 角丸、(()) 円。

シーケンス図

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello
    B-->>A: Hi back
    A->>B: How are you?
    Note over A,B: Small talk

ポイント：->> 実線矢印、-->> 点線、+/- アクティベート/ディアクティベート。

クラス図

classDiagram
    class Animal {
        +String name
        +makeSound() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

ポイント：+ public、- private、# protected、<|-- 継承、*-- コンポジション。

状態遷移図

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> Idle : stop
    Active --> [*] : finish

ポイント：[*] 開始/終了、--> 遷移、state {} ネスト。

ER図

erDiagram
    USER ||--o{ POST : writes
    POST }|--|| CATEGORY : "belongs to"
    USER {
        int id PK
        string name
    }

ポイント：|| 正確に1つ、o{ 0以上、|{ 1以上。

ガントチャート

gantt
    dateFormat YYYY-MM-DD
    title Sprint Plan
    section Dev
    Task A :a1, 2024-01-01, 7d
    Task B :after a1, 5d

ポイント：done、active、critステータスタグ。after idで依存関係。

円グラフ

pie title Distribution
    "Category A" : 40
    "Category B" : 35
    "Category C" : 25

マインドマップ

mindmap
  root((Topic))
    Branch 1
      Leaf A
      Leaf B
    Branch 2
      Leaf C

タイムライン

timeline
    title History
    2022 : Event A
    2023 : Event B : Event C
    2024 : Event D

グローバルディレクティブ

%%{init: {'theme': 'dark'}}%%
%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#4f46e5'}}}%%

便利なパターン

• コメント：%% This is a comment
• クリックイベント：click A href "https://example.com" _blank
• ツールチップ：click A callback "Tooltip text"
• ノードスタイリング：style A fill:#f00,color:#fff
• CSSクラス：A:::classNameとclassDef className fill:#f00