使い方

• 左の欄に DOT を書くと、中央に図が出ます。入力が止まって約 0.4 秒で自動的に描き直します（右の auto render を切ると、Ctrl+Enter か RENDER ボタンのときだけ描き直します）。
• まず「SOURCE」の一覧からサンプルを選んでみてください。
• .dot / .gv ファイルは、画面のどこにドロップしても読み込めます。
• 図は、ドラッグで動かして、ホイールで拡大縮小できます（カーソル位置が中心）。
• 書き出しは右の EXPORT から。SVG / PNG（倍率と背景を選べる）/ DOT / JSON などを保存できます。

DOT の書き方（最小）

• 有向グラフ：digraph G { A -> B -> C; }
• 無向グラフ：graph G { A -- B; }
• 見た目：A [label="開始" shape=box color=red style=filled fillcolor=lightyellow];
• 向き：rankdir=LR;（左→右）
• まとめ枠：subgraph cluster_x { label="枠"; A; B; }

レイアウトエンジン

注意

• 処理はすべてブラウザ内で行います。DOT の内容は外部へ送信されません。
• 文字の幅は Graphviz が内部で見積もるため、フォントによっては、ラベルが枠からはみ出すことがあります。そのときは fontname や fontsize を調整してください。
• PNG の書き出しは、ブラウザが SVG を描いた結果です。画像（image=）の外部参照は、読み込めません。
• 入力欄の内容は、このブラウザに自動で保存されます（次回開いたときに戻ります）。