2024.06.03 自動化

VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処

Q: graph TDとflowchart TDはどちらを使うべきですか？

これから書くなら flowchart です。 graph は初期からのキーワードで別名として動作しますが、v11系で追加された新しいノード形状やLook、ELKレイアウトは公式ドキュメント上 flowchart の機能として整備されています。同一定義でも塗り色や間隔が変わるという報告（Issue #7486）もあります。

Q: Mermaid図をPNGやSVGで出力するには？

標準プレビューに画像エクスポートはありません。 npm install -g @mermaid-js/mermaid-cli でmermaid-cliを入れ、 mmdc -i diagram.mmd -o diagram.png のように書き出します。単発ならMermaid Live Editorからのダウンロードが手軽です。

VS Code 1.121（2026年5月20日リリース）から、Markdownプレビューがmermaidコードブロックをそのまま図として描画するようになりました。1.121以降であれば、拡張機能を入れてからでないと図が出なかった頃の手順は必要ありません。一方で、以前から入れていた拡張機能が残っている環境では逆に図が表示されなくなるという、移行期特有の症状も出ています。この記事では、シーケンス図・フローチャート・クラス図をMermaidで書く記法、「コードから図を自動生成したい」という要望にどこまで応えられるのか、そして図が表示されない・画像に出せないときの切り分けをまとめます。

まとめ：VS Code 1.121以降、Mermaid図は拡張機能なしで描ける

VS Code 1.121で「Mermaid Markdown Features」がビルトイン拡張として同梱され、Markdownプレビュー・ノートブックのMarkdownセル・チャットでMermaid図が描画される。エディタ本文には図は出ない。
1.121以降で図が表示されない場合、旧拡張「Markdown Preview Mermaid Support」が残っていることが原因になり得る。アンインストール（または無効化）してVS Codeを完全に再起動する。
シーケンス図はsequenceDiagram、フローチャートはflowchart TD、クラス図はclassDiagramで書く。新機能は公式ドキュメント上flowchartの機能として整備されているため、これから書くならflowchartを選ぶ。
Mermaid本体にソースコード解析機能はない。外部の静的解析ツール（Pythonのpyreverse -o mmdなど）かCopilot Chatの下書きを、レビュー前提で使う。
標準プレビューに画像エクスポートは無い。PNG・SVGにするならmermaid-cli（mmdc）かMermaid Live Editorを使う。

VS Code 1.121でMermaidがMarkdownプレビューに標準搭載

VS Code 1.121のリリースノートは、Matt Bierner氏の拡張機能「Markdown Preview Mermaid Support」を本体に取り込み、「Mermaid Markdown Features」という新しいビルトイン拡張にしたと明記しています。描画が有効になるのは、組み込みのMarkdownプレビュー、ノートブックのMarkdownセル、そしてチャットの3か所です。描画された図はパンとズームに対応し、図を右クリックするとMermaidのソースをコピーできます。

使い方は、Markdownファイルに言語指定mermaidのコードフェンスを書き、Ctrl+Shift+V（macOSはCmd+Shift+V）でプレビューを開くだけです。Markdownファイルには次のように書きます。

```mermaid
flowchart TD
    A[受注データ受信] --> B{在庫あり?}
    B -->|Yes| C[出荷指示]
    B -->|No| D[バックオーダー登録]
```

設計メモやADR、READMEをMarkdownで書いているなら、追加のインストールなしで図が付けられるようになったという点が実務上の変化です。ただし標準プレビューが提供するのは「表示」までで、画像ファイルへの書き出しは含まれません。Mermaidそのものの記法や無料のLive EditorについてはMermaid記法の使い方を完全ガイド｜無料のLive Editorでフローチャート・シーケンス図を作成で扱っています。VS Code側の拡張機能全般やAI補助のmermAIdはVSCodeでMermaidを使う方法｜記法・図作成・画像出力とAI拡張mermAIdにまとめました。

シーケンス図（sequenceDiagram）の書き方

登場人物と矢印の基本形

participantで登場人物を宣言し、矢印で呼び出しを書きます。実線矢印->>が同期的な呼び出し、破線矢印-->>が応答という書き分けが一般的です。activateとdeactivateで処理中の帯（実行仕様）を表現できます。

```mermaid
sequenceDiagram
    participant U as 利用者
    participant API as 注文API
    participant DB as 在庫DB

    U->>API: POST /orders
    activate API
    API->>DB: 在庫を引き当て
    DB-->>API: 引き当て結果
    API-->>U: 201 Created
    deactivate API
```

