アーキテクチャ構成図エディタ

サーバー・データベース・ユーザー・クラウドなどの汎用アイコンを20種類内蔵しています。各社のブランドロゴは利用条件があるため同梱していません。代わりにノードごとに自分のPNG / JPEG / GIF / WebP / SVG画像（512KBまで）を取り込めます。画像はブラウザの中だけで扱われ、サーバーには送信されません。

「接続」ボタンを押して始点→終点の順にノードをクリックするか、ノードを選んだ状態で別のノードを Shift+クリックします。線は直角だけで折れて自動でつながり、他のノードやグループ名は自動でよけます。出入りする辺（上・右・下・左）は下の「選択中の項目」で指定できるので、経路を自分で決めたいときに使ってください。

動きます。中心が枠の内側にあるノードと、枠に完全に収まっている別のグループが一緒に動きます。枠の右下の青い四角をドラッグすると大きさを変えられます。入れ子（Cloudflare の中に Workers の枠など）も作れます。

編集内容はこのブラウザのローカル保存に自動で保存されます（サーバーには送られません）。キャッシュを消すと失われるので、大事な図は「JSON で保存」しておくと後で読み込めます。書き出しは PNG / SVG / JSON です。Mermaid は自由配置やアイコンを表現できないため出力しません。Mermaid が必要なときは「インフラ構成図ビルダー」を使ってください。

サービス全体の構成（利用者・エッジ・サーバー・DB・外部サービス）を1枚にまとめ、SVG で書き出して README や Wiki に貼れます。

グループ枠で「どこで動くか」を色分けし、線に /api や HTTPS などのラベルを付けると、記事やスライドでそのまま説明に使える図になります。

ホワイトボードの代わりに、ノードを置いて線を引くだけで全体像を描けます。JSON で保存してチームに共有することもできます。

運用中のシステムや行事用のシステムなど、画面・API・DB・外部サービスが混ざった構成を、非エンジニアにも見せられる形にできます。

内蔵アイコンは汎用の線画です。ロゴを使うときは、各社の利用ガイドラインに従って、自分で画像を取り込んでください。画像は1枚512KBまでです。

編集内容はこのブラウザのローカル保存にだけ残ります。キャッシュの削除や別の端末では引き継がれないので、JSON で保存してください。

線は他のノードとグループ名をよけて引かれますが、他の線とは重なることがあります。ノードが密集して通り道が狭いと、遠回りになったり、よけきれずに素直な経路に戻ることもあります。思いどおりにならないときは、始点・終点の辺を指定するか、「線を他のノードからよける」をオフにしてください。