こんにちは！エンジニアの坂口です。
皆さんはシステム開発の設計書やドキュメントを何で書いていますか？
「仕様書はMarkdownで書いてGit管理したいけれど、図とか画像どうしようかな」
「結局、使い慣れた draw.io などの外部ツールで図を作って、画像としてMarkdownに貼り付けているが、修正のたびに画像を出力し直すのが正直めんどい…」
そんな悩みを一発で解決してくれるツールが、Visual Studio Code（VSCode）の拡張機能 「Mermaid Graphical Editor」です！
Mermaid Graphical Editor のメリット
- テキストとGUIの双方向同期
GUIで図を動かすとMarkdown内のコードが自動で変わり、逆にコードを直接書き換えるとGUIの図もリアルタイムに更新されます。
- VSCode（Markdown内）で完結
ブラウザや別アプリをわざわざ開く必要がありません。思考を中断せずにドキュメント作成に集中できます。
- Gitと抜群の相性
成果物は画像ではなく「ただのテキストコード」です。そのため、 Gitで管理したときに「どこが修正されたか」の差分（Diff）が綺麗に見えます。
導入手順
- VSCodeの左メニューから拡張機能マーケットプレイスを開く。
- Mermaid Graphical Editorを検索する。
- 「インストール」ボタンをクリックする。
これだけです。簡単ですね！
注意点
昔の記事でよく推奨されていた Markdown Preview Mermaid Support という拡張機能は、本体への統合に伴い現在は非推奨（Deprecated）となっています。
もし昔入れたまま残っている場合は、表示競合を防ぐために無効化するかアンインストールしておいてください。
Mermaid Graphical Editorで何が作れる？
この拡張機能は、ER図やフローチャートだけでなく、開発現場でよく使う主要なUMLダイアグラムのGUI編集に幅広く対応しています。
- フローチャート (flowchart)
業務フローや処理ロジックの可視化。
- ER図 (erDiagram)
データベースのテーブル設計。
- シーケンス図 (sequenceDiagram)
システム間のメッセージのやりとり。ライフライン（登場人物）の配置や矢印の接続をポチポチ操作で行えます。
- クラス図 (classDiagram)
オブジェクト指向のクラス設計。クラスの箱を配置し、メソッドやプロパティを視覚的に追加・編集できます。
- ステート図（状態遷移図） (stateDiagram-v2)
「起動中」「停止中」といったシステムの状態を配置し、どのような条件で状態が移り変わるかを視覚的に繋いで作成できます。
ところでMermaid（マーメイド）記法とは
テキストから図を作るツール
マウスを使わず、コードやMarkdown風のテキストを書くだけで図やグラフを自動生成するJavaScriptライブラリです。
主な用途
フローチャート、シーケンス図、ガントチャート、ER図などの作成に使われます。
メリット
テキストベースなのでGitなどでバージョン管理や差分比較が簡単にできます。
https://mermaid.ai/products/code
Markdown（マークダウン）でMermaidを活用すると、ドキュメント内に直接コードを書くだけで自動的に図を表示できるようになります。
【実践】GUIで図を作ってみよう！
Markdownファイル（.md）を作成し、コードブロック内にMermaidの記述を始めてみましょう。
1. ER図 (erDiagram) の作成例
まずはデータベース設計でお馴染みのER図です。ユーザー、注文、商品テーブルの関係性を描いてみます。
Markdownに以下のコードを貼り付け、エディタ上部に表示される「MermaidEditor」を押すと、GUI画面が開きます。
```mermaid
erDiagram
USER ||--o{ ORDER : "places"
ORDER ||--|{ ORDER_ITEM : "contains"
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
datetime ordered_at
}
PRODUCT {
int id PK
string name
int price
}
ORDER_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
}
```
※ リレーションシップ（1対多など）を結ぶ際、テキストだと ||--o{ や }|--|| といった特殊な記号の向きに迷いがちです。
しかし、GUIなら「要素から要素へ線をドラッグ＆ドロップし、プロパティからリレーションの種類を選ぶだけ」で、正しい記号をGUIが自動でコード化してくれます。
2. フローチャート (flowchart LR) の作成例
次に、処理の流れを表すフローチャートです。ここでは左から右へ流れるレイアウト（LR）で、条件分岐のあるフローを作成します。
```mermaid
flowchart LR
A([スタート]) --> B{ログインしている？}
B -- Yes --> C[マイページを表示]
B -- No --> D[ログイン画面へリダイレクト]
C --> E([エンド])
D --> E
```
※ 「新しい処理を追加したい」と思ったら、ツールバーから四角やひし形のノードを選択してキャンバスに配置するだけ。
ノードから伸びる矢印をドラッグ＆ドロップで次のノードへ繋げば、自動的に --> や -- Yes --> といったルーティングのコードが生成されます。
GUIが未対応の複雑な構文はどうするの？
Mermaid Graphical Editorは非常に強力ですが、フローチャート内の subgraph（グループ化）や、一部の特殊なレイアウト構文にはまだGUI操作が対応していない場合があります。
ですが、このツールの真の強みは「テキストとGUIの双方向同期」です。
- 基本的な箱の配置や矢印の接続は GUIでサクッと直感的に作成
- 細かいレイアウトの調整や未対応の構文は テキストコード側で直接追記
といういいとこ取りのハイブリッドな使い方ができるため、記述のハードルが圧倒的に下がりますよ。
まとめ
VSCodeと「Mermaid Graphical Editor」の組み合わせは、まさにMarkdownドキュメンテーションの完成形と言えます。
- 画像書き出しの手間から解放される
- Gitで図の変更履歴もテキスト管理できる
- なにより、直感的にマウスで描ける
「Mermaidは便利そうだけどコードを書くのが大変そう…」と敬遠していた方にこそ、ぜひ試してほしい拡張機能です。
一度体験すると、もうテキストだけでMermaidを書くのには戻れなくなりますよ！
さらに、すべてがテキストベースのMarkdown形式で完結するため、「ChatGPTなどのAIにベースのコードを生成させ、細かい調整をGUIで行う」といったAIを活用したワークフローとの親和性が高いのも魅力的なポイントです！
（これが一番いいところかも？！）
baserCMSやWebサイト構築のご相談など
お気軽にお問い合わせください