宣言順がそのまま左からの並び順になるため、外部アクターを先に、内部コンポーネントを後に書くと読みやすい図になります。asで別名を付ければ、図中の表示は日本語、参照は短い英字IDで書けます。

条件分岐・ループのグループ化（alt／opt／loop／par）

シーケンス図で分岐や繰り返しを囲む枠がグループです。使い分けは、二者択一がalt、条件付きで実行される任意処理がopt、繰り返しがloop、並行処理がparです。endで必ず閉じます。

```mermaid
sequenceDiagram
    participant API as 注文API
    participant DB as 在庫DB
    participant M as メール配信

    API->>DB: 在庫を確認
    alt 在庫あり
        DB-->>API: OK
        par 注文確認メール送信
            API->>M: 注文確認メール
        and 引当レコード作成
            API->>DB: 引当レコード作成
        end
    else 在庫なし
        DB-->>API: NG
        opt 入荷通知を希望
            API->>M: 入荷待ち登録メール
        end
    end
```

parの各レーンにはandの後ろにラベルを付けます。省略してもパースは通りますが、レーンが無名になり並行処理の内容が図から読み取れません。グループのネストが3階層を超えるとプレビュー上で枠が重なって判読しづらくなるため、分岐が深くなったら正常系と異常系で図を分けるほうが結果的に伝わります。

フローチャート（flowchart TD／graph TD）の書き方

ノードの形と分岐ラベル

先頭にflowchartと方向（TDは上から下、LRは左から右）を書き、ノードとエッジを並べます。ノードの形はカッコの種類で決まり、[処理]が長方形、(開始)が角丸、{判定}がひし形、[(DB)]が円筒です。矢印にラベルを付けるときは-->|Yes|のように縦棒で挟みます。

```mermaid
flowchart LR
    S((開始)) --> A[入力チェック]
    A --> B{必須項目あり?}
    B -->|不足| E[エラー返却]
    B -->|充足| C[(DBへ保存)]
    C --> F((終了))
```

graphとflowchartの差異と選択基準

graph TDはMermaid初期からのキーワードで、公式ドキュメントも「flowchartの代わりにgraphも使える」と別名扱いにしており、今も動作します。ただしv11系で描画エンジンが刷新されて以降に追加された30種類以上の新しいノード形状、見た目を切り替えるLook機能、レイアウトエンジンELKは、いずれも公式ドキュメント上flowchartの機能として記載・整備されています。加えて、同一の定義でもgraph LRとflowchart LRで塗り色や垂直方向の間隔が変わるという報告がMermaid本体のIssue #7486に上がっています。

既存ドキュメントのgraphを一斉に書き換える必要はありませんが、これから書くならflowchartで統一するほうが安全です。

クラス図・ER図・画面遷移図をMermaidで描く

クラス図はclassDiagramで書きます。継承は<|--、コンポジションは*--、集約はo--、単純な関連は-->です。フィールドとメソッドはクラスのブロック内に列挙し、可視性は+（public）、-（private）、#（protected）で示します。

```mermaid
classDiagram
    class Order {
        +String orderId
        -int total
        +addItem(item) void
    }
    class OrderItem {
        +String sku
        +int quantity
    }
    Order "1" *-- "0..*" OrderItem : 明細
```

同じ要領で、テーブル設計はER図のerDiagram、画面遷移図は状態遷移図のstateDiagram-v2が使えます。画面遷移は「状態＝画面、遷移＝操作」と読み替えるとそのまま書けます。

```mermaid
stateDiagram-v2
    [*] --> ログイン
    ログイン --> 一覧: 認証成功
    ログイン --> ログイン: 認証失敗
    一覧 --> 詳細: 明細を選択
    詳細 --> 一覧: 戻る
```

Mermaidは2026年4月の11.14.0でWardleyマップ（ベータ）を追加し、11.15.0（2026年5月）でその記法を確定させるなど、図種が増え続けています。

VS Codeで図を書く手段の選び分け（Mermaid／PlantUML／GUI拡張）

「シーケンス図ツール vscode」で探している場合、選択肢は大きく3つです。Markdownに直接埋め込めてGitHubやプルリクエストでもそのまま図として表示され、差分レビューできることを重視するならMermaidです。ステレオタイプやパッケージ図までUMLの記法を厳密に表現したいなら、表現力で勝るPlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説を選びます。テキストではなくGUIでノードを並べたいなら、Draw.io Integrationのような描画系拡張になりますが、生成物がXMLになるためコードレビューとは相性が落ちます。設計資産をリポジトリで管理するチームなら、Mermaidを既定にしてUMLの厳密さが要る箇所だけPlantUMLを使う、という切り分けが扱いやすい構成です。

