[2026/10/11]

[WEB Tool] DOT Graph Visualizer v1.0 — DOT を書くだけで図になる、Graphviz ビューアの使い方ガイド

[WEB Tool] DOT Graph Visualizer v1.0 — DOT を書くだけで図になる、Graphviz ビューアの使い方ガイド

概要

DOT Graph Visualizer は、DOT 言語で書いた図を、ブラウザ上で描くWEBツールです。流れ図、依存関係、ツリー、関係図などを、文字で書いて、その場で確認できます。

描画には、Graphviz を WASM にしたものを使っています。レイアウトエンジンは、dot、neato、fdp、sfdp、circo、twopi、osage、patchwork の 8 種類から選べます。

図は、ドラッグとホイールで動かせます。ノードをクリックすると、つながっているところだけが光るので、大きな図でも、つながりを追えます。書き出しは、SVG、PNG、DOT、JSON などに対応しています。

データはすべてお使いの端末（ブラウザ内）で処理されます。書いた DOT やファイルを、サーバーへ送信することはありません。

DOT Graph Visualizer

アプリのリンク。

スタートメニューから起動

トップページのスタートメニューからも起動できます。

DOT Graph Visualizer - スタートメニューから起動

スクリーンショット

DOT Graph Visualizer — フローチャートを描いた画面

DOT のフローチャートが描かれた DOT Graph Visualizer

左に DOT のエディタ、中央に図、右にエンジンの選択と書き出しが並びます。

DOT Graph Visualizer — ノードをクリックして、つながりを強調した画面

ノードをクリックして、つながっているノードとエッジが赤く強調された画面

クリックしたノードが赤い太線になり、つながっているノードとエッジだけが残ります。ほかは薄くなります。

ツールの特徴

  • DOT をその場で描画: 入力が止まって約 0.4 秒で、自動で描き直します
  • エラーを行番号つきで表示: 文法の間違いがある行を、赤い帯で示します。直前の図は残ります
  • 8 種類のレイアウトエンジン: dot、neato、fdp、sfdp、circo、twopi、osage、patchwork
  • 図を自由に動かす: ドラッグで移動、ホイールで拡大縮小（カーソル位置が中心）、Fit で全体表示
  • クリックでつながりを強調: 隣接、下流すべて、上流すべての 3 種類
  • 7 種類の書き出し: SVG、PNG（1〜4 倍、背景を選べる）、DOT、DOT（整形）、JSON、plain、xdot
  • サンプル 7 種を内蔵: フローチャート、クラスタ、HTML テーブル、状態遷移図、ツリー、無向グラフ、放射状
  • 完全ローカル処理: サーバー通信なし。入力は、このブラウザに自動で保存されます

まず試す：サンプルを開く

  1. 左の「Samples…」の一覧から、「Flowchart (LR, shapes)」を選びます。
  2. 中央に、日本語入りのフローチャートが出ます。
  3. 左の DOT を、書き換えてみてください。たとえば、rankdir=LR; を消すと、図が縦向きになります。
  4. 図のノード（たとえば「形式は正しい？」）をクリックしてみてください。つながっているところだけが光ります。Esc か、何もない所のクリックで解除できます。
  5. 右の「Layout engine」を neato に変えると、同じ DOT でも、配置が変わります。

自分の DOT ファイルは、画面のどこにドロップしても、読み込めます（.dot .gv .txt .xdot）。

使い方

1. DOT を書く

  • 左のエディタに、DOT を書きます。行番号がついていて、Tab キーで、半角スペース 2 つのインデントが入ります。
  • 「auto render」にチェックが入っているときは、入力が止まって約 0.4 秒で、描き直します。切ったときは、Ctrl+Enter か「RENDER」のボタンで描きます。
  • 文法の間違いがあると、図の下ではなく、左のエディタの下にメッセージが出ます。該当の行は、赤い帯で示されます。このとき、図は直前のままです。
  • 「Open .dot / .gv…」のボタンか、ファイルのドロップで、DOT ファイルを開けます。

2. レイアウトエンジンを選ぶ

エンジン向いているもの
dot流れ図、依存関係、ツリー（階層に並べる）。まずはこれ
neato / fdp関係図（無向グラフ。小〜中規模）
sfdpノードが多い無向グラフ
circo円環状の配置
twopi中心から放射状の配置
osageクラスタ（まとまり）を、きれいに並べる
patchworkツリーマップ（面積で表す）

エンジンを切り替えると、すぐに描き直します。サンプルを選ぶと、そのサンプルに合ったエンジンに、切り替わります。

3. 図を見る

  • ドラッグ: 図を動かします。
  • ホイール: カーソルの位置を中心に、拡大縮小します。
  • 「Fit」またはダブルクリック: 図の全体が収まる大きさにします。
  • 「100%」: ブラウザが普通に表示する大きさにします。
  • 「＋」「−」: ボタンで、拡大縮小します。

中央の上に、ノード数、エッジ数、クラスタ数、図の大きさ、描画にかかった時間が出ます。

4. つながりを強調する

図のノードをクリックすると、つながっているところだけが光って、ほかは薄くなります。強調のしかたは、右の「View」の「Click node」で選びます。

選択強調されるもの
neighborsつながっている、隣のノードと、そのエッジだけ
downstream (all)そのノードから先（下流）を、全部たどる
upstream (all)そのノードへ来る側（上流）を、全部たどる
  • エッジ（線やラベル）をクリックすると、そのエッジと、両端のノードが光ります。
  • 向きのない無向グラフでは、どれを選んでも、つながっている範囲が、全部光ります。
  • 何もない所をクリックするか、Esc キーで、解除できます。
  • ドラッグで図を動かしたときは、選択になりません。
  • 描き直したあとも、選んだノードが残っていれば、強調は続きます。

