LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@masterpiecehack

Mermaid記法 完全チートシート

Last updated at Posted at 2025-03-08

目次

  1. 基本構文
  2. フローチャート
  3. シーケンス図
  4. クラス図
  5. 状態遷移図
  6. ER図
  7. ユーザージャーニー図
  8. ガントチャート
  9. 円グラフ
  10. Git図
  11. 要件図
  12. C4図
  13. マインドマップ
  14. タイムライン図
  15. 象限図
  16. サンキー図
  17. スタイリング
  18. コメント
  19. サブグラフ

基本構文

Mermaidはテキストベースの図表作成ツールで、マークダウンに似た簡単な記法でさまざまな図表を作成できます。
Mermaidコードは常に mermaid 宣言で始まり、その後に図の種類を指定します。マークダウンでは次のように使用します：

graph TD
    A[開始] --> B[処理]
    B --> C[終了]

フローチャート

基本的な方向設定

graph TD    // Top to Down（上から下）
graph BT    // Bottom to Top（下から上）
graph LR    // Left to Right（左から右）
graph RL    // Right to Left（右から左）

ノードの形状

graph LR
    id1[四角形]
    id2(丸括弧付き)
    id3([角丸四角形])
    id4[[サブルーチン]]
    id5[(データベース)]
    id6((円形))
    id7>非対称]
    id8{ひし形}
    id9{{六角形}}
    id10[/平行四辺形/]
    id11[\逆平行四辺形\]
    id12[/台形\]
    id13[\逆台形/]

接続線の種類

graph LR
    A --> B    // 矢印
    C --- D    // 線
    E -.-> F   // 点線矢印
    G -.- H    // 点線
    I ==> J    // 太い矢印
    K === L    // 太い線
    M --テキスト--> N    // テキスト付き矢印
    O --テキスト--- P     // テキスト付き線
    Q ==テキスト==> R    // テキスト付き太い矢印
    S ==テキスト=== T    // テキスト付き太い線
    U -.テキスト.-> V    // テキスト付き点線矢印

複雑な接続

graph TD
    A --> B & C --> D       // 1対多
    E & F --> G             // 多対1
    H --> I --> J & K       // 連鎖と分岐

サブグラフ

graph TB
    subgraph サブグラフ名
        a1 --> a2
    end
    subgraph サブグラフ2
        b1 --> b2
    end
    a1 --> b2

クリック可能なリンク

graph LR
    A[リンク] --> B
    click A href "https://example.com" _blank
    click B callback "callbackFunction"

シーケンス図

基本構文

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: こんにちは Bob, 元気?
    B->>A: 元気だよ Alice!

矢印の種類

sequenceDiagram
    A->B: 実線（開いた矢印）
    A-->B: 点線（開いた矢印）
    A->>B: 実線（閉じた矢印）
    A-->>B: 点線（閉じた矢印）
    A-xB: 実線（X付き）
    A--xB: 点線（X付き）

アクティベーション（活性化）

sequenceDiagram
    Alice->>+John: Hello John
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

ノート

sequenceDiagram
    participant J as John
    participant A as Alice
    note right of J: テキストノート
    note over A,J: 両者に関するノート

ループ

sequenceDiagram
    Alice->John: Hello
    loop 毎分
        John-->Alice: 元気？
    end

代替パス

sequenceDiagram
    Alice->>Bob: Hello
    alt 正常ケース
        Bob->>Alice: Hello back
    else 異常ケース
        Bob->>Alice: Error
    end

オプション

sequenceDiagram
    Alice->>Bob: Hello
    opt オプションのステップ
        Bob->>Alice: Hello back
    end

並行処理

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello
    and Alice to John
        Alice->>John: Hi
    end

クラス図

基本構文

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }

関係性

classDiagram
    Animal <|-- Duck : 継承
    Animal <|-- Fish : 継承
    Animal <|-- Zebra : 継承
    Animal : +String name
    Animal : +int age
    Animal : +makeSound() void
    class Duck{
        +String beakColor
        +swim() void
        +quack() void
    }
    class Fish{
        -int sizeInFeet
        -canEat() bool
    }
    class Zebra{
        +bool is_wild
        +run() void
    }

関係性の種類

classDiagram
    classA <|-- classB : 継承
    classC *-- classD : コンポジション
    classE o-- classF : 集約
    classG <-- classH : 関連
    classI <.. classJ : 依存
    classK <|.. classL : 実装
    classM -- classN : リンク(実線)
    classO ..> classP : リンク(点線)

可視性