コードからの図の自動生成の限界と現実的な3手段

「vscode フローチャート自動生成」「vscode uml 自動生成」といった要望の実体は、たいてい「既存のソースコードを読み取って図を起こしてほしい」です。ここははっきりさせておきます。Mermaid本体にソースコード解析機能はなく、VS Codeの標準機能にもコードから図を生成する仕組みは含まれていません。Mermaidが自動でやってくれるのは、テキストで書いた定義からレイアウトを計算して描画する部分だけです。したがって「コードから図を起こす」工程は、Mermaidの外側にある道具で埋めることになります。

2026年時点で現実的な選択肢は3つです。

静的解析ツールにMermaid定義を吐かせる：Pythonならpylint同梱のpyreverseがpyreverse -o mmdでクラス構造をMermaid定義（.mmd）として直接出力できます。他言語でも、PlantUMLやGraphviz形式で出力する静的解析ツールが存在します。クラス構造のように機械的に決まる情報はこの手段が最も正確です。
AIに下書きさせる：Copilot Chatに対象のファイルを開いた状態で「この関数の処理をMermaidのsequenceDiagramで書いて」と依頼します。生成されるのはMermaid定義のテキストなので、そのままMarkdownに貼れば図になります。使い方はGitHub Copilotエージェントモードの使い方｜Ask・Edit・Agentの違いと有効化・料金【2026年版】を参照してください。
手で書く：分岐が10個に満たない範囲なら、AIの出力を直すより最初から書いたほうが速い場面が多いです。

AI生成に頼るべきでない場面もはっきりしています。顧客に提出する設計書や、監査対象になる処理フローを、生成結果の検証なしに載せてはいけません。AIは呼び出し順序をもっともらしく補完しますが、実際には通らない分岐や、存在しないメソッド呼び出しが混ざります。特に例外処理とリトライは落とされやすい箇所です。生成した図はコードと同じリポジトリの.mdに置き、プルリクエストの差分としてレビューする運用にすれば、図がコードから乖離したまま放置される事故を防げます。テキストで管理できることこそがMermaidの利点なので、そこを使い切るべきです。

Mermaid図が表示されない・画像に出力できないときの対処

プレビューに図が出ないときの切り分け6点

上から順に切り分けます。