下のステータスに、強調したノードとエッジの数が出ます。

5. 表示を切り替える

右の「View」で、図の背景を切り替えられます。

  • white: 白（初期値）
  • gray: 灰色
  • transparent (checker): 透過を、市松模様で表示
  • dark (invert): 暗い背景（色を反転して表示）

表示だけの切り替えです。書き出しには、影響しません。

6. 書き出す（EXPORT）

右の「Export」で、形式を選んで、「DOWNLOAD」を押します。

形式内容
SVGベクター画像。拡大しても荒れません
PNG画像。倍率を 1〜4 倍から選べます
DOT (source as is)左のエディタの内容を、そのまま保存
DOT (formatted by Graphviz)Graphviz が整形した DOT（位置などの情報つき）
JSON (layout)配置の結果を、JSON で保存
plain (layout text)配置の結果を、テキストで保存
xdot描画の命令つきの DOT

SVG と PNG は、背景を選べます。「as is」は、DOT で指定したとおり、「white」は白、「transparent」は透過です。「Copy SVG to clipboard」で、SVG をクリップボードにコピーすることもできます。

ファイル名は、開いたファイルの名前の拡張子を、選んだ形式に変えたものです。サンプルや、手で書いたときは、sample や graph になります。

DOT の書き方（最小）

初めての方向けの、最小の例です。

digraph G {
  rankdir=LR;
  A [label="開始", shape=oval];
  B [label="処理", shape=box, style=filled, fillcolor=lightyellow];
  A -> B -> C;
  C -> A [label="戻る", style=dashed];
}
  • digraph は、向きのある図です。向きのない図は、graph と書いて、線は -- で結びます。
  • rankdir=LR; で、左から右への向きになります（初期値は、上から下）。
  • ノードの見た目は、[label=... shape=... color=...] のように、角括弧で指定します。
  • まとまりの枠は、subgraph cluster_名前 { label="枠"; A; B; } で作ります（名前が cluster で始まる必要があります）。

属性の一覧など、くわしい書き方は、Graphviz の公式ドキュメントを見てください。

日本語のラベルについて

Graphviz は、文字の幅を、内部の表で見積もります。日本語などの文字は、表にないので、幅が概算になります。そのため、枠に対して、文字が窮屈になることがあります。

そのときは、右の「Layout engine」にある「Node margin」を、「wide（日本語向け）」か「extra wide」にしてください。ノードの余白が広がります。DOT の側で、ノードに margin を書いてあるときは、そちらが優先されます。

警告は、画面の左下に、1 行にまとめて出ます。

注意事項

  • 本ツールは、ブラウザ内で図を描きます。DOT の内容が、外部サーバーへ送信されることはありません。
  • 入力した DOT は、このブラウザに、自動で保存されます。次に開いたとき、前回の続きから始まります。ほかの端末や、ほかのブラウザには、引き継がれません。
  • 日本語などの文字の幅は、概算です。フォントによっては、ラベルが枠からはみ出すことがあります。「Node margin」か、DOT の fontname、fontsize で調整してください。
  • PNG は、ブラウザが SVG を描いた結果です。DOT の image= で、外部の画像を指定しても、PNG には出ません。
  • 描画は、ブラウザの中で、同期して行います。とても大きな図（数百から数千のノード）は、描くのに時間がかかったり、画面が止まったりする可能性があります。この規模での動作は、まだ確認していません。
  • ノードやラベルの検索、DOT の色分け表示は、まだありません。

よくある質問 (FAQ)

Q. DOT を書いたのに、図が出ません。
A. 左のエディタの下に、エラーが出ていないか確認してください。行番号つきで、間違いのある行が赤く示されます。直すと、図が出ます。

Q. 書いた DOT は、サーバーへ送信されますか？
A. されません。描画は、ブラウザの中の WASM で行っています。ただし、入力は、このブラウザの中に保存されます。

Q. 日本語のラベルが、枠からはみ出します。
A. 右の「Node margin」を「wide」にしてみてください。それでも足りないときは、「extra wide」か、DOT の側で margin や fontsize を指定してください。

Q. ノードをクリックしても、光りません。
A. ノードの文字か、図形の上をクリックしてください。ドラッグして動かしたときは、選択になりません。それでも光らないときは、ページを再読み込みしてみてください。

Q. 背景が透明な PNG を作れますか？
A. 右の「Export」で、形式を「PNG」、背景を「BG: transparent」にして、「DOWNLOAD」してください。

Q. 作った図を、ほかのソフトで使えますか？
A. SVG で書き出すと、多くのソフトで、ベクター画像として開けます。DOT で保存すれば、Graphviz の本体でも、同じ図を描けます。

技術記事

実装の詳細は、技術記事にまとめています。

更新履歴

バージョン日付内容
v1.0.02026/10/11初回公開（DOT のライブ描画、8 種類のレイアウトエンジン、エラー行の表示、パン・ズーム、クリックでつながりを強調、SVG / PNG / DOT / JSON などの書き出し、サンプル 7 種）

クレジット

ライブラリ

  • Viz.js (@viz-js/viz) 3.31.0 — Graphviz を WebAssembly にしたもの（Graphviz 16.1.0）
  • エディタ、パンとズーム、つながりの強調、書き出しは、すべて自作の JavaScript（Web API）です。