classDiagram
    class MyClass {
        +publicMethod()
        -privateMethod()
        #protectedMethod()
        ~packagePrivateMethod()
    }

ジェネリック型

classDiagram
    class List~T~ {
        +add(T) bool
        +remove(T) bool
        +size() int
    }

状態遷移図

基本構文

stateDiagram-v2
    [*] --> 待機中
    待機中 --> 処理中 : 開始
    処理中 --> 完了 : 終了
    完了 --> [*]

遷移と説明

stateDiagram-v2
    [*] --> 待機中
    待機中 --> 処理中 : 開始ボタン押下
    処理中 --> 待機中 : キャンセル
    処理中 --> 完了 : 処理完了
    完了 --> [*]

複合状態

stateDiagram-v2
    [*] --> 起動中
    起動中 --> アイドル
    
    state アイドル {
        [*] --> 準備完了
        準備完了 --> 実行中 : 開始
        実行中 --> 準備完了 : 停止
    }
    
    アイドル --> [*] : シャットダウン

フォーク

stateDiagram-v2
    state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State1
    fork_state --> State2

結合

stateDiagram-v2
    state join_state <<join>>
    State1 --> join_state
    State2 --> join_state
    join_state --> State3

選択

stateDiagram-v2
    state choice_state <<choice>>
    [*] --> choice_state
    choice_state --> 条件1 : if n < 0
    choice_state --> 条件2 : if n == 0
    choice_state --> 条件3 : if n > 0

注釈

stateDiagram-v2
    待機中 --> 処理中 : 開始ボタン押下
    note right of 処理中 : ここで処理が実行されます
    note left of 待機中 : システムは待機中です

ER図

基本構文

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

関係性

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string email
        string address
    }
    ORDER {
        int id
        date created_at
        float total_amount
    }

関係性の種類

erDiagram
    A ||--o{ B : "1対多"
    C }o--|| D : "多対1"
    E }|--|| F : "1対1"
    G }o--o{ H : "多対多"
    I ||--|| J : "1対1（実線）"
    K ||..|| L : "1対1（点線）"
    M }|..|| N : "1対1（点線、カーディナリティ）"

ユーザージャーニー図

基本構文

journey
    title マイユーザージャーニー
    section 登録
      アプリを見つける: 5: Me
      サインアップ: 3: Me
      プロフィール入力: 1: Me
    section 使用
      タスク作成: 5: Me, Cat
      統計の確認: 4: Me

満足度レベル

journey
    title 満足度レベル
    section 例
      レベル 1: 1: Me
      レベル 2: 2: Me
      レベル 3: 3: Me
      レベル 4: 4: Me
      レベル 5: 5: Me

ガントチャート

基本構文

gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 計画フェーズ
    要件定義           :a1, 2023-01-01, 7d
    設計               :a2, after a1, 10d
    section 開発フェーズ
    コーディング       :a3, after a2, 15d
    テスト             :a4, after a3, 5d

タスクの依存関係

gantt
    title 依存関係の例
    dateFormat YYYY-MM-DD
    タスクA :a, 2023-01-01, 3d
    タスクB :b, after a, 2d
    タスクC :c, after b, 1d

マイルストーン

gantt
    title マイルストーンの例
    dateFormat YYYY-MM-DD
    section マイルストーン
    計画完了      :milestone, m1, 2023-01-15, 0d
    開発完了      :milestone, m2, 2023-02-15, 0d
    プロジェクト完了:milestone, m3, 2023-03-01, 0d

セクション

gantt
    title セクション例
    dateFormat YYYY-MM-DD
    section 計画
    タスクA      :a1, 2023-01-01, 4d
    タスクB      :a2, after a1, 3d
    section 開発
    タスクC      :a3, after a2, 5d
    タスクD      :a4, after a3, 6d
    section テスト
    タスクE      :a5, after a4, 4d

除外日

gantt
    title 除外日の例
    dateFormat YYYY-MM-DD
    excludes weekends
    タスクA :a, 2023-01-01, 5d
    タスクB :b, after a, 5d

円グラフ

基本構文

pie
    title 言語使用率
    "JavaScript" : 40
    "Python" : 30
    "Java" : 20
    "C++" : 10

パーセント表示

pie showData
    title 予算配分
    "開発" : 45
    "マーケティング" : 25
    "運用" : 20
    "その他" : 10

Git図

基本構文

gitGraph
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

コミットオプション

