インフラ構成図、メンテナンスできていますか？

「最新の構成図、どこにある？」

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

チームに新しく入ったメンバーにそう聞かれたとき、自信を持ってファイルを提示できる現場はどれくらいあるでしょうか。
多くのプロジェクトでは、初期設計時に作られた draw.io や PowerPoint の図が、更新されないまま放置されています。

理由は単純。**「修正するのが面倒だから」**です。
ブラウザでポチポチと線を繋ぎ直し、配置を整え、画像として書き出す。インフラが頻繁に変わる現代の開発において、そのコストはあまりにも高すぎます。

「コードを書くように」図を作りたい

私たちがコードを Git で管理するように、構成図もテキストベースで管理できれば、ドキュメントの鮮度は劇的に改善します。
そこで注目したいのが Mermaid.js です。

テキストで接続関係を定義するだけで、ブラウザが自動的に最適なレイアウトで図を描画してくれる。この「魔法」のような仕組みを使わない手はありません。

graph TD
    Internet["Internet"] --> LB["Load Balancer"]
    LB --> WebServer["Web Server"]
    WebServer --> DB[("Database")]

ツールに振り回されないための「ビジュアルエディタ」

とはいえ、Mermaid の構文をすべて暗記して手書きするのも、それはそれで大変です。
「インフラの構成を考えること」に集中したいのに、「Mermaid の文法エラー」で立ち止まりたくはありません。

当サイトの インフラ構成図ビルダー は、そんな「いいとこ取り」を狙って作りました。

直感的に組み立てる、スマートに書き出す

  1. ノードを置く: サーバーやDBなど、コンポーネントをUIから追加します。
  2. 線を繋ぐ: どのノードとどのノードが通信しているかを選ぶだけ。
  3. Mermaid をコピー: 出来上がった図は、そのままコードとしてコピーできます。

出力された Mermaid コードを GitHub の README や Notion に貼り付ければ、そこが「常に最新の構成図」になります。修正が必要になったら、コードを一行書き換えるだけ。この身軽さこそが、本当の「ドキュメンテーション」のあるべき姿だと考えています。

読みやすい構成図にするコツ

ノードと線を増やすほど図は複雑になります。次のポイントを意識すると、後から見返しても理解しやすい図になります。

  • レイヤーでグルーピングする: Mermaidの subgraph を使い、「ネットワーク層」「アプリ層」「データ層」やVPC/アベイラビリティゾーンごとにまとめると、責務の境界が見やすくなります。
  • 通信の向きをそろえる: 外部→ロードバランサー→アプリ→DB、のように上から下（または左から右）へ流れを統一すると、データの流れが直感的に追えます。
  • 凡例代わりにラベルを付ける: WebServer["Web Server (ECS)"] のように具体名を入れておくと、図だけで構成が伝わります。
graph TD
    subgraph Public
        Internet["Internet"] --> LB["Load Balancer"]
    end
    subgraph Private
        LB --> App["App Server"]
        App --> DB[("RDS")]
    end

最初から完璧な図を目指すより、まず主要な通信経路だけを描き、変更のたびにコードを更新していくほうが、結果的に「常に最新」の構成図を保てます。

まとめ

インフラ構成図は、一度作って終わりの「アート」ではありません。システムの成長に合わせて形を変え続ける「生き物」です。

「ポチポチ作業」を卒業して、もっと軽やかに、もっと正確に。
あなたの設計をテキストの力で可視化して、チームの共通認識を常にアップデートし続けましょう。

💡 ちょっと便利な活用術: GitHub で Pull Request を出す際に、インフラの変更に合わせて Mermaid コードも更新してみてください。コードレビューと一緒に構成の変更点もレビューできるようになり、ドキュメントの形骸化を防げますよ。

よくある質問

Mermaidの構成図はどこに貼り付けて使えますか？

GitHubのREADMEやIssue/PR、GitLab、Notionなど、Mermaidをサポートする多くのサービスでコードブロックとして貼り付けるとそのまま図として描画されます。画像と違ってテキストで管理できるため、Gitの差分に残り、変更履歴を追えるのが利点です。

draw.ioやPowerPointと比べた利点は？

draw.ioなどのGUIツールは見た目を細かく調整できますが、修正や再書き出しの手間がかかり、更新されず放置されがちです。Mermaidはテキストを1行書き換えるだけで図が更新され、Gitでバージョン管理できるため、構成変更に追従しやすく「常に最新」を保ちやすいのが利点です。

入力した構成情報は外部に送信されますか？

インフラ構成図ビルダーはブラウザ内で処理が完結し、入力した構成やMermaidコードをサーバーへ送信しません。社内システムの構成など機密性の高い情報でも安心して図示できます。

大きく複雑な構成図を見やすくするには？

Mermaidの subgraph を使ってネットワーク層・アプリ層・データ層やVPC/ゾーンごとにグループ化し、通信の向きを上から下（または左から右）にそろえると、責務の境界とデータの流れが追いやすくなります。最初からすべてを描き込むより、主要な経路だけを描いて変更のたびに更新していくほうが、図の鮮度を保ちやすくなります。