Mermaidは、テキストで書くだけでフローチャートやシーケンス図などが作れる便利な記法ですが、「矢印の書き方を忘れた」「インデントを間違えて構文エラーになる」といった経験がある方も多いのではないでしょうか。
Mermaid GUI Studio は、そんなMermaid記法をフォーム入力だけで組み立てられるツールです。ブラウザだけで完結し、外部サーバーへの通信は一切行いません。この記事では、基本操作から各図の作り方、今回追加されたsubgraph（グループ化）機能やカラーパレットまで、一通りの使い方を紹介します。
画面の基本構成
画面は大きく3つのエリアに分かれています。
- 左側パネル（ビルダー）: 選択した図の種類に応じたフォームが表示されます。ノードやエッジなどをここで追加・編集します。
- 右側上部（プレビュー）: 入力内容がリアルタイムでMermaid図として描画されます。
- 右側下部（コードドロワー）: 生成されたMermaidコードが表示されます。折りたたみ可能で、チェックボックスをオンにすると直接編集もできます。
上部のヘッダーには、図の種類・テーマの切り替えと、コピー/保存系のボタンが並んでいます。ウィンドウ幅が狭い場合は、ヘッダー中央の「△」ボタンでツールバーを折りたたむことができます。
対応している図の種類
「図の種類」のプルダウンから、以下の7種類を切り替えられます。
- フローチャート（flowchart）
- シーケンス図（sequenceDiagram）
- クラス図（classDiagram）
- 状態遷移図（stateDiagram-v2）
- ER図（erDiagram）
- ガントチャート（gantt）
- 円グラフ（pie）
図の種類を切り替えると、ビルダーパネルの内容もそれに応じて切り替わります。
フローチャートの作り方
フローチャートビルダーでは、以下の3ステップで図を組み立てます。
1. 方向を決める
上から下（TD）、左から右（LR）、下から上（BT）、右から左（RL）の4方向から選べます。
2. ノードを追加する
- ID: 空欄の場合は自動採番されます（N1, N2...）
- 形状: 四角形・角丸・スタジアム・サブルーチン・円柱（DB）・円・ひし形（分岐）・六角形・平行四辺形の9種類
- 所属グループ: 後述するsubgraphに所属させる場合はここで選択
- ラベル文字: ノードに表示するテキスト
- 色を指定する: チェックを入れると塗りつぶし・枠線の色を指定可能
3. エッジ（矢印）を追加する
- from / to: 接続元・接続先のノード（またはサブグループ）
- 矢印種別: 実線矢印、実線（矢印なし）、点線矢印、太線矢印、丸終端、×終端の6種類
- ラベル: 矢印上に表示する文字（例: 「Yes」「No」）
- 線の色を指定する: エッジごとに線の色を変更可能
追加したノード・エッジは一覧に表示され、✎ボタンで編集、×ボタンで削除できます。
サブグループ（subgraph）でノードをグループ化する
複数のノードを「枠」でくくって視覚的にグループ化したいとき（例: フロントエンド/バックエンドで処理を分けて見せたいときなど）は、サブグループ機能を使います。
- 「サブグループ (subgraph) を追加」カードで、IDとラベルを入力して追加
- 「ノードを追加」カードの「所属グループ」で、作成したサブグループを選択してノードを追加
これだけで、以下のようなコードが自動生成されます。
flowchart TD
subgraph GroupA[グループA]
Start([開始])
end
Check{条件を確認}
End([終了])
Start --> Check
Check -->|Yes| End
ポイント:
- サブグループ自体を矢印の起点・終点にすることもできます。エッジ追加フォームのFROM/TOには「サブグループ」というグループ名で選択肢が表示されるので、そこから選ぶだけでOKです（例:
GroupA --> End）。 - サブグループにも塗りつぶし・枠線の色を指定できます。
- サブグループを削除しても、中に入っていたノード自体は削除されず、通常のノードに戻ります（グループ解除）。IDを変更した場合も、所属しているノードの参照は自動的に追従します。
色の設定とカラーパレット
ノード・エッジ・サブグループの色を指定する箇所には、すべて共通のカラー選択UIが用意されています。
- 標準の
<input type="color">によるカラーピッカーで、自由に色を選べます - その下に、ワンクリックで選べるプリセットパレットが並んでいます
プリセットパレットは、選択中のテーマ（Default/Neutral/Dark/Forest）に応じて自動的に切り替わります。例えばDarkテーマを選んでいるときは、暗い背景に埋もれない濃いめの色味のパレットが表示されます。
さらに、パレットの一番最後（右下）の1色は固定色ではなく、そのテーマが実際にノードへ標準で使っている色（既定色） になっています。塗りつぶし用のパレットではテーマの既定の塗り色、枠線用のパレットでは既定の枠線色、エッジの線色用のパレットでは既定の線色が、それぞれ表示されます。「カスタム色にしたけれど、やっぱりテーマ標準の色に戻したい」というときに便利です。
シーケンス図の作り方
- 「参加者を追加」で、登場人物（ID・表示名）を追加
- 「メッセージを追加」で、from・to・矢印種別・メッセージ内容を指定して追加
矢印種別は、実線矢印・点線矢印・実線（線のみ）・点線（線のみ）・実線×終端（失敗を表す）の5種類から選べます。
作成例
sequenceDiagram
participant user as ユーザー
participant system as システム
user->>system: リクエスト送信
system->>user: レスポンス送信
クラス図の作り方
- 「クラスを追加」で、クラス名と、任意で属性・メソッドを1行に1つずつ入力（例:
+String name、+makeSound()） - 「関係を追加」で、クラス同士の関係を追加
関係の種類は、継承・コンポジション・集約・関連・リンク（実線/破線）・依存・実現の8種類に対応しています。
作成例
classDiagram
class Instrument {
+String name
+makeSound()
}
class Guitar
Instrument <|-- Guitar
状態遷移図の作り方
- 「状態を追加」で、状態のID・表示名・（任意で）色を指定
- 「遷移を追加」で、状態間の遷移とラベルを追加
from/toの選択肢には「開始/終了 [*]」も含まれているため、開始状態や終了状態への遷移もフォームだけで表現できます。状態・遷移ともに、フローチャートと同じ色指定UI（プリセットパレット付き）に対応しています。
作成例
stateDiagram-v2
state "開始" as begin
state "設計" as design
state "実装" as programming
state "テスト" as test
state "完成" as finish
begin --> design
design --> programming
programming --> test
test --> finish
test --> programming : fix
classDef beginStyle fill:#ececff,stroke:#16304f,stroke-width:2px
class begin beginStyle
classDef designStyle fill:#ffe082,stroke:#16304f,stroke-width:2px
class design designStyle
classDef programmingStyle fill:#ffe082,stroke:#16304f,stroke-width:2px
class programming programmingStyle
classDef testStyle fill:#ffe082,stroke:#16304f,stroke-width:2px
class test testStyle
classDef finishStyle fill:#ececff,stroke:#16304f,stroke-width:2px
class finish finishStyle
ER図の作り方
ER図は他の図よりも設定項目が多いですが、その分細かく作り込めます。
- プロジェクトのDB種類を選択（PostgreSQL / MySQL / SQL Server / Oracle / SQLite）。ここで選んだDBに応じて、属性の型の選択肢が切り替わります。
- エンティティを追加（例:
CUSTOMER）
- エンティティ一覧の「☰属性」ボタンから属性エディタを開き、カラム名・論理名（任意の日本語名など）・型・桁数・PK/FKフラグを1つずつ追加。属性は↑↓ボタンで並び替え可能です。
- リレーションを追加で、エンティティ同士の関係（1対1、1対多、多対多など6種類）とラベルを指定
作成例
erDiagram
CUSTOMER ||--o{ LOGIN : relates
CUSTOMER {
bigserial id PK "ID"
varchar(50) user_name "ユーザー名"
timestamp 登録日時 "registered_at"
}
LOGIN {
bigserial id PK "ID"
bigint user_id FK "ユーザーID"
timestamp login_at "ログイン日時"
timestamp logout_at "ログアウト日時"
}
ガントチャートの作り方
- タイトルを入力
- 「タスクを追加」で、タスク名・セクション・開始（日付指定 または 他タスクの完了後=after）・期間・状態（通常/進行中/完了/重要）を指定
「他タスクの完了後」を選ぶと、既存タスクの一覧から基準タスクを選べます。基準にしていたタスクを削除した場合は、自動的に日付指定に切り替わります。
作成例
gantt
title プロジェクト計画
dateFormat YYYY-MM-DD
section 要件定義
要件定義 :active, t1, 2026-07-07, 10ｄ
section 設計
基本設計 :t2, 2026-07-15, 20d
詳細設計 :t3, after t2, 15d
section 実装
サーバー実装 :t4, 2026-08-17, 15d
アプリ実装 :t5, 2026-08-20, 15d
section テスト
ユニットテスト :t6, 2026-08-31, 10d
結合テスト :t7, 2026-09-07, 7d
section リリース
リリース :t8, 2026-09-14, 1d
円グラフの作り方
- タイトルを入力
- 「項目を追加」で、ラベルと数値を指定
作成例
pie title 人口割合
"65歳以上" : 29.3
"15～64歳" : 59.6
"0～14歳" : 11.2
テーマの切り替え
ヘッダーの「テーマ」プルダウンから、Default・Neutral・Dark・Forestの4種類に切り替えられます。前述の通り、テーマを切り替えるとカラーパレットの内容も連動して変わります。
コードを直接編集する
コードドロワーの「コードを直接編集する」にチェックを入れると、生成されたMermaidコードを直接書き換えられるようになります。フォームには反映されませんが、複雑な調整をしたい上級者向けの逃げ道として使えます。チェックを外すと、フォームの内容から再生成されたコードに戻ります。
保存・書き出し機能
ヘッダーの各ボタンから、以下の形式で書き出せます。
| ボタン | 内容 |
|---|---|
| コードをコピー | Mermaidコードをそのままクリップボードにコピー |
| Markdownとしてコピー | ```mermaid で囲んだ形でコピー（GitHubやNotionなどにそのまま貼り付け可能） |
| .md 保存 | 上記と同じ内容をファイルとしてダウンロード |
| .svg 保存 | プレビュー中の図を画像（SVG）として保存 |
| .html 保存 | Mermaid.js本体を埋め込んだ単独HTMLとして保存（オフラインでも表示可能） |
| 🗂️ プロジェクト保存 | ノード・エッジ・色などGUIの全データをJSON化し、SHA-256のハッシュ値と一緒に.mdファイルへ埋め込んで保存 |
「🗂️ プロジェクト保存」で書き出したファイルは、このツールで再度開くとGUIの編集状態を完全に復元できます。それでいて中身は\``mermaid`ブロックを含む通常のMarkdownでもあるため、他のMermaid対応エディタでもそのまま使えます。
ファイルの読み込み
「📂 ファイルを開く」で選択したファイルの内容に応じて、自動的に次のいずれかの動作になります。
- 「🗂️ プロジェクト保存」で書き出したファイル → 埋め込まれたハッシュ値を検証し、一致すればGUIの編集状態を完全復元
- ハッシュが一致しない（手編集・改ざんの可能性）→ 安全のためコードのみを読み込み、警告を表示
- 通常の
.md（```mermaidブロックを自動検出）や.mmdなどの生コードファイル → コードのみを読み込み（「コードを直接編集する」が自動でONになります）
2・3のケースでは、コードは読み込めますが、GUIのフォーム（ノード一覧など）には反映されません。
Mermaid GUI Studioは、Mermaidの構文を覚えていなくても、フォームをポチポチ埋めるだけで図が完成する点が最大の魅力です。ぜひ触ってみてください。