エディタ本文を見ている：1.121のビルトイン拡張が描画するのは、Markdownプレビュー・ノートブックのMarkdownセル・チャットの3か所だけです。エディタの編集画面にはコードのまま表示されます。まずプレビューを開いてください。
旧拡張との競合（1.121以降で最も多い）：「Markdown Preview Mermaid Support」を入れたままVS Codeを1.121へ更新すると、旧拡張とビルトインのmermaid-markdown-featuresが同じmermaidコードブロックの描画処理を二重に登録し、ビルトイン側の描画が抑止されて図が出なくなることがあります（VS Code Issue #317870）。この拡張は本体への統合に伴い非推奨になっているため、アンインストール（または無効化）してVS Codeを完全に再起動してください。
バージョンが1.121未満：ヘルプメニューのバージョン情報を確認します。更新できない事情があるなら、従来どおり「Markdown Preview Mermaid Support」を入れて使います。
ワークスペースが制限モード：信頼されていないフォルダではプレビューの拡張機能が動作しません。ウィンドウ上部の警告からワークスペースを信頼します。
コードフェンスの言語指定ミス：```mermaidである必要があります。```Mermaidや```mmdでは描画されません。
Mermaidの構文エラー：ここまで問題なければ定義側です。同じテキストをMermaid Live Editor（mermaid.live）に貼れば、何行目のどのトークンで落ちているかが表示されます。矢印を->と1本にしていたり、endの閉じ忘れが典型です。

PNG・SVG書き出しの手段（mermaid-cli／Live Editor）

標準プレビューの右クリックメニューにあるのは「Mermaidソースのコピー」で、画像のエクスポートではありません。画像ファイルが要るなら別手段を使います。

ファイル単位で自動化するならmermaid-cliが確実です。拡張子から出力形式が判定されます。

npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg
mmdc -i diagram.mmd -o diagram.png -s 2 -b transparent

-s 2は2倍の解像度、-b transparentは背景を透過にするオプションで、どちらもPNG出力向けです（-bはSVG出力に効かない既知の不具合がmermaid-cliのIssue #969に報告されています）。資料に貼るPNGは等倍だと文字がにじむため、スケールを上げておくと扱いやすくなります。1枚だけ必要な場合は、Live Editorの画面から直接PNG・SVGをダウンロードするほうが速いです。

よくある質問

VSCodeでMermaidを使うのに拡張機能は必要ですか？

VS Code 1.121（2026年5月20日リリース）以降は不要です。ビルトイン拡張「Mermaid Markdown Features」がMarkdownプレビュー・ノートブックのMarkdownセル・チャットで描画します。1.121より前のバージョンを使い続ける場合のみ、「Markdown Preview Mermaid Support」が必要です。

VSCodeでMermaid図が表示されないのはなぜですか？

1.121へ更新した環境では、旧拡張「Markdown Preview Mermaid Support」が残っていて、ビルトイン拡張と描画処理が二重に登録され、ビルトイン側が抑止されているケースが多いです（VS Code Issue #317870）。旧拡張をアンインストール（または無効化）してVS Codeを完全に再起動してください。それでも出ない場合は、プレビューを開いているか、ワークスペースの信頼（制限モード）、コードフェンスの言語指定がmermaidになっているか、Mermaidの構文エラーの順に確認します。

graph TDとflowchart TDはどちらを使うべきですか？

これから書くならflowchartです。graphは初期からのキーワードで別名として動作しますが、v11系で追加された新しいノード形状やLook、ELKレイアウトは公式ドキュメント上flowchartの機能として整備されています。同一定義でも塗り色や間隔が変わるという報告（Issue #7486）もあります。

VSCodeでコードからシーケンス図を自動生成できますか？

ソースコードを解析して図にする機能は、MermaidにもVS Code標準にもありません。クラス構造ならPythonのpyreverse -o mmdのような静的解析ツールでMermaid定義を直接出力できます。処理フローはCopilot ChatにMermaid定義を書かせて下書きにする方法が現実的ですが、分岐や例外処理が落ちるため、そのまま設計書に載せず必ずコードと突き合わせてください。

Mermaid図をPNGやSVGで出力するには？

標準プレビューに画像エクスポートはありません。npm install -g @mermaid-js/mermaid-cliでmermaid-cliを入れ、mmdc -i diagram.mmd -o diagram.pngのように書き出します。単発ならMermaid Live Editorからのダウンロードが手軽です。

資料請求

VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処

まとめ：VS Code 1.121以降、Mermaid図は拡張機能なしで描ける

VS Code 1.121でMermaidがMarkdownプレビューに標準搭載

シーケンス図（sequenceDiagram）の書き方

登場人物と矢印の基本形

条件分岐・ループのグループ化（alt／opt／loop／par）

フローチャート（flowchart TD／graph TD）の書き方

ノードの形と分岐ラベル

graphとflowchartの差異と選択基準

クラス図・ER図・画面遷移図をMermaidで描く

VS Codeで図を書く手段の選び分け（Mermaid／PlantUML／GUI拡張）

コードからの図の自動生成の限界と現実的な3手段

Mermaid図が表示されない・画像に出力できないときの対処

プレビューに図が出ないときの切り分け6点

PNG・SVG書き出しの手段（mermaid-cli／Live Editor）

よくある質問

VSCodeでMermaidを使うのに拡張機能は必要ですか？

VSCodeでMermaid図が表示されないのはなぜですか？

graph TDとflowchart TDはどちらを使うべきですか？

VSCodeでコードからシーケンス図を自動生成できますか？

Mermaid図をPNGやSVGで出力するには？

関連記事

CATEGORY

VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処

まとめ：VS Code 1.121以降、Mermaid図は拡張機能なしで描ける

VS Code 1.121でMermaidがMarkdownプレビューに標準搭載

シーケンス図（sequenceDiagram）の書き方

登場人物と矢印の基本形

条件分岐・ループのグループ化（alt／opt／loop／par）

フローチャート（flowchart TD／graph TD）の書き方

ノードの形と分岐ラベル

graphとflowchartの差異と選択基準

クラス図・ER図・画面遷移図をMermaidで描く

VS Codeで図を書く手段の選び分け（Mermaid／PlantUML／GUI拡張）

コードからの図の自動生成の限界と現実的な3手段

Mermaid図が表示されない・画像に出力できないときの対処

プレビューに図が出ないときの切り分け6点

PNG・SVG書き出しの手段（mermaid-cli／Live Editor）

よくある質問

VSCodeでMermaidを使うのに拡張機能は必要ですか？

VSCodeでMermaid図が表示されないのはなぜですか？

graph TDとflowchart TDはどちらを使うべきですか？

VSCodeでコードからシーケンス図を自動生成できますか？

Mermaid図をPNGやSVGで出力するには？

関連記事

RELATED POSTS 関連記事

CATEGORY