Mermaid Graphical Editorを使うとVSCodeでサクサク図が書けるよ

ARANK

Mermaid Graphical EditorVSCodeの拡張機能です。 Editor側で編集した内容もマークダウンにフィードバックされます。vs Draw.io Integration類似ツールとしてDraw.io Integrationがあります。 Editorをクリックすると、次のようにエディタが開きます。今回はFlowchartを選択してみました。すると、エディタ側もマークダウン側も変わったのがわかります。まずはエディタ側で図形を選べるようになっているので、使いたいパーツを選択します。選択すると緑色にハイライトされています。その状態で+を押すと、図が追加されます。今回はnodeを二つ追加してみました。これらをつなぎ合わせるには、→を選択します。するとエディタ側に→マークが表示されます。この状態で、始点と終点を選択すると以下のように連結してくれます。最終的にGitHubのプレビューとかで見てみると、この通りです。コメントもこの通りです。元はただのMermaidなので、テキスト側を編集しても問題なく反映されます。Mermaid Graphical Editorを使う利点マークダウンに成果物を直接埋め込めるdrawio拡張機能と違うところは、マークダウンの中でガリガリ書ける点でしょう。「ちょっとした図が欲しい」という…