Mermaid GUI Studio

Mermaid の図を GUI で組み立てられる VS Code 拡張です。コードを覚えていなくても、フォームに項目を足していくだけで図が描けます。既存の Mermaid コードを読み込んで、続きを GUI で編集することもできます。

Web版（ブラウザだけで動く同じツール）は https://tossie85.site/tools/mermaid-gui-studio-2.html で公開しています。

対応する図

インストール後、次のいずれかで開きます。

入口	場所
アクティビティバーのアイコン	左端の縦並び。押すとサイドバーが開き「エディタで開く」ボタンが出る
ステータスバー	画面下部の「Mermaid GUI」
コマンドパレット	`Mermaid GUI Studio を開く`

図は .svg または .html として保存でき、.mmd / .md などのファイルから Mermaid コードを読み込めます。

外部通信なし — 図の生成はすべてローカルで完結します（CSP で通信を遮断）。
テーマ追従 — UI の配色はライト / ダーク / ハイコントラストに合わせて切り替わります。図そのものの配色（Mermaid のテーマ）は、保存物の見た目が変わらないよう利用者の選択のままにしています。
キャンバスの色を選べる — プレビューの地の明暗を図に合わせて調整できます（保存物には含まれません）。