本文へスキップ
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が紹介料を受け取ることがあります。

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

このツールの関連記事

ツール紹介
2026-02-25

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

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

最新記事

ツール紹介
2026-08-03

テーブル設計からCREATE TABLE文を自動生成する仕組み｜DDLビルダー

テーブルをビジュアルに設計してCREATE TABLE文とER図を生成するDDLビルダーの実装を解説。MySQL/PostgreSQL/SQLiteの型変換ルール、JSONサンプルからのカラム推論アルゴリズムまで実例付きで整理します。

活用事例
2026-07-21

GitHub Actions needs設計パターン集｜CIを速くする依存関係の組み方とアンチパターン

GitHub Actionsのneedsによるジョブ依存関係を、高速化パターンとアンチパターンの一覧表で整理。concurrencyによる重複実行キャンセル、fail-fast、matrix×needsの組み合わせ、再利用可能ワークフローまで実例付きで解説します。

活用事例
2026-07-21

SQL JOIN完全リファレンス｜INNER・LEFT・RIGHT・FULLの違いと結果行数の考え方

SQLのJOIN種類（INNER/LEFT/RIGHT/FULL/CROSS/SELF）を早見表と結果行数の図解で整理。1対多JOINで行が重複する理由、WHERE句とON句でNULL判定が変わる罠、複数テーブルJOINの書き方まで実例付きで解説します。

ツール紹介
2026-07-16

Case Converter ― camelCase・snake_case・kebab-caseを9種類まとめて一括変換

識別子や変数名をcamelCase・PascalCase・snake_case・CONSTANT_CASE・kebab-caseなど9種類の命名規則へ同時変換する方法を解説。連続大文字（HTTPServer）や数字の扱い、複数行の一括変換まで。

ツール紹介
2026-07-16

LLM APIコスト計算機 ― Claude・GPT・Geminiの料金を同じ条件で見積もり比較

プロンプトを貼り付けて想定出力トークン数を入れるだけで、Claude・GPT・GeminiのAPI利用コストをモデル横断で見積もる方法を解説。入力/出力の単価構造、料金の自動更新、概算の限界まで。

活用事例
2026-07-14

MermaidのER図（erDiagram）記法リファレンス｜リレーション記号一覧と実例

Mermaid erDiagramの書き方を網羅解説。カラスの足記法の記号一覧表、1対多・多対多の書き分け、属性・PK/FKの定義、実務で使えるEC設計の完全サンプルまで。

広告

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

記事
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 タイムスタンプ変換

広告