システム構成図メーカー
User -> API -> Database のように矢印を書くだけで、配置済みの構成図やフロー図ができます。グループを畳めば全体像、ステップに番号を付ければ詳細な流れに。
箱をドラッグで移動。ダブルクリックで名前の変更や箱の追加。箱の点をドラッグして接続。Ctrl+Z で元に戻す。
何もアップロードされません。図はブラウザ内と、共有するリンクの中にだけあります。
User -> API -> Database のように矢印を書くだけで、配置済みの構成図やフロー図ができます。グループを畳めば全体像、ステップに番号を付ければ詳細な流れに。
箱をドラッグで移動。ダブルクリックで名前の変更や箱の追加。箱の点をドラッグして接続。Ctrl+Z で元に戻す。
何もアップロードされません。図はブラウザ内と、共有するリンクの中にだけあります。
ホワイトボードツールでは、箱も矢印もすべて自分で描いて手で揃えます。ここでは何が何とやり取りするかを矢印1本につき1行で書くだけで、配置は自動です。関連するサービスをグループにまとめ、全体像を見たいときは1つの箱に畳み、詳細を見たいときに開きます。
Excalidraw は自由なホワイトボードで、形も矢印もすべて自分で置きます。ここではテキストがそのまま図になり、配置は自動なので、サービスの追加は箱を描いて揃え直すのではなく1行で済みます。気軽なスケッチなら Excalidraw のほうが向いています。
関連する箱を 名前 { ... } でグループにします。概要は各グループを1つの箱に畳んで矢印をまとめ、詳細で再び開きます。見出しから1グループずつ畳むこともできます。
いいえ。図はブラウザ内で描かれ、ブラウザのローカルストレージに保存されます。共有リンクは図をリンク自体の # 以降に含めており、この部分はブラウザがサーバーへ送ることはありません。
そのままでは使えません。Mermaid の読み込み機能はありません。A -> B のような単純な行はそのまま使えますが、違いが3つあります。graph TD の見出し行は箱になってしまうので削除し、代わりに direction: down と書きます。角かっこ内の Mermaid のラベルは外してください。ここでは [ ] 内の文字は形と色のタグとして読まれます。また、ここでの --> は非同期呼び出しを表す破線の矢印で、Mermaid では普通の矢印です。実線には -> を使います。
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文字まで入ります。