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の確認にも役立ちます。

このツールの関連記事

最新記事

広告

広告