Mermaid Graphical Editorを使うとVSCodeでサクサク図が書けるよ
Mermaid Graphical Editor
VSCodeの拡張機能です。
Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。
逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。
vs Draw.io Integration
類似ツールとしてDraw.io Integrationがあります。
こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。
しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像としてexportが必要です。
できれば自分はマークダウン以外のファイルを作らず、一つのマークダウンファイルだけで完結したいと思ってました。それを叶えてくれるツールがMermaid Graphical Editorでした。
使ってみる
拡張機能をインストールした状態で、マークダウンファイルの中でmermaidを指定するとこれが出ます。
何も書いていない状態でMermaid Editorをクリックすると、次のようにエディタが開きます。
今回はFlowchartを選択してみました。すると、エディタ側もマークダウン側も変わったのがわかります。
まずはエディタ側で図形を選べるようになっているので、使いたいパーツを選択します。選択すると緑色にハイライトされています。その状態で+を押すと、図が追加されます。
今回はnodeを二つ追加してみました。
これらをつなぎ合わせるには、→を選択します。するとエディタ側に→マークが表示されます。
この状態で、始点と終点を選択すると以下のように連結してくれます。
最終的にGitHubのプレビューとかで見てみると、この通りです。
コメントもこの通りです。
元はただのMermaidなので、テキスト側を編集しても問題なく反映されます。
Mermaid Graphical Editorを使う利点
マークダウンに成果物を直接埋め込める
drawio拡張機能と違うところは、マークダウンの中でガリガリ書ける点でしょう。
「ちょっとした図が欲しい」という場合でもVSCodeの元のマークダウンのなかだけで作業が簡潔するのは非常に楽ちんです。
生成AIと相性がいい
GitHub Copilotと連携していれば簡単なチャートや下書きならVSCodeの中だけで完結するだけでなく、生産性も抜群によいです。
下書きレベルで書き起こしてもらって、修正はMermaid Editorを使うとよさそう。
おわり
使ってみたところ、デメリットは今の所見つからないです。Mermaid Graphical Editorを利用すれば、開発に限らずVSCodeでの文書作成が捗りそうです。
特にZennの記事をVSCodeで書いてたりする時に簡単な図が欲しくなることが多かったりしましたが、そういうときに非常に重宝しそうです。
みなさんも是非使ってみてください！
Discussion
draw.io extensionだと、drawioの編集画面内のFile->Convertでsvgかpngにconvertすると、いちいちexportせずに編集できるようになりますよ。
svgだとバージョン管理との相性もまあまあなので便利です。