Graphviz エディター
DOT コードを書くと Graphviz 図をブラウザでリアルタイム描画。全 7 レイアウトエンジン、構文エラー行表示、ズーム可能なプレビュー、SVG 保存・PNG 書き出しに対応。WebAssembly で完全ローカル動作、アップロード無し。
Graphviz と DOT 言語とは何ですか？
Graphviz は定番のオープンソース グラフ可視化ツールキットです。DOT はノード・辺・属性を記述するテキスト言語で、Graphviz が読みやすいレイアウトを自動計算します。
描画にインターネット接続は必要ですか？
レイアウト エンジンの初回ダウンロード時のみ必要です。以降の描画は WebAssembly によりブラウザ内で完結し、図やコードが端末の外に出ることはありません。
どのレイアウト エンジンに対応していますか？
7 つすべてです：dot（階層）、neato と fdp（力学的）、circo（円環）、twopi（放射状）、osage（クラスターツリー）、patchwork（ツリーマップ）。レイアウト プルダウンで切り替えられます。
構文エラーの意味はどう調べる？
DOT コードに問題があると、エラー パネルにパースに失敗した行番号を含むエンジンのメッセージが表示され、直前の正常な描画はそのまま残ります。
結果を書き出せますか？
はい。鮮明なベクター SVG ファイルをダウンロードできるほか、現在のテーマに合わせた背景色の 2 倍解像度 PNG を書き出せます。
大きなグラフのプレビューはズームできますか？
はい。プレビュー上でマウスホイールまたはズーム ボタンを使用し、ドラッグで移動、「フィット」で表示をリセットします。
サンプルはありますか？
サンプル プルダウンにはフローチャート、状態遷移図、組織図、neato ネットワーク、twopi 放射状ツリーの 5 種類があり、それぞれすぐ編集できる DOT コードを読み込みます。
DOT コードは送信・保存されますか？
いいえ。サーバーには何も送信されず、保存もされません。エディターは現在のページ セッションで入力した内容だけを読み取ります。
どのくらい大きいグラフまで扱えますか？
数百ノードのグラフはほぼ瞬時に描画できます。数千ノードの超大規模グラフも動作しますが、描画時間は相応に長くなります。
コマンドラインの Graphviz と同じ結果になりますか？
同じ Graphviz ライブラリ（バージョン 16）を同梱しているため、同じ入力とオプションならローカルで dot コマンドを実行した場合と同等のレイアウトと SVG が得られます。
Graphviz エディターの使い方
このエディターは Graphviz の図をブラウザー内で直接描画します。左側で DOT コードを書くと、入力に合わせて右側の SVG プレビューが更新されます。WebAssembly にコンパイルされた本物の Graphviz ライブラリーで動くため、グラフがパソコンの外に出ることはありません。
- ソースエディターに DOT コードを入力または貼り付けます。入力をやめてから約 300 ミリ秒でプレビューが自動描画されます。
- レイアウトエンジン（dot・neato・fdp・circo・twopi・osage・patchwork）を切り替えて、グラフの配置方法を変更します。
- 「サンプル」ドロップダウンからスターター用テンプレートを読み込みます。フローチャート・状態遷移図・組織図・ネットワーク・放射ツリーから選んで編集できます。
- マウスホイールやズームボタンで大きなグラフを確認し、ドラッグで移動、「フィット」でリセットします。結果は SVG でダウンロード、または 2 倍解像度の PNG を書き出せます。
構文エラーが出たら、エラーパネルに DOT パーサーが止まった正確な行が表示されます。その行を直せば、コードを失うことなくプレビューがすぐ復元します。
関連ツール
- Mermaid エディタ テキストからフローチャート・シーケンス図・ガントチャートなどを即座に作成できる Mermaid ライブエディタ。ズームしながら SVG / PNG で書き出せ、処理はブラウザ内で完結します。
- コードプレイグラウンド ライブプレビュー、行番号付きエディタ、キャプチャ付きコンソールを備えたオンラインHTML・CSS・JavaScriptプレイグラウンド。スニペットを即座にテストし、結果を単一のHTMLファイルとしてダウンロード。すべてブラウザ内で動作します。
- グラフメーカー CSVやTSVデータを貼り付けて棒・折れ線・面・円・ドーナツグラフを作成。ライブプレビュー、カラーパレット、タイトルと凡例の制御、2倍PNGエクスポートに対応。すべてブラウザ内で完結します。
- ファイルハッシュ MD5、SHA-1、SHA-256、SHA-512ファイルハッシュをローカル計算・検証
- Chmod 計算機 無料オンラインchmod計算機でチェックボックス付きLinuxファイル権限を視覚化・計算。数値(755, 644)とシンボリック表記(rwxr-xr-x)を即座に変換。setuid、setgid、sticky bit等の特殊権限に対応。
- ASCIIコード表 10進数、16進数、8進数、2進数コード、HTMLエンティティ、文字説明を含む完全なASCII文字エンコーディングリファレンス。即座に検索・フィルタリング。
- Hexビューアー 検索、オフセットナビゲーション、仮想スクロール付きのHexダンプ形式でファイル内容を表示
- MIMEタイプ検索 ファイル拡張子からMIMEタイプを即座に検索、またはMIMEタイプから拡張子を逆引き。1000以上のエントリを収録した無料オンラインリファレンス。