Mermaid 図を VS Code で編集・プレビューする

Q: Cursor でも使えますか?

はい。Cursor は Open VSX から拡張機能をインストールします。拡張機能ビューで zovo.mermaid-viewer を検索してインストールしてください。

Mermaid Viewer を入れて .mmd か .mermaid ファイルを開き、Ctrl+K V(Mac は Cmd+K V)を押すと、横にライブプレビューが開きます。Markdown 内の mermaid ブロックの編集、補完とエラー表示、テンプレート、1 つの図の PNG と SVG の書き出しは無料です。Zovo Pro(USD 19 の買い切り)ではワークスペース内の全図の一括書き出し、表紙付き PDF の書き出し、保存時の自動書き出しが加わり、それぞれ 3 回まで無料で試せます。

VS Code にインストール Marketplace のページ Open VSX (Cursor、Windsurf、VSCodium)

無料、MIT ライセンス。 Extension ID zovo.mermaid-viewer.

VS Code での手順

Marketplace から Mermaid Viewer をインストールします。Ctrl+P (macOS では Cmd+P) を押して ext install zovo.mermaid-viewer を実行しても入ります。
.mmd か .mermaid ファイルを開き、コマンドパレットで「Mermaid Viewer: Open Diagram Editor (Text + Live Preview)」を実行するか、エディター右上のプレビューアイコンをクリックします(Ctrl+K V、Mac は Cmd+K V)。テキストとライブプレビューが並んで表示されます。
Markdown ファイルでは、mermaid ブロックの上に表示される「Edit diagram」をクリックします。そのブロックがプレビュー付きで開き、保存するとテキストが Markdown ファイルに戻ります。Markdown ファイルで Undo すれば元に戻せます。
入力中は図の種類、キーワード、矢印、形状が補完され、エラーのある行には赤い下線が引かれます。新しい図は「New Diagram from Template」で 15 種類のテンプレートから始められます。
図は PNG(幅か高さを指定、または 1x、2x、4x)と SVG で書き出せ、PNG と SVG のクリップボードへのコピーもできます。Azure DevOps や GitHub の wiki 向けに、ラベルを SVG のテキストとして書き出すオプション(mermaidViewer.svgTextLabels)もあります。

Cursor、Windsurf、VSCodium の場合

これらのエディターは Open VSX から拡張機能を入れます。Extensions ビュー (Ctrl+Shift+X) で zovo.mermaid-viewer を検索して Install を押してください。Open VSX のページは zovo/mermaid-viewer です。あとは VS Code と同じ手順で使えます。

無料でできること

ライブプレビュー、Markdown 内の mermaid ブロックの編集、補完とエラー表示、15 種類のテンプレート、エクスプローラーの「Mermaid Diagrams」ビュー、1 つの図の PNG と SVG の書き出しとコピーは無料です。Mermaid 12.3.0 が同梱されているので、プロキシの内側やオフラインでも描画でき、アカウントも AI も使いません。テレメトリはなく、プレビューはネットワークにアクセスしません。

Zovo Pro で追加されるもの

Export All Diagrams in Workspace は、ワークスペース内のすべての .mmd、.mermaid、Markdown ファイルにある図を、SVG、PNG、またはその両方で mermaid-export フォルダに書き出します。元のフォルダ構成がそのまま保たれるので、ドキュメントの図を 1 つずつ書き出す必要がありません。ほかに、ファイル内のすべての図を、図の一覧を載せた表紙付きの 1 つの PDF にまとめる Export Diagrams to PDF with a Title Page と、保存するたびにソースの隣の SVG や PNG を最新に保つ Export on Save があります。

Export All Diagrams in Workspace (SVG/PNG) の使い方

フォルダを開いた状態で、コマンドパレットから「Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)」を実行します。
形式を SVG、PNG、SVG and PNG から選びます。
図が mermaid-export フォルダに、元のフォルダ構成のまま保存されます。

Export All Diagrams in Workspace (SVG/PNG) はライセンスなしで 3 回まで使えます。ファイルを開いたときにポップアップが出たり、残り日数が表示されたりすることはありません。

カードで支払う (USD 19、買い切り)

Zovo Pro は USD 19 の買い切りです。サブスクリプションではなく、すべての Zovo 拡張機能の Pro ツールが使えるようになります。カード (Stripe) で支払うと、次のページにライセンスキーが表示されます。VS Code のコマンドパレットで "Enter Zovo Pro license key" を実行し、キーを貼り付けてください。キーはネットワークを使わずに手元のパソコンで確認されます。

5 人までのチーム向けは USD 59 の買い切りで、カードで支払えます。ルールと Pro ツールの一覧は Zovo Pro のページ (英語) にあります。

できないこと

500,000 文字を超える図や 2,000 本を超えるリンクを含む図は描かれず、描画は 10 秒で止まります。
インターネットから読み込むアイコンパックは使えません(組み込みのアイコンは使えます)。ラベル内の数式($$...$$)は正しく表示されない場合があります。
VS Code 標準の Markdown プレビューには組み込まれません。図はこの拡張機能のプレビューパネルに表示されます。
Mermaid ファイルとして登録される拡張子は .mmd と .mermaid だけです。

よくある質問

PDF の書き出しは無料ですか?

いいえ。1 つの図の PNG と SVG の書き出しは無料ですが、表紙付きの PDF、ワークスペースの一括書き出し、保存時の書き出しは Zovo Pro のツールです。それぞれ 3 回まで無料で試せ、保存時の書き出しは 1 回のウィンドウセッションで 1 回と数えます。

Cursor でも使えますか?

はい。Cursor は Open VSX から拡張機能をインストールします。拡張機能ビューで zovo.mermaid-viewer を検索してインストールしてください。

オフラインで使えますか?

はい。Mermaid 12.3.0 が拡張機能に含まれているので、インターネットに接続していなくても描画できます。アカウントも不要です。

すべての機能と設定は Mermaid Viewer のページ (英語) にあります。

拡張機能のバージョン 0.3.3 で確認しました (2026-11-12)。