# ブラウザで Graphviz を描く


## vscode.dev を使う方法

1. [vscode.dev](https://vscode.dev/) を開く。
2. `ctrl+shift+x` で拡張機能の管理画面を開く。
3. 拡張機能 [Graphviz Interactive Preview](https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview) をインストールする。
4. `ctrl+shift+e` でエクスプローラーに戻り、拡張子が `.dot` のファイルを作成する。
5. ファイルを開き、右上の `Preview Graphviz` をクリックする。

![Graphviz で図を描いている様子](../../assets/imgs/graphviz_in_vscode_dev.png)

## その他の Graphviz オンラインエディタ

- [dreampuf.github.io/GraphvizOnline](https://dreampuf.github.io/GraphvizOnline/#digraph%20G%20%7B%0A%0A%20%20subgraph%20cluster_0%20%7B%0A%20%20%20%20style%3Dfilled%3B%0A%20%20%20%20color%3Dlightgrey%3B%0A%20%20%20%20node%20%5Bstyle%3Dfilled%2Ccolor%3Dwhite%5D%3B%0A%20%20%20%20a0%20-%3E%20a1%20-%3E%20a2%20-%3E%20a3%3B%0A%20%20%20%20label%20%3D%20%22process%20%231%22%3B%0A%20%20%7D%0A%0A%20%20subgraph%20cluster_1%20%7B%0A%20%20%20%20node%20%5Bstyle%3Dfilled%5D%3B%0A%20%20%20%20b0%20-%3E%20b1%20-%3E%20b2%20-%3E%20b3%3B%0A%20%20%20%20label%20%3D%20%22process%20%232%22%3B%0A%20%20%20%20color%3Dblue%0A%20%20%7D%0A%20%20start%20-%3E%20a0%3B%0A%20%20start%20-%3E%20b0%3B%0A%20%20a1%20-%3E%20b3%3B%0A%20%20b2%20-%3E%20a3%3B%0A%20%20a3%20-%3E%20a0%3B%0A%20%20a3%20-%3E%20end%3B%0A%20%20b3%20-%3E%20end%3B%0A%0A%20%20start%20%5Bshape%3DMdiamond%5D%3B%0A%20%20end%20%5Bshape%3DMsquare%5D%3B%0A%7D)
- [edotor.net](https://edotor.net/)
- [graphs.grevian.org/graph](https://graphs.grevian.org/graph)

## 参考文献

- [External Resources | Graphviz.org](https://graphviz.org/resources/)