ダイアグラム記法リファレンス

Mermaidチートシート＆記法ガイド

必要な図の実例コードをコピーし、リアルタイム描画を確認して、ドキュメントのラベルや接続関係に合わせて編集できます。

構文パターン

```mermaid
flowchart LR
  A[Write Markdown] --> B[Add Mermaid code]
  B --> C[Preview diagram]
  C --> D[Publish docs]
```

mermaid識別子が付いたフェンス付きコードブロックは、自動的にインタラクティブな図としてレンダリングされます。

フローチャートシーケンス図タイムライン ER図クラス図状態遷移図ガントチャート円グラフマインドマップコメント間違い

mermaid フローチャート記法

Mermaidフローチャート記法

処理の進行順序や分岐、判断、代替ルートをわかりやすく図式化します。

コピー可能な構文

フローチャート

エディターで試す

flowchart TD
  A[Markdown作成] --> B{図が必要か?}
  B -- はい --> C[Mermaidコード記述]
  B -- いいえ --> D[ドキュメント公開]
  C --> E[プレビュー&出力]
  E --> D

描画プレビュー

業務プロセス、条件分岐、ワークフロー

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

flowchart で開始し、TD（上から下）または LR（左から右）を指定します。

四角括弧で処理ノード、波括弧で条件分岐を表します。

-- はい --> のようにハイフンの間にラベルを記述します。

mermaid シーケンス図記法

Mermaidシーケンス図記法

メッセージのやり取りを時系列順に表示します。API連携や認証フロー、サービス間通信のドキュメントに最適です。

コピー可能な構文

シーケンス図

エディターで試す

sequenceDiagram
  participant ユーザー
  participant アプリ
  participant レンダラー
  ユーザー->>アプリ: Mermaidコードを貼付
  アプリ->>レンダラー: 構文を検証
  レンダラー-->>アプリ: SVGプレビュー生成
  アプリ-->>ユーザー: エクスポート提供

描画プレビュー

API通信、リクエスト・レスポンス、マイクロサービス間連携

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

participant を宣言して並び順や表示名を制御します。

->> をリクエスト呼び出し、-->> をレスポンス返却に使用します。

コロンの後にメッセージ内容を記述します。

mermaid タイムライン例

Mermaidタイムライン記法

イベントを時系列順に並べます。リリース履歴やロードマップのマイルストーン記録に適しています。

コピー可能な構文

タイムライン

カスタマイズ

timeline
  title Markdownの歩み
  2004 : Markdown誕生 : John Gruber & Aaron Swartz
  2011 : CommonMark規格立ち上げ
  2014 : GitHub Flavored Markdown (GFM)
  2026 : TheMarkdowner ブラウザツール群

描画プレビュー

リリース履歴、製品ロードマップ、プロジェクト年表

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

その他のタイムラインパターン

コピーして使える4つのMermaidタイムライン例

ジェネレーターで開く

タイトル付きの基本的な年表

1つの期間に1つのイベントを置く、最小構成の時系列です。

timeline
  title 製品の歴史
  2024 : 最初のプロトタイプ
  2025 : クローズドベータ
  2026 : 一般公開

カスタマイズ

1つの期間に複数のイベント

コロンを追加すると、関連するマイルストーンを同じ期間にまとめられます。

timeline
  title 2026年リリース計画
  Q1 : 顧客調査 : ロードマップ承認
  Q2 : クローズドベータ : ドキュメント整備
  Q3 : 一般提供開始 : 利用状況レビュー

カスタマイズ

スプリントのロードマップ

セクションで開発期間をまとめると、読みやすいソフトウェアのロードマップになります。

timeline
  title ソフトウェアのスプリント
  section 調査
  スプリント1 : 要件定義 : プロトタイプ
  section 開発
  スプリント2 : エディター実装 : バリデーション追加
  section リリース
  スプリント3 : アクセシビリティ確認 : リリース

カスタマイズ

リリース履歴

ソフトウェアのバージョンと主な変更点を時系列で記録します。

timeline
  title リリース履歴
  v1.0 : 初回リリース : コアエディター
  v1.1 : SVGエクスポート : ダークテーマ
  v2.0 : タイムラインビルダー : 共有リンク

カスタマイズ

timeline キーワードで開始します。

期間の後にコロンを置き、イベントを記述します。

同一期間に複数イベントがある場合はコロンで区切ります。

mermaid er図記法

Mermaid ER図記法

データベースエンティティとそれらの関連性を可視化します。スキーマ設計やデータモデルの文書化に使用します。

コピー可能な構文

ER図

エディターで試す

