インフラ構成図メーカー
GUI操作だけでシステム構成図やネットワーク図を作成。Mermaid形式のコードと画像を即座に生成します。
ノード設定
接続設定
インフラ構成図ビルダーについて
システムのインフラストラクチャー構成を、Mermaid.jsを用いて視覚的な図へと自動変換・描画するオンラインツールです。
クラウドサービス(AWS、GCP、Azure)やオンプレミス環境のサーバー構成、ネットワークトポロジをコード形式(Infrastructure as Codeの可視化に近い形)で管理し、それを瞬時に図として共有することができます。
特徴と主な用途
- 設計の迅速な共有: エディタに専用の構成記法を入力するだけで、リアルタイムでアーキテクチャ図が生成されます。
- ドキュメントとの相性: 生成された図は画像(PNG)としてダウンロードできるほか、Mermaidコードとしてコピーし、GitHubやNotion、Zennなどの主要なMarkdownエディタにそのまま貼り付けることが可能です。
- セキュアなブラウザ処理: クラウドの構成情報という非常に機密性の高いメタデータを扱うため、本ツールはサーバーへ情報を送信せず、ブラウザ内のみで完全に処理を完結させています。
設計レビューで確認しやすいポイント
インフラ構成図は「見た目がきれい」なだけではなく、レビュー時に認識のずれを減らせることが重要です。このツールでは、ロードバランサー、アプリケーションサーバー、データベース、キュー、外部APIなどの関係をテキストで管理できるため、Pull Requestや設計メモの差分として追いやすくなります。
初期設計では大まかなサービス分割を図にし、運用段階では監視対象、障害時の影響範囲、通信方向の確認に使うと効果的です。クラウド移行やマイクロサービス化の検討でも、現状構成と移行後構成を並べて比較しやすくなります。
入力時のコツ
最初から細かいリソース名をすべて書くより、まずはユーザー、公開エンドポイント、アプリケーション層、データ層、外部サービスの5つ程度に分けて描くと読みやすい図になります。レビュー用の図では、VPC、サブネット、リージョン、可用性ゾーンなどの境界を明示すると、セキュリティグループやネットワークACLの確認にも役立ちます。
このツールの関連記事
インフラ構成図をブラウザで作成する方法|Mermaid対応
サーバー、DB、ネットワークの構成をGUIで整理し、Mermaidコードや画像として出力する方法を解説します。
Mermaidでインフラ構成図を作るときに詰まりやすいポイント
ブラウザ上でMermaidのインフラ構成図を作るときに、ノード名、接続線、粒度をどう整理するかをまとめた活用事例です。
SQL DDLからMermaidのER図を作ってテーブル関係を確認する方法
CREATE TABLE文からER図を生成し、外部キー、関連テーブル、設計レビューの見落としを減らす活用事例です。
最新記事
SQLフォーマッターでレビュー前にクエリを読みやすくする実務フロー
長いSQLをレビュー前に整形し、JOIN、WHERE、GROUP BYの意図を確認しやすくする活用事例です。
GitHub Actionsのneeds依存をMermaidで可視化して読む方法
GitHub Actionsの複雑なworkflow YAMLを、needs依存とジョブ順序に分けて確認する活用事例です。
Mermaidでインフラ構成図を作るときに詰まりやすいポイント
ブラウザ上でMermaidのインフラ構成図を作るときに、ノード名、接続線、粒度をどう整理するかをまとめた活用事例です。
SQL DDLからMermaidのER図を作ってテーブル関係を確認する方法
CREATE TABLE文からER図を生成し、外部キー、関連テーブル、設計レビューの見落としを減らす活用事例です。
Visual SQL BuilderでJOINを迷わず組むためのUI設計メモ
SQL BuilderでSELECT、JOIN、WHEREを視覚的に組み立てるときに、どこで迷いやすいかを整理した活用事例です。
CSVとJSONを相互変換してデータ確認を楽にする活用事例
管理画面、API、スプレッドシートの間でCSVとJSONを変換し、データ確認やレビューを短くする流れを紹介します。