# システム構成図メーカー

URL: https://discuvr.org/system-diagram/?hl=ja
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

A -> B と書くだけで構成図やフロー図を作成。自動レイアウト、折りたためるグループ、番号付きステップ、PNG・SVG書き出し。

ホワイトボードツールでは、箱も矢印もすべて自分で描いて手で揃えます。ここでは何が何とやり取りするかを矢印1本につき1行で書くだけで、配置は自動です。関連するサービスをグループにまとめ、全体像を見たいときは1つの箱に畳み、詳細を見たいときに開きます。

## 機能

- 入力に合わせて更新される自動レイアウト。左から右、または上から下。
- 名前から形を推測: DB はデータベース、Kafka はキュー、User は人、? で終わる名前は分岐。
- 1つの箱に畳めるグループで、1枚の図が全体像と詳細の両方に使えます。
- キャンバス上でも箱の移動、接続、名前の変更、追加ができ、変更はすべてテキストに書き戻されます。
- ステップ番号、手描き風スタイル、PNG・SVG書き出し、共有リンク。何もアップロードされません。

## 仕組み

1. User -> Web App -> Orders DB のような行を書くか、テンプレートから始めます。
2. 名前 { ... } でグループ、コロンの後にラベル、非同期呼び出しには --> を使います。
3. 概要と詳細を切り替え、ドラッグで箱を整え、書き出すかリンクをコピーします。

## 質問

**Excalidraw との違いは?**

Excalidraw は自由なホワイトボードで、形も矢印もすべて自分で置きます。ここではテキストがそのまま図になり、配置は自動なので、サービスの追加は箱を描いて揃え直すのではなく1行で済みます。気軽なスケッチなら Excalidraw のほうが向いています。

**全体像と詳細の両方を見せるには?**

関連する箱を 名前 { ... } でグループにします。概要は各グループを1つの箱に畳んで矢印をまとめ、詳細で再び開きます。見出しから1グループずつ畳むこともできます。

**図はどこかに保存されますか?**

いいえ。図はブラウザ内で描かれ、ブラウザのローカルストレージに保存されます。共有リンクは図をリンク自体の # 以降に含めており、この部分はブラウザがサーバーへ送ることはありません。

**Mermaid のフローチャートを貼り付けられますか?**

そのままでは使えません。Mermaid の読み込み機能はありません。A -> B のような単純な行はそのまま使えますが、違いが3つあります。graph TD の見出し行は箱になってしまうので削除し、代わりに direction: down と書きます。角かっこ内の Mermaid のラベルは外してください。ここでは [ ] 内の文字は形と色のタグとして読まれます。また、ここでの --> は非同期呼び出しを表す破線の矢印で、Mermaid では普通の矢印です。実線には -> を使います。

**A -> B 以外に何を書けますか?**

A -> B: 文字 で矢印にラベルを付け、A --> B は破線の矢印、A <-> B は双方向の矢印、A <- B は逆向きになります。名前 [db, blue] で形と色を指定します。形は service、db、cache、queue、actor、client、storage、external、decision、terminal、note です。title: で図に名前を付け、direction: down で上から下に配置し、# または // で始まる行はコメントです。1つの図に箱は300個、矢印は600本、テキストは20,000文字まで入ります。

**グループを折りたたむと矢印はどうなりますか?**

折りたたんだグループ内のボックス同士をつなぐ矢印は非表示になり、グループの境界をまたぐ矢印はグループのボックスから出る、またはグループのボックスに入る形になります。同じ2つのボックス間の複数の矢印は1本の太い矢印にまとめられ、最初のラベルを残して本数が付きます。例: Payments API と Ledger が Payments { ... } の中にある場合、Checkout -> Payments API と Checkout -> Ledger の2行は、概要表示で1本の矢印 Checkout -> Payments x2 になります。折りたたんだグループの中のグループも一緒に折りたたまれ、ステップをオンにすると、番号はまだ見えている矢印に書いた順で振られます。

## 開発者ツールのその他のツール

- [JSON フォーマッター](https://discuvr.org/json-formatter/?hl=ja)
- [Python Formatter](https://discuvr.org/python-formatter/?hl=ja)
- [HTML ビューア](https://discuvr.org/html-viewer/?hl=ja)
- [IPサブネット計算機](https://discuvr.org/ip-subnet-calculator/?hl=ja)

## よく一緒に使われるツール

- [テキスト比較](https://discuvr.org/text-diff/?hl=ja)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.