インフラ構成図、メンテナンスできていますか？
「最新の構成図、どこにある？」
チームに新しく入ったメンバーにそう聞かれたとき、自信を持ってファイルを提示できる現場はどれくらいあるでしょうか。
多くのプロジェクトでは、初期設計時に作られた draw.io や PowerPoint の図が、更新されないまま放置されています。
理由は単純。**「修正するのが面倒だから」**です。
ブラウザでポチポチと線を繋ぎ直し、配置を整え、画像として書き出す。インフラが頻繁に変わる現代の開発において、そのコストはあまりにも高すぎます。
「コードを書くように」図を作りたい
私たちがコードを Git で管理するように、構成図もテキストベースで管理できれば、ドキュメントの鮮度は劇的に改善します。
そこで注目したいのが Mermaid.js です。
テキストで接続関係を定義するだけで、ブラウザが自動的に最適なレイアウトで図を描画してくれる。この「魔法」のような仕組みを使わない手はありません。
graph TD
Internet["Internet"] --> LB["Load Balancer"]
LB --> WebServer["Web Server"]
WebServer --> DB[("Database")]ツールに振り回されないための「ビジュアルエディタ」
とはいえ、Mermaid の構文をすべて暗記して手書きするのも、それはそれで大変です。
「インフラの構成を考えること」に集中したいのに、「Mermaid の文法エラー」で立ち止まりたくはありません。
当サイトの インフラ構成図ビルダー は、そんな「いいとこ取り」を狙って作りました。
直感的に組み立てる、スマートに書き出す
- ノードを置く: サーバーやDBなど、コンポーネントをUIから追加します。
- 線を繋ぐ: どのノードとどのノードが通信しているかを選ぶだけ。
- Mermaid をコピー: 出来上がった図は、そのままコードとしてコピーできます。
出力された Mermaid コードを GitHub の README や Notion に貼り付ければ、そこが「常に最新の構成図」になります。修正が必要になったら、コードを一行書き換えるだけ。この身軽さこそが、本当の「ドキュメンテーション」のあるべき姿だと考えています。
まとめ
インフラ構成図は、一度作って終わりの「アート」ではありません。システムの成長に合わせて形を変え続ける「生き物」です。
「ポチポチ作業」を卒業して、もっと軽やかに、もっと正確に。
あなたの設計をテキストの力で可視化して、チームの共通認識を常にアップデートし続けましょう。
💡 ちょっと便利な活用術: GitHub で Pull Request を出す際に、インフラの変更に合わせて Mermaid コードも更新してみてください。コードレビューと一緒に構成の変更点もレビューできるようになり、ドキュメントの形骸化を防げますよ。