インフラ構成図ビルダーのイメージ

あの日の「えっ」という絶望感

「このAPIサーバー、もう1台RabbitMQ挟んでませんでしたっけ？」

ある日のミーティング中、後輩から指摘されたときの血の気が引く感覚、エンジニアの皆さんなら分かってくれるのではないでしょうか。
慌てて社内Wikiを確認すると、そこにポツンと貼られていたインフラ構成図の画像ファイル。その更新日時は、なんと半年前でした。

インフラ構成って、一度決めても日々の開発でちょっとずつ変わっていくんですよね。「負荷高いからRedis追加しようぜ」とか「IP制限の都合でリバースプロキシ置こう」とか。
でも、そのたびに重いGUIツールを立ち上げて、四角いアイコンをズラして、チマチマと矢印を引き直して、画像をエクスポートしてWikiにアップロードする……。正直、めんどくさすぎませんか？ 誰だって「あとで更新しよう（そして永遠にやらない）」って思っちゃいます。

「Diagram as Code」への憧れと挫折

この「一生更新されない構成図問題」をぶっ壊すには、やっぱりコードベースで図を管理する（Diagram as Code）しかない！と目をつけたのが Mermaid.js です。
テキストを書くだけでポンッと図が出てくるなんて、エンジニアにとっては夢のようなツールですよね。

ただ、いざ導入してみると、クラウドのアーキテクチャ図みたいな複雑なグラフ（AWSのVPCの中にEC2があって〜みたいなネスト）を書こうとすると、記号やインデントのルールが意外とややこしくて……。コードレビューを待ってから図の崩れに気づく、なんてこともザラにありました。

ブラウザで「書きながら見る」快適さを求めて

「もっとこう、テキストをカタカタ打ってる最中に、横の画面でリアルタイムに構成図がヌルヌル組み上がっていくプレビュー環境が欲しい！」

そんな僕のワガママから生まれたのが、この「インフラ構成図ビルダー」です。

一番こだわったのは「完全にローカルのブラウザだけで動かす」こと。企業の大事なインフラ構成という超機密情報を、どこの馬の骨ともわからない外部サーバー（つまり僕のサーバーです）に送信するなんて怖くてできないですよね。だから、入力データは一切ネットに送信されず、手元のPC内で完結して描画される設計にしました。

構成図のメンテが億劫になっている方は、ぜひこのツールで適当にカタカタやってみてください。「あっ、今インフラ作ってる！」っていう謎の万能感が味わえるはずです（笑）。