gitGraph
    commit id: "1"
    commit id: "2" tag: "v1.0.0"
    branch develop
    checkout develop
    commit id: "3" type: HIGHLIGHT
    checkout main
    commit id: "4" type: REVERSE
    merge develop

ブランチ操作

gitGraph
    commit
    branch feature
    checkout feature
    commit
    checkout main
    commit
    merge feature
    branch bugfix
    checkout bugfix
    commit
    checkout main
    commit
    merge bugfix

要件図

基本構文

requirementDiagram
    requirement test_req {
        id: 1
        text: 必要条件
        risk: high
        verifyMethod: test
    }

    element test_entity {
        type: 例
    }

    test_entity - satisfies -> test_req

関係性

requirementDiagram
    requirement req1 {
        id: 1
        text: システム要件
    }
    element elem1 {
        type: システム
    }
    elem1 - satisfies -> req1
    elem1 - contains -> elem2
    elem2 - derives -> req2

C4図

コンテキスト図

C4Context
    title システムコンテキスト図
    Person(customer, "顧客", "システムを使用するユーザー")
    System(system, "システム", "主要システム")
    System_Ext(mail, "メールシステム", "メール通知")
    
    Rel(customer, system, "使用する")
    Rel(system, mail, "メール送信")

コンテナ図

C4Container
    title コンテナ図
    Person(customer, "顧客", "システムを使用するユーザー")
    Container(web, "Webアプリケーション", "提供するWebインターフェース")
    Container(api, "APIサーバー", "データ処理")
    ContainerDb(db, "データベース", "データ保存")
    
    Rel(customer, web, "アクセス")
    Rel(web, api, "API呼び出し")
    Rel(api, db, "読み書き")

マインドマップ

基本構文

mindmap
    root((マインドマップ))
        開発
            フロントエンド
                HTML
                CSS
                JavaScript
            バックエンド
                Java
                Python
                Node.js
        デザイン
            UI
            UX

形状

mindmap
    root[四角形]
        [角丸四角形]
        (丸括弧)
        ((円))
        ))雲((
        {中括弧}

タイムライン図

基本構文

timeline
    title タイムライン例
    section 2023年
        1月 : 企画立案
        2月 : 要件定義
        3月 : 設計
    section 2024年
        1月 : 開発
        3月 : テスト
        5月 : リリース

象限図

基本構文

quadrantChart
    title 優先度マトリックス
    x-axis 難易度 → 
    y-axis 重要度 →
    quadrant-1 重要・簡単
    quadrant-2 重要・難しい
    quadrant-3 あまり重要でない・簡単
    quadrant-4 あまり重要でない・難しい
    タスクA: [0.3, 0.8]
    タスクB: [0.6, 0.4]
    タスクC: [0.1, 0.1]
    タスクD: [0.9, 0.7]

サンキー図

基本構文

sankey-beta
    アクセス元,Webサイト,100
    Webサイト,登録ページ,40
    Webサイト,情報ページ,60
    登録ページ,登録完了,30
    登録ページ,離脱,10
    情報ページ,登録ページ,30
    情報ページ,離脱,30

スタイリング

テーマ設定

%%{init: {'theme': 'forest'}}%%
graph LR
    A[開始] --> B[終了]

利用可能なテーマ

  • default
  • forest
  • dark
  • neutral
  • base

カスタムスタイル

graph LR
    A[開始] --> B[終了]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5

クラススタイル

graph LR
    A[開始]:::greenClass --> B[終了]:::redClass
    
    classDef greenClass fill:#9f6,stroke:#333,stroke-width:2px
    classDef redClass fill:#f96,stroke:#333,stroke-width:2px

コメント

%% これはコメントです
graph LR
    A --> B

サブグラフ

基本構文

graph TB
    subgraph サブグラフ1
        a1 --> a2
    end
    subgraph サブグラフ2
        b1 --> b2
    end
    a1 --> b2

方向設定

graph LR
    subgraph TOP
        direction TB
        A --> B
        B --> C
    end
    subgraph BOTTOM
        direction TB
        X --> Y
        Y --> Z
    end
    A --> Z

実用的なTips

  1. VSCode拡張機能: Mermaid Previewを使うと編集しながらプレビューできます
  2. オンラインエディタ: Mermaid Live Editorで簡単に図を作成できます
  3. GitHub対応: GitHub MarkdownはMermaidをネイティブサポートしています
  4. 実装時の注意点: 図が複雑になりすぎないよう、適切に分割しましょう
  5. バージョン確認: Mermaidは頻繁に更新されるため、使用する環境のバージョンを確認しましょう

参考リンク

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?