VS Code で、Markdown の中の Mermaid の図をプレビューする手順をメモしました。VS Code 1.121 からは、拡張機能を入れなくても Markdown のプレビューで図が表示されます。

経緯

VS Code 1.144.0 で、拡張機能を入れずに Markdown のプレビューを開いたところ、mermaid のコードブロックが図として表示されました。1.121 から、拡張機能「Markdown Preview Mermaid Support」が VS Code に組み込まれたためです。ただ、VS Code で表示できた図が、このブログではエラーになることがありました。

環境

• macOS 26.6
• VS Code 1.144.0(中の Mermaid は 11.17.2)

手順

プレビューを開く

Markdown に mermaid のコードブロックを書いて、プレビューを開きます。

markdownCopy code```mermaid
flowchart LR
    A[編集] --> B[プレビューで確認]
    B --> A
```

横に並べて開くと、左のソースの mermaid のコードブロックが、右のプレビューでは図として表示されます。

拡張機能「Markdown Preview Mermaid Support」が、組み込みの Mermaid Markdown Features になったためです。ノートブックの Markdown セルとチャットでも表示されます。

プレビューと Mermaid CLI の使い分け

図のソースをコピーする

図を右クリックして、Copy Diagram Source を選びます。

テーマや大きさを変える

settings.json に、markdown-mermaid で始まる名前で書きます。

jsonCopy code{
  "markdown-mermaid.lightModeTheme": "neutral",
  "markdown-mermaid.maxTextSize": 100000
}

テーマには vscode、base、forest、dark、default、neutral を指定できます。既定の vscode のままダークテーマにすると、図の色もテーマに合わせて変わります。

SVG や PNG に書き出す

Mermaid CLI をインストールします。約25秒で終わります。

bashCopy codenpm i @mermaid-js/mermaid-cli

出力するファイルの拡張子で形式が変わります。

bashCopy codenpx mmdc -i diagram.mmd -o diagram.svg
npx mmdc -i diagram.mmd -o diagram.png
npx mmdc -i diagram.mmd -o diagram.pdf

PNG の解像度を上げるときは、-s で倍率を指定します。幅418ピクセル、高さ1,171ピクセルの図が、幅836ピクセル、高さ2,342ピクセルになります。

bashCopy codenpx mmdc -i diagram.mmd -o diagram.png -s 2

ダークテーマで背景を透明にするときは、次のとおりです。

bashCopy codenpx mmdc -i diagram.mmd -o diagram.png -t dark -b transparent

書き出す形式は、サイズで選びます。ノードが6つのネットワーク図では、PNG が一番軽くなりました。SVG は図形のデータですが、この図では最も大きくなります。

Markdown の中の図をまとめて画像にする

入力に Markdown を指定します。

bashCopy codenpx mmdc -i doc.md -o out.md

図が2つある doc.md では、out-1.svg と out-2.svg が作られ、out.md のコードブロックは画像への参照に置き換わります。Mermaid を表示できないサイトに載せるときに便利です。

markdownCopy code![diagram](./out-1.svg)

注意点

図のコマンドは右クリックメニューにある

図のコマンドはコマンドパレットには出ません。右クリックメニューから使います。

.mmd ファイルは図にならない

.mmd ファイルを開いても図になりません。組み込みの機能は Markdown のプレビュー用で、.mmd ファイルの言語の登録がないためです。

公開先ではエラーになることがある

VS Code で表示できた図が、公開先ではエラーになることがあります。VS Code 1.144.0 に入っている Mermaid は 11.17.2 で、たとえば architecture-beta に日本語のラベルを書いた図は、上の画面のとおり VS Code では表示されますが、11.12.2 ではエラーになります。

bashCopy codegrep -oE 'version:"11\.[0-9]+\.[0-9]+"' \
  "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/mermaid-markdown-features/markdown-preview-out/"infoDiagram-*.js

図が表示されないとき

大きな図が表示されないときは、markdown-mermaid.maxTextSize を上げます。公開先でエラーになるときは、公開先の Mermaid のバージョンを調べて、そのバージョンで通る書き方に変えます。

参考文献

• VS Code 1.121 リリースノート
• Mermaid CLI
• Mermaid で描ける図の種類と書き方の例
• Mermaid でネットワーク構成図を書く手順