本文へスキップ
DevToolKits.app
構成図可視化

インフラ構成図ビルダー

GUI操作だけでシステム構成図やネットワーク図を作成。Mermaid形式のコードと画像を即座に生成します。

ガイド: 使い方と特徴

  • 「ノードを追加」ボタンで要素を作成し、ラベルや形状（長方形、角丸、円筒など）を設定します。
  • 「接続を追加」ボタンで要素間のリレーションシップを定義します。開始ノードと終了ノードをプルダウンから選択できます。
  • 「配置方向」セクションから、図の流れ（上から下、左から右など）を切り替え可能です。
  • 「画像として保存」ボタンで、作成した構成図をPNG画像としてダウンロードできます。
  • 「Mermaidをコピー」ボタンで、設計した構成図のコードをクリップボードにコピーし、ドキュメント等に貼り付け可能です。

サンプル: 構成図の例

標準的なWeb 3層構成

入力例

Nodes: Internet, Load Balancer, App Server, DB
Connections: Internet -> LB -> App -> DB

出力例

graph TB
    n1["Internet"]
    n2(["Load Balancer"])
    n3["App Server"]
    n4[("Database")]
    n1 --> n2
    n2 --> n3
    n3 --> n4

FAQ: よくある質問

  • 作成した図は保存できますか？

    「画像として保存」ボタンからPNG形式でダウンロード可能です。また、Mermaidコードをコピーして保存しておくことで、後から再編集することもできます。

  • クラウド固有のアイコン（AWS/GCPなど）は使えますか？

    現在は汎用的な形状のみに対応しています。アイコン対応については今後のアップデートで検討中です。

  • ノードをドラッグして配置を変えられますか？

    Mermaidの自動レイアウトエンジンを使用しているため、手動でのドラッグ＆ドロップには対応していません。配置方向の切り替えで調整してください。

使いどころ: 主な使い道

  • システム構成図のクイック作成

    小規模な個人プロジェクトから商用システムの概略構成図まで、素早く可視化して共有できます。

  • ドキュメント（README等）の図解

    GitHubのREADMEや社内Wikiに貼り付けるための構成図コードを数分で作成できます。

  • ネットワーク設計のイメージ共有

    サブネットやゲートウェイなどの依存関係を視覚化し、チーム内での認識合わせに活用できます。

注意点: 利用上の注意

  • データの永続化について

    ブラウザをリロードすると編集内容が消えるため、必要な場合はMermaidコードをコピーして保存してください。

  • レイアウトの制約

    Mermaidの自動配置を使用しているため、要素をミリ単位で自由に配置することはできません。

  • ブラウザの負荷

    ノード数が極端に多い場合、描画処理によりブラウザの動作が重くなる場合があります。

ノード設定

接続設定

graph TB Users["Users"] LB["Load Balancer"] App1["App Server 1"] App2["App Server 2"] DB[("Database")] Users --> LB LB --> App1 LB --> App2 App1 --> DB App2 --> DB

インフラ構成図ビルダーについて

システムのインフラストラクチャー構成を、Mermaid.jsを用いて視覚的な図へと自動変換・描画するオンラインツールです。
クラウドサービス（AWS、GCP、Azure）やオンプレミス環境のサーバー構成、ネットワークトポロジをコード形式（Infrastructure as Codeの可視化に近い形）で管理し、それを瞬時に図として共有することができます。

特徴と主な用途

  • 設計の迅速な共有: エディタに専用の構成記法を入力するだけで、リアルタイムでアーキテクチャ図が生成されます。
  • ドキュメントとの相性: 生成された図は画像（PNG）としてダウンロードできるほか、Mermaidコードとしてコピーし、GitHubやNotion、Zennなどの主要なMarkdownエディタにそのまま貼り付けることが可能です。
  • セキュアなブラウザ処理: クラウドの構成情報という非常に機密性の高いメタデータを扱うため、本ツールはサーバーへ情報を送信せず、ブラウザ内のみで完全に処理を完結させています。

設計レビューで確認しやすいポイント

インフラ構成図は「見た目がきれい」なだけではなく、レビュー時に認識のずれを減らせることが重要です。このツールでは、ロードバランサー、アプリケーションサーバー、データベース、キュー、外部APIなどの関係をテキストで管理できるため、Pull Requestや設計メモの差分として追いやすくなります。
初期設計では大まかなサービス分割を図にし、運用段階では監視対象、障害時の影響範囲、通信方向の確認に使うと効果的です。クラウド移行やマイクロサービス化の検討でも、現状構成と移行後構成を並べて比較しやすくなります。

入力時のコツ

最初から細かいリソース名をすべて書くより、まずはユーザー、公開エンドポイント、アプリケーション層、データ層、外部サービスの5つ程度に分けて描くと読みやすい図になります。レビュー用の図では、VPC、サブネット、リージョン、可用性ゾーンなどの境界を明示すると、セキュリティグループやネットワークACLの確認にも役立ちます。

