--- title: "VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処" url: "https://www.issoh.co.jp/tech/details/2334/" published: 2024-06-03 updated: 2026-10-13 categories: ["開発"] publisher: "株式会社一創" --- # VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処 VS Code 1.121（2026年5月20日リリース）から、Markdownプレビューがmermaidコードブロックをそのまま図として描画するようになりました。シーケンス図やフローチャートを描くだけなら拡張機能は要りません。一方で、「コードから図を自動生成したい」という要望には標準機能だけでは応えられず、以前から入れていた拡張機能が残っていると逆に図が表示されなくなる症状も出ています。この記事では、Mermaidでのシーケンス図・フローチャートの書き方、コードからフローチャートやクラス図を起こす拡張機能とツール、図が表示されないときの切り分け、Mermaid 12で変わった画像出力までを、2026年10月時点の版で確かめた内容でまとめます。 ## まとめ：Mermaidの標準描画とコード自動生成ツールの使い分け - VS Code 1.121以降は、ビルトイン拡張「Mermaid Markdown Features」がMarkdownプレビュー・ノートブックのMarkdownセル・チャットでMermaid図を描画する。エディタ本文には図は出ない。 - シーケンス図は`sequenceDiagram`、フローチャートは`flowchart TD`で書く。`graph TD`も動くが、新しい形状やレイアウトは`flowchart`側で整備されている。 - コードから関数単位のフローチャートを起こすなら拡張機能CodeVisualizer、Pythonのクラス図ならpylint同梱の`pyreverse -o mmd`。処理の流れをAIに下書きさせる場合は、必ずコードと突き合わせる。 - 図が出ないときは、まず旧拡張「Markdown Preview Mermaid Support」が残っていないかを見る。1.121への更新後に競合による表示不良が報告されている。 - 標準プレビューに画像の書き出しは無い。PNG・SVGはmermaid-cli（`mmdc`）で出す。2026年9月の12.0.0から既定の見た目が変わり、VS Codeのプレビュー（同梱は11.17.0）と書き出した画像の見た目がずれる。 ## VS Code 1.121で標準搭載されたMermaidプレビュー [VS Code 1.121のリリースノート](https://code.visualstudio.com/updates/v1%5F121)は、Matt Bierner氏の拡張機能「Markdown Preview Mermaid Support」を本体に取り込み、「Mermaid Markdown Features」という新しいビルトイン拡張にしたと明記しています。描画されるのは組み込みのMarkdownプレビュー、ノートブックのMarkdownセル、チャットの3か所です。2026年10月7日リリースの1.141.0でも同じ構成で、同梱されているMermaidは11.17.0です（アプリ内の拡張機能ファイルで確認）。 使い方は、Markdownファイルに言語指定`mermaid`のコードフェンスを書き、`Ctrl+Shift+V`（macOSは`Cmd+Shift+V`）でプレビューを開くだけです。 ```` ```mermaid flowchart TD A[受注データ受信] --> B{在庫あり?} B -->|Yes| C[出荷指示] B -->|No| D[バックオーダー登録] ``` ```` プレビュー上の図を右クリックすると「Open Diagram in Editor」と「Copy Diagram Source」が出ます。用意されているのは表示とソースのコピーまでで、画像ファイルへの書き出しはありません。Mermaidそのものの記法や無料のLive Editorについては[Mermaid記法の使い方を完全ガイド｜無料のLive Editorでフローチャート・シーケンス図を作成](/tech/details/3374/)で、VS Code側の拡張機能全般は[VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】](/tech/details/6583/)で扱っています。 ## シーケンス図（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`の後ろにラベルを付けます。省略してもパースは通りますが、各レーンに処理の目的を示すラベルを付けると、並行する処理を見分けやすくなります。枠のネストで図が読みづらくなったら、正常系と異常系で図を分けてください。 ## フローチャート（flowchart TD／graph TD）の書き方 ### ノードの形と分岐ラベル 先頭に`flowchart`と方向（`TD`は上から下、`LR`は左から右）を書き、ノードとエッジを並べます。ノードの形はカッコの種類で決まり、`[処理]`が長方形、`(開始)`が角丸、`{判定}`がひし形、`[(DB)]`が円筒です。矢印のラベルは`-->|Yes|`のように縦棒で挟みます。 ```` ```mermaid flowchart LR S((開始)) --> A[入力チェック] A --> B{必須項目あり?} B -->|不足| E[エラー返却] B -->|充足| C[(DBへ保存)] C --> F((終了)) ``` ```` ### graph TDとflowchart TDの違い `graph`はMermaid初期からのキーワードで、公式ドキュメントでも`flowchart`の別名として扱われ、今も動きます。ただし11系以降に追加された30種類以上のノード形状、見た目を切り替えるLook、レイアウトエンジンELKは、公式ドキュメント上`flowchart`の機能として整備されています。Mermaid 11.13.0では、同じ定義でも`graph LR`と`flowchart LR`で塗り色や間隔が変わるという報告が[Mermaid本体のIssue #7486](https://github.com/mermaid-js/mermaid/issues/7486)に上がっており、2026年10月時点でもOpenです。一方、Mermaid 12.1.0で3ノードの単純な図を`graph LR`と`flowchart LR`で書き出したところ、SVGはどちらも197,078バイトで中身まで一致しました。単純な図では差が出ないものの、報告がある以上は書き分けておくほうが安全です。既存の`graph`を一斉に書き換える必要はありませんが、新しく書く図は`flowchart`で統一してください。 ## Mermaidによるクラス図・ER図・画面遷移図の記法 クラス図は`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 [*] --> ログイン ログイン --> 一覧: 認証成功 ログイン --> ログイン: 認証失敗 一覧 --> 詳細: 明細を選択 詳細 --> 一覧: 戻る ``` ```` 各図種の記法の詳細と、どの図をテキスト管理へ寄せるかの判断基準は[マーメイド記法の書き方｜フローチャート・シーケンス図・ER図をテキスト管理する手順](/tech/details/17351/)で扱っています。 ### VS Codeで図を書く手段の選び分け（Mermaid／PlantUML／Draw.io） 「シーケンス図 ツール vscode」で探しているなら、選択肢は3つです。Markdownに直接埋め込めて、GitHubのプルリクエストでも図として表示され差分をレビューできることを重視するならMermaidです。ステレオタイプやパッケージ図までUMLを厳密に表現したいなら、表現力で勝る[PlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説](/tech/details/4649/)を選びます。GUIでノードを並べたいならDraw.io Integrationです。図を見ながら配置を整えられる一方、Mermaidのように図の定義をMarkdownのコードブロックとして本文に書く使い方はできません。設計資料をリポジトリで管理するチームは、Mermaidを既定にしてUMLの厳密さが要る箇所だけPlantUMLを使うのが扱いやすい構成です。 ## コードからフローチャート・クラス図を自動生成する3つの手段 「vscode フローチャート 自動生成」で探している人の多くは、既存のソースコードを読み取って図にしたいはずです。**Mermaid本体にもVS Codeの標準機能にも、ソースコードを解析して図を作る機能はありません。**Mermaidが自動でやるのは、テキストで書いた定義からレイアウトを計算して描画する部分だけです。コードから図を起こす工程は、次の3つのどれかで埋めます。 ### 関数のフローチャートを起こすCodeVisualizer 関数の中の分岐やループをフローチャートにしたいなら、個人開発のVS Code拡張[CodeVisualizer](https://marketplace.visualstudio.com/items?itemName=DucPhamNgoc.codevisualizer)（拡張機能ID：`DucPhamNgoc.codevisualizer`、MITライセンス）が使えます。Marketplaceの公開APIで2026年10月13日に取得した値では、最新は1.1.0（9月13日更新）、インストール数は24,076件で、VS Code 1.105以降が必要です（配布パッケージの`package.json`で確認）。READMEによると、関数単位のフローチャートはPython、TypeScript/JavaScript、Java、C++、C、Rust、Go、PHPに対応し、コードをTree-sitterで構文解析してMermaidの図に変換し、VS Code内のパネルに描きます。 - コードを選択して右クリックし「CodeVisualizer: Generate Flowchart」を選ぶと、選択範囲のフローチャートが出る。 - 関数の中にカーソルを置いて「CodeVisualizer: Open Flowchart in New Window」を選ぶと、別パネルで開く。 - エクスプローラーでフォルダを右クリックし「Visualize Codebase Flow」を選ぶと、ファイル間の依存関係を図にする（README上の対応はTypeScript/JavaScript、Python、PHP）。 - 「CodeVisualizer: Export Flowchart」で画像に書き出せる。設定`codevisualizer.export.format`の既定はPNGで、SVGとPDFも選べる。 注意したいのはAIラベル機能です。ノードの文言をLLMで要約する機能で、既定では無効（`codevisualizer.llm.enabled`が`false`）ですが、有効にするとOpenAI（既定モデルはgpt-4o-mini）、Gemini、Groq、Anthropicなど外部のAPIを呼ぶ設定になります。社外にコードを出せない案件では、AIラベルを無効のまま使うか、プロバイダにローカル実行のOllamaを選んでください。構文解析そのものはAIを使わずローカルで行われます。 ### pyreverse -o mmdによるPythonクラス図の生成 Pythonのクラス宣言や継承関係を図に起こすなら、pylint同梱の静的解析ツール`pyreverse`が使えます。[出力形式にmmd（Mermaid）](https://pylint.readthedocs.io/en/stable/additional%5Ftools/pyreverse/index.html)があり（pylint 2.13.0、2022年3月に追加）、Mermaid定義を直接書き出せます。抽出結果は型ヒントの書き方や設定に左右されるため、元のコードと照合してください。次の検証用パッケージ`shop/order.py`を用意しました（`shop/__init__.py`は空ファイル）。 ``` class OrderItem: def __init__(self, sku: str, quantity: int): self.sku = sku self.quantity = quantity class Order: def __init__(self, order_id: str): self.order_id = order_id self.items: list[OrderItem] = [] self._total = 0 def add_item(self, item: OrderItem) -> None: self.items.append(item) class ExpressOrder(Order): def ship_today(self) -> bool: return True ``` 2026年10月時点の最新であるpylint 4.1.3で次のように実行すると、この検証用パッケージからは後に示す定義が出力されました。 ``` python -m pip install pylint==4.1.3 # shopパッケージの親ディレクトリで実行 pyreverse -o mmd -p shop shop # classes_shop.mmd と packages_shop.mmd が生成される ``` ``` classDiagram class ExpressOrder { ship_today() bool } class Order { items : list[OrderItem] order_id : str add_item(item: OrderItem) None } class OrderItem { quantity : int sku : str } ExpressOrder --|> Order Order --> OrderItem : items ``` 同じコードをpylint 3.3.9で解析すると、最終行の`Order --> OrderItem : items`（`list[OrderItem]`型の属性からの関連線）が出力されませんでした。関連線まで欲しいなら4系を使ってください。pylint 4.1.3はPython 3.10以上が必要です。また、既定では`_total`のようなアンダースコア始まりの属性と`__init__`が図から省かれます。全部載せたいときは`-f ALL`を付けます。生成された`.mmd`の中身をMarkdownの```` ```mermaid ````ブロックに貼れば、VS Codeのプレビューで図になります。 ### Copilot Chatで処理の流れを下書きさせる場合の限界 シーケンス図のように「誰が誰をどの順で呼ぶか」は、静的解析ツールでは出しにくい情報です。対象のファイルを開いた状態でCopilot Chatに「この関数の処理をMermaidのsequenceDiagramで書いて」と頼むと、Mermaid定義のテキストが返り、チャット内でも図として描画されます。使い方は[GitHub Copilotエージェントモードの使い方｜Ask・Edit・Agentの違いと有効化・料金【2026年版】](/tech/details/6733/)を参照してください。 ただし、**顧客に出す設計書や監査対象の処理フローに、検証していないAI生成の図を載せてはいけません。**AIは呼び出し順序をもっともらしく補いますが、実際には通らない分岐や存在しないメソッド呼び出しが混ざり、例外処理とリトライは特に落ちやすい箇所です。生成した図はコードと同じリポジトリの`.md`に置き、プルリクエストの差分としてレビューしてください。処理が短く呼び出し関係を把握できている場合は、AIの出力を修正する工程を省き、最初から手で書く方法も選べます。 ## Mermaid図がVS Codeで表示されないときの切り分け 上から順に確かめます。 - **エディタ本文を見ている**：ビルトイン拡張が描画するのはMarkdownプレビュー・ノートブックのMarkdownセル・チャットの3か所だけです。編集画面にはコードのまま表示されます。まずプレビューを開いてください。 - **旧拡張との競合（1.121への更新後に報告あり）**：「Markdown Preview Mermaid Support」（`bierner.markdown-mermaid`）を入れたまま1.121へ更新すると、旧拡張とビルトインが同じmermaidコードブロックの描画処理を二重に登録し、図が出なくなることがあります。この不具合は[VS Code Issue #317870](https://github.com/microsoft/vscode/issues/317870)で2026年5月21日に報告され、10月時点でもOpenのままです。旧拡張はリポジトリで「VS Code 1.121に統合されたため非推奨」と告知されているので、アンインストール（または無効化）してVS Codeを完全に再起動してください。 - **バージョンが1.121未満**：ヘルプメニューのバージョン情報で確かめます。更新できない事情があるなら、従来どおり「Markdown Preview Mermaid Support」を入れて使います。 - **ワークスペースが制限モード**：標準のMermaid Markdown Featuresは制限モードにも対応しています。図が出ない場合は、このビルトイン拡張が無効になっていないかを確認してください。 - **コードフェンスの言語指定**：既定で図になるのは```` ```mermaid ````だけです。```` ```mmd ````などで書いた既存の文書を描画させたい場合は、設定`markdown-mermaid.languages`に言語名を追加します。 - **Mermaidの構文エラー**：ここまで問題なければ定義側です。同じテキストを[Mermaid Live Editor](https://mermaid.live/)に貼ると、何行目のどのトークンで止まっているかが表示されます。フローチャートで矢印を`-->`ではなく`->`と書く、分岐ブロックの`end`を閉じ忘れる、といった誤りを確認します。なお、シーケンス図の`->`は矢じりのない実線を表す有効な記法です。 図は出ているのにホイールで拡大できない、という相談もありますが、これは不具合ではありません。設定`markdown-mermaid.mouseNavigation.enabled`の既定が`alt`で、Alt（macOSはOption）を押している間だけマウスで拡大・移動できる仕様です。常に有効にしたいなら`always`に変えます。 ## PNG・SVGへの書き出しとMermaid 12で変わった見た目 ### mermaid-cli 12.0.0による画像の書き出し ファイル単位で画像にするなら[mermaid-cli](https://github.com/mermaid-js/mermaid-cli)（コマンド名`mmdc`）を使います。2026年10月時点の最新は12.0.0（9月24日リリース）で、Node.js 22.13.0以上が必要です。いま新規にインストールすると、中で使われるMermaid本体は最新の12.1.0になります。出力形式は拡張子から判定されます。以下のコマンドを実行する前に、Mermaid定義をflow.mmdとして保存してください。.mmdファイルにはMarkdown用のコードフェンスを含めません。 ``` npm install -g @mermaid-js/mermaid-cli mmdc -i flow.mmd -o flow.svg mmdc -i flow.mmd -o flow.png -s 2 -b transparent mmdc -i flow.mmd -o flow.png --size 1600 mmdc -i README.md -o README.out.md ``` mermaid-cli 12.0.0で上の例のフローチャートを書き出すと、`-s 2`付きのPNGは等倍の2倍（720×878ピクセル）になりました。11系まであった幅・高さ指定の`-w`と`-H`は12.0.0で廃止され、指定すると`error: unknown option '-w'`で止まります。代わりの`--size 1600`は長辺を1600ピクセルに収める指定で、出力は1312×1600でした。背景色の`-b transparent`は以前SVGに効かない不具合がありましたが、その報告（Issue #969）は2025年10月9日にクローズされており、12.0.0で書き出したSVGでも背景が透過になりました。最後の行のようにMarkdownを渡すと、中のmermaidブロックをすべてSVGに書き出し、画像リンクに置き換えたMarkdownを作ります。図が1枚だけなら、Live Editorの画面から直接PNG・SVGをダウンロードするほうが速いです。 ### プレビューと書き出し画像の見た目がずれる原因と戻し方 2026年9月10日リリースの[Mermaid 12.0.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0)は破壊的変更を含み、レイアウトエンジンの既定がELKに、既定のテーマが`redux-color`に、既定のLookが`neo`に変わりました。リリースノートには、既存のフローチャート・状態遷移図・クラス図は配置と配色が変わると明記されています。VS Code 1.141.0が同梱しているのは11.17.0なので、**プレビューで確認した図と、mermaid-cli 12で書き出した画像は見た目が一致しません。** 同じ4ノードのフローチャートで比べると、12系の既定で書き出したSVGはフォントを埋め込むため199,571バイトになり、旧来の見た目に戻したSVGは13,798バイトでした。資料やWikiに貼る画像を従来の見た目に揃えたいなら、リリースノートが案内する3つの設定を図の先頭に書きます。この書き方なら図ごとに設定が残り、プレビューでも`mmdc`でも同じ指定が効きます。 ``` --- config: layout: dagre look: classic theme: default --- flowchart TD A[受注データ受信] --> B{在庫あり?} ``` リポジトリ全体で揃えるなら、`{"layout":"dagre","theme":"default","look":"classic"}`を書いたJSONを`mmdc -c`で渡す方法もあります。逆に、新しい見た目で統一したいチームは、VS Codeの同梱版が12系に上がるまで、最終確認をLive Editorか`mmdc`の出力で行ってください。 ## よくある質問 ### VSCodeでフローチャートをコードから自動生成できますか？ VS Codeの標準機能とMermaid本体にはありません。関数単位のフローチャートなら拡張機能CodeVisualizer（Python、TypeScript/JavaScript、Java、C++、C、Rust、Go、PHPに対応）が、選択したコードから図を描きます。Pythonのクラス図ならpylint同梱の`pyreverse -o mmd`でMermaid定義を直接出力できます。 ### 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の構文エラーの順に確認します。 ### graph TDとflowchart TDはどちらを使うべきですか？ これから書くなら`flowchart`です。`graph`は別名として動きますが、新しいノード形状やLook、ELKレイアウトは公式ドキュメント上`flowchart`の機能として整備されています。Mermaid 11.13.0では、同じ定義でも塗り色や間隔が変わる報告（Issue #7486）があります。 ### Mermaid図をPNGやSVGで出力するには？ 標準プレビューに画像の書き出しはありません。`npm install -g @mermaid-js/mermaid-cli`でmermaid-cliを入れ、`mmdc -i flow.mmd -o flow.png`のように書き出します。12.0.0から既定の見た目が変わったため、VS Codeのプレビューと揃えたいときは図の先頭で`layout: dagre`・`look: classic`・`theme: default`を指定してください。 ## 関連記事 - [VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】](/tech/details/6583/) - [Mermaid記法の使い方を完全ガイド｜無料のLive Editorでフローチャート・シーケンス図を作成](/tech/details/3374/) - [マーメイド記法の書き方｜フローチャート・シーケンス図・ER図をテキスト管理する手順](/tech/details/17351/) - [PlantUMLとは？記法・使い方・インストールから.puml拡張子まで解説](/tech/details/4649/) - [GitHub Copilotエージェントモードの使い方｜Ask・Edit・Agentの違いと有効化・料金【2026年版】](/tech/details/6733/) --- 出典: [VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処]()（株式会社一創）