構成図が「ホワイトボードの写真」のままになっていませんか

アーキテクチャ構成図をブラウザで描く方法｜アイコン・グループ枠・PNG/SVG出力

設計の打ち合わせで描いたホワイトボードの写真が、そのまま「最新の構成図」として残っている。そんな現場は意外と多いものです。清書しようにも、draw.io で枠を引き、アイコンを探し、線の折れ曲がりを一本ずつ整えるのは地味に重い作業です。

Mermaid のようにテキストから自動レイアウトする方法は手軽ですが、「Cloudflare の中」「自社サーバーの中」「外部サービス」のように境界を枠で囲む、どこに何を置くか自分で決めるといった表現は得意ではありません。

そこで、アーキテクチャ構成図エディタを用意しました。アイコン付きのノードとグループ枠を自由に配置し、線は直角に自動でつなぐので、整った構成図がブラウザだけで描けます。

このエディタでできること

  • グループ枠: 実線・破線、7色、入れ子に対応。枠を動かすと中のノードも一緒に動きます
  • アイコン付きノード: 汎用の線画アイコン20種。名前の下に Nitro や PostgreSQL などの補足も書けます
  • 直角に自動接続する線: ラベル、破線、青色、出入りする辺の指定
  • 自分の画像: ロゴなどを画像として取り込めます（ブランドロゴは同梱していません）
  • 書き出し: PNG / SVG / JSON。元に戻す・やり直す、ブラウザ内の自動保存つき

入力した内容も画像も、ブラウザの外には送信されません。

描き方の手順

「利用者 → エッジ → アプリサーバー → 外部サービス」という典型的な構成を例にします。

  1. まずグループ枠を置く: 「エッジ」「アプリサーバー」「外部サービス」の3つの枠を作り、色を分けます。どこで動くものかが一目でわかる図の土台になります
  2. ノードを枠の中に置く: 枠を選んだ状態で「ノードを追加」すると、その枠の中に置かれます。名前と補足（技術名）を入れ、アイコンを選びます
  3. 線を引く: 「接続」を押して始点→終点の順にクリックします。選択中のノードを Shift+クリックでもつなげます
  4. ラベルで意味を足す: HTTPS や /api など、プロトコルやパスを線のラベルにします
  5. 書き出す: PNG で貼り付け用、SVG で拡大しても崩れない版、JSON で続きを編集する用に保存します

読みやすい構成図にするコツ

  • 流れは左から右（外から内）にそろえる: 利用者を左端に置き、エッジ、サーバー、外部サービスの順に並べると、通信の流れが自然に追えます
  • 線の色は「主役」だけ変える: 利用者からの主要な通信だけを青にすると、全体の骨格が浮かび上がります
  • 破線は「運用上の流れ」に使う: バックアップやデプロイなど、リクエストの本流ではない矢印は破線にして区別します
  • グループ枠は3〜4個まで: 枠が多すぎると、かえって境界が見えなくなります。細かい構成は別の図に分けましょう
  • 線が思いどおりに通らないときは、出入りの辺を指定する: 線は他のノードやグループ名を自動でよけますが、経路を自分で決めたいときは「始点の辺」「終点の辺」を上・下・左・右に指定します

図をコードのように管理する

「JSON で保存」したファイルをリポジトリに置いておけば、構成が変わったときに読み込んで直し、PR で差分を確認できます。テキストで差分を追いたい場合や、Mermaid が必要な場合はインフラ構成図ビルダーが向いています。配置やアイコンまでこだわりたいときはこのエディタ、と使い分けてください。

よくある質問

Mermaid の構成図と何が違いますか？

Mermaid は自動レイアウトで手軽ですが、ノードの位置・アイコン・入れ子の枠を細かく指定できません。このエディタは位置を自分で決める代わりに、境界の枠やアイコンを使った見た目の整った図を作れます。

AWS や Cloudflare のアイコンは使えますか？

ブランドのロゴは利用条件があるため同梱していません。汎用アイコンのほか、自分で用意した画像（512KBまで）をノードごとに取り込めます。ロゴを使うときは各社のガイドラインに従ってください。

作った図は他の人と共有できますか？

PNG / SVG で書き出して貼り付けるか、JSON で保存して渡せます。受け取った人は「JSON を読み込む」で同じ図を開いて編集できます。

入力した内容はサーバーに送られますか？

送られません。処理はすべてブラウザ内で完結し、図や取り込んだ画像も外部に出ません。自動保存もこのブラウザのローカル保存だけです。

まとめ

構成図は、描くのが面倒だと更新されず、古くなって誰も信じなくなります。アイコンと枠で「どこで何が動くか」を描き、線は自動で整える。この軽さがあれば、構成が変わったときに図を直すことも苦になりません。まずはツールを開いて、サンプルを書き換えるところから試してみてください。