おすすめリソース

このセクションにはアフィリエイトリンクが含まれる場合があります。リンク経由で購入すると、追加費用なしでDevToolKits.appが紹介料を受け取ることがあります。

広告サイト用の独自ドメインを取得するならお名前.com個人開発、技術ブログ、ポートフォリオ、サービス公開用のドメインを探したい場合に使える国内大手のドメイン取得サービスです。お名前.comを見てみる広告アフィリエイトを始めるならA8.net無料で登録できる日本最大級のアフィリエイトサービスです。サイト運営やブログ収益化を試したい場合に使えます。A8.netを見てみる

このツールの関連記事

ツール紹介
2026-02-25

インフラ構成図をブラウザで作成する方法｜Mermaid対応

サーバー、DB、ネットワークの構成をGUIで整理し、Mermaidコードや画像として出力する方法を解説します。

最新記事

活用事例
2026-08-07

curlコマンドのオプション早見表｜-X -H -d の意味と落とし穴

curlの主要オプションを早見表で整理。-X と -d の関係、-d と --data-raw の違い、@ で始まる値がファイル読み込みになる罠、シングルクォートとダブルクォートの使い分け、-L や -k を安易に付けない理由まで実例で解説します。

ツール紹介
2026-08-06

JSON SchemaとZodを相互変換する仕組み｜requiredと.optional()の対応

JSON SchemaからZodスキーマを生成し、Zodのコードから逆にJSON Schemaを書き出す双方向変換ツールの実装を解説。requiredと.optional()で既定値が逆転している問題、formatや制約の対応表、コードを実行せずに解析する方法まで整理します。

活用事例
2026-08-06

SQLの句の評価順リファレンス｜WHEREでSELECTの別名が使えない理由

SQLは書いた順に実行されません。論理的な評価順（FROM→WHERE→GROUP BY→HAVING→SELECT→ORDER BY→LIMIT）を軸に、別名がWHEREで使えない理由、WHEREとHAVINGの使い分け、ONLY_FULL_GROUP_BY、COUNT(*)とCOUNT(列)の差、LEFT JOIN+WHEREの罠を実例で整理します。

活用事例
2026-08-06

unified diff形式の読み方リファレンス｜@@ の数字とgit diffの出力

git diffが出力するunified diff形式の読み方を整理。@@ -12,7 +12,9 @@ の4つの数字の意味、コンテキスト行、空白だけの変更が行全体の置換に見える理由、\ No newline at end of file、マージ時の @@@、リネーム検出の similarity index までを実例で解説します。

活用事例
2026-08-06

UTC⇄JST変換リファレンス｜時差9時間の早見表とタイムゾーン事故の防ぎ方

UTCとJSTの変換を早見表で整理。ISO 8601のZと+09:00の意味、JavaScriptの日付パースでズレる条件、MySQL/PostgreSQLのタイムゾーン挙動、GitHub ActionsのcronがUTCで動く罠まで実例付きで解説します。

活用事例
2026-08-04

CREATE TABLE リファレンス｜MySQL・PostgreSQL・SQLiteの型と制約の違い

CREATE TABLE文（DDL）の書き方を3データベース横断の早見表で整理。型対応表、自動採番（AUTO_INCREMENT / IDENTITY / rowid）の方言差、外部キーのON DELETE挙動、CHECK制約が無視される罠まで実例付きで解説します。

広告

よく使うツールへすぐ移動できます。

記事
1
記事一覧
AI・LLM
3
AI Rules ジェネレーター LLM トークンカウンター LLM APIコスト計算機
開発・DevOps
9
GitHub Actions 可視化 SQL フォーマッター Visual SQL Builder DDLビルダー SQL から ER 図 cURL コマンド変換 chmod 計算機 Cron エディタ・解析 インフラ構成図ビルダー
データ変換・スキーマ
6
JSON フォーマッター JSON から TypeScript JSON から Zod JSON から OpenAPI JSON と YAML 変換 CSV と JSON 変換
セキュリティ・証跡
5
Base64 / 58 / 32 JWT デバッガー ハッシュ・HMAC 生成 JWKS ジェネレーター UUID 生成
テキスト・コード補助
5
Markdown 表ジェネレーター テキスト・コード補助 正規表現テスター 差分ビューア Case Converter
URL・QR・ネットワーク
5
URL エンコード・デコード IP/CIDR 計算機 URL パラメータから JSON QR コード生成 QR コード読み取り
デザイン・UI
2
カラー変換・コントラスト Favicon 生成
日付・時刻
3
タイムゾーン変換 時間単位変換 UNIX タイムスタンプ変換

広告