erDiagram
  DOCUMENT ||--o{ DIAGRAM : contains
  DOCUMENT {
    string title
    string format
  }
  DIAGRAM {
    string type
    string source
  }

描画プレビュー

データベース設計、リレーションモデル、データ契約

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

1行目に erDiagram を宣言します。

||--o{ （1対多）などの記号で関連を定義します。

テーブルのプロパティは波括弧内に記述します。

mermaid クラス図記法

Mermaidクラス図記法

オブジェクト、プロパティ、メソッド、継承関係を表現します。オブジェクト指向のSDKドキュメントに便利です。

コピー可能な構文

クラス図

エディターで試す

classDiagram
  class Document {
    +string title
    +string format
    +convertToMarkdown()
  }
  class Diagram {
    +string type
    +render()
  }
  Document "1" --> "0..*" Diagram : includes

描画プレビュー

オブジェクト、クラス構造、コード設計

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

先頭に classDiagram を宣言します。

+ で公開メンバー、- で非公開メンバーを表します。

--> などの矢印で関連性を指定します。

mermaid 状態遷移図記法

Mermaid状態遷移図記法

システムの有効な状態と状態間を遷移させるイベントを表現します。注文ライフサイクルやUIモードの整理に最適です。

コピー可能な構文

状態遷移図

エディターで試す

stateDiagram-v2
  [*] --> 下書き
  下書き --> プレビュー: 描画
  プレビュー --> エラー: 構文不正
  プレビュー --> 公開完了: エクスポート
  エラー --> 下書き: コード修正

描画プレビュー

ライフサイクル、モード遷移、業務ステータス

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

最新構文の stateDiagram-v2 を使用します。

開始と終了は [*] で表します。

遷移イベントはコロンの後に記述します。

mermaid ガントチャート記法

Mermaidガントチャート記法

タスクを開始日、所要期間、マイルストーン、依存関係とともにスケジュール上に配置します。

コピー可能な構文

ガントチャート

エディターで試す

gantt
  title ドキュメント公開計画
  dateFormat  YYYY-MM-DD
  section 執筆フェーズ
  ガイド作成       :a1, 2026-06-12, 2d
  サンプル確認     :after a1, 1d
  section 公開フェーズ
  キャプチャ追加   :1d
  ページ公開       :1d

描画プレビュー

プロジェクト工程管理、マイルストーン、スプリント進行

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

dateFormat で日付の書式を定義します。

section でタスクをフェーズごとにグループ化します。

after タスクID で先行タスクとの依存関係をチェーンします。

mermaid 円グラフ記法

Mermaid円グラフ記法

各カテゴリが全体に占める割合を可視化します。流入元やアンケート集計の要約に適しています。

コピー可能な構文

円グラフ

エディターで試す

pie showData
  title ドキュメント内の図の利用割合
  "フローチャート" : 40
  "シーケンス図" : 25
  "ER図" : 20
  "その他" : 15

描画プレビュー

構成比率、シェア、統計まとめ

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

pie showData を指定すると数値がラベル横に表示されます。

空白を含む名称は二重引用符で囲みます。

項目数は絞り込むことで見やすくなります。

mermaid マインドマップ記法

Mermaidマインドマップ記法

中心テーマとその分岐を階層的なインデントで構造化します。

コピー可能な構文

マインドマップ

エディターで試す

mindmap
  root((Mermaid))
    Markdown
      READMEファイル
      ドキュメントサイト
    ダイアグラム
      フローチャート
      シーケンス
      ERD

描画プレビュー

アウトライン構成、ブレインストーミング、階層整理

Mermaidプレビューを描画中

JavaScriptが無効な環境でもテキスト構文はそのまま確認できます。

スペースのインデントで子ノードを階層化します。

root((ノード名)) で中心となる視覚コアを宣言します。

ノード名を簡潔に保つと見やすい配置になります。

構文ユーティリティ

Mermaidのコメントと特殊文字

コメントとエスケープしたラベルはどの図の種類でも使えるため、タイムライン固有の構文ではありません。保守者向けのメモにはコメントを、ラベルに構文用の記号が含まれる場合はHTMLエンティティを使いましょう。

Mermaidのコメントを追加する

%% で始まる行はソースに残りますが、図には描画されません。

timeline
  %% 社内向けローンチ計画
  title 製品ロードマップ
  2026年Q3 : 一般公開

構文の記号をエスケープする

コロンがラベルの一部である場合は、HTMLエンティティを使います。

timeline
  title 製品ロードマップ
  2026年Q3 : 10&#58;00 UTC に公開

トラブルシューティング

Mermaid構文でよくある間違い

Mermaidのエラーは、図の種類を示すキーワードの欠落、矢印記号の誤り、二重引用符が必要なラベルのいずれかが原因であることが多いです。図が描画できない場合は、コードを1つの関係だけに減らしてから、行を少しずつ戻していきましょう。

図の種類のキーワードがない

Mermaidブロックは、パーサーが構造を判断できるように、先頭行にキーワード（flowchart、sequenceDiagram、erDiagramなど）が必要です。

矢印の記号が正しくない

矢印は図の種類ごとに異なります。フローチャートは --> を使い、シーケンス図では ->> を、戻りには -->> を使います。

特殊文字を引用符で囲んでいない

ラベル内の記号がMermaidの構文と解釈されることがあります。ラベルを二重引用符で囲むか、ノードIDと表示テキストを分けてください。

インデントが揃っていない

マインドマップやタイムラインのロードマップはインデントの空白に強く依存します。入れ子になった子要素のインデントが揃っているか確認しましょう。

よくある質問 (FAQ)

このMermaidチートシートはどのように構成されていますか？

各セクションは実動コードブロック、描画プレビュー、記法解説で構成されています。

Mermaidダイアグラムを画像としてエクスポートできますか？

はい。Mermaidエディターにコードを貼り付け、SVG、PNG、PDFとして保存できます。

GitHubでMermaidダイアグラムは表示されますか？

はい。GitHub、GitLab、ObsidianはMarkdown内の ```mermaid コードブロックを自動描画します。