Graphviz の DOT を VS Code でプレビューする

Q: Cursor でも使えますか?

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

Graphviz Viewer を入れて .dot か .gv ファイルを開き、Ctrl+K V(Mac は Cmd+K V)を押すと、横にプレビューが開きます。Graphviz 16.1 が WebAssembly として同梱されているので、Graphviz をインストールする必要はありません。ライブプレビュー、6 つのレイアウトエンジン、エラー表示、開いているグラフの SVG と PNG の書き出しは無料です。Zovo Pro(USD 19 の買い切り)ではワークスペース内の全グラフの一括書き出し、ベクター PDF の書き出し、保存時の自動書き出しが加わり、それぞれ 3 回まで無料で試せます。

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

無料、MIT ライセンス。 Extension ID zovo.zovo-graphviz-preview.

VS Code での手順

Marketplace から Graphviz Viewer をインストールします。Ctrl+P (macOS では Cmd+P) を押して ext install zovo.zovo-graphviz-preview を実行しても入ります。
.dot か .gv ファイルを開き、エディタータイトルのプレビューアイコンをクリックするか、Ctrl+K V(Mac は Cmd+K V)で横にプレビューを開きます。
入力をやめてから 300 ms でプレビューが描き直されます。保存は不要で、ステータス行にノード数、エッジ数、エンジン、レイアウト時間が表示されます。
構文エラーはエディターで下線が引かれ、Problems パネルにも出ます。修正中もプレビューは最後に正しく描けた図を保ち、エラーのバナーをクリックするとエラーの位置にカーソルが移ります。
ドラッグでパン、Ctrl または Cmd を押しながらホイールでポインター位置を中心にズームします。Find node でノードを探せ、ノードやエッジをクリックするとソースの該当行に移動します。
Markdown の dot、graphviz、gv コードブロックは、VS Code の Markdown プレビューに図として表示されます。

Cursor、Windsurf、VSCodium の場合

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

無料でできること

ライブプレビュー、dot、neato、fdp、sfdp、circo、twopi の 6 つのレイアウトエンジン、エラー表示、ノード検索とソースへのジャンプ、パンとズーム、Markdown 内の dot ブロックの表示、開いているグラフの SVG と PNG の書き出しは無料です。ダークテーマでは既定の黒い線と文字がテーマの色に合わせて変わり、グラフで指定した色はそのまま残ります。レイアウトは時間制限付きの別スレッドで動くので、大きなグラフでも VS Code は固まりません。ネットワーク通信やテレメトリはありません。

Zovo Pro で追加されるもの

Export All Graphs in Workspace は、ワークスペース内のすべての .dot と .gv ファイル、Markdown 内のすべての dot ブロックを、1 回で SVG、PNG、PDF、または全グラフをまとめた 1 つの PDF に書き出します。出力先の graphviz-export フォルダは元のフォルダ構成をそのまま再現するので、ドキュメント用の画像を 1 枚ずつ書き出す手間がなくなります。ほかに、文字を文字のまま残すベクター PDF を書き出す Export to PDF (Vector, Title Page) と、保存するたびにソースの隣の SVG、PNG、PDF を最新に保つ Export on Save があります。

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

ワークスペースを開いた状態で、コマンドパレットから「Graphviz: Export All Graphs in Workspace (SVG/PNG/PDF) (Pro)」を実行します。
出力形式を SVG、PNG、SVG and PNG、PDF、One PDF with every graph から選びます。
ファイルが graphviz-export フォルダに、元のフォルダ構成のまま保存されます。

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

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

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

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

できないこと

PDF の書き出しは標準フォント(Times、Helvetica、Courier)を使うため、日本語などの文字は PDF では「?」になります。SVG と PNG では正しく表示されます。
image= 属性や HTML ラベル内の IMG 要素の画像は描かれません。
4096 KB を超えるグラフはレイアウトされず、レイアウトは 15 秒で止まります(graphvizPreview.maxSourceKB、graphvizPreview.renderTimeoutSeconds)。
プレビューは 1 ファイルにつき 1 つで、VS Code を再起動すると復元されません。エラーの表示はプレビューを開いている間だけです。

よくある質問

Graphviz のインストールは必要ですか?

いいえ。Graphviz 16.1 が WebAssembly として拡張機能に含まれているので、何もインストールせずにオフラインで使えます。

無料で使えますか?

はい。プレビュー、エラー表示、開いているグラフの SVG と PNG の書き出しは無料です。PDF の書き出し、ワークスペースの一括書き出し、保存時の書き出しが Zovo Pro のツールで、それぞれ 3 回まで無料で試せます。保存時の書き出しは 1 回のウィンドウセッションで 1 回と数えます。

Cursor でも使えますか?

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

日本語のラベルは表示されますか?

プレビュー、SVG、PNG では表示されます。PDF の書き出しは標準フォントを使うため、日本語の文字は「?」になります。

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

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