コードからシステム構成図を自動生成するツール
朝の出汁版(通勤2分)
- ポイント1: LikeC4はコードで書いたアーキテクチャ定義から、常に最新状態の構成図をリアルタイムで可視化・共有できるOSSとして公開されています。
- ポイント2: 図と実装がズレる「ドキュメント腐敗」を防ぐ仕組みが組み込まれており、AIでコードを書くほど構成が複雑になる今、把握コストを下げる手段として注目したいポイントです。
- ポイント3: 始めるならGitHubリポジトリのドキュメントからCLIをインストールし、自分のプロジェクトに`.likec4`ファイルを置くだけで図の自動生成を試せます。
出汁の素(深読みモード)
AIがコードを書くほど、構成図が嘘をつく問題
バイブコーディングが当たり前になってきた今、自分で書いたコードであっても「全体像の把握」が追いつかなくなってきている。APIの接続先、モジュール間の依存関係、外部サービスとの連携……AIに書かせるほどコードは増え、最初に引いた設計図は数週間で現実と乖離する。
この問題を指して「ドキュメント腐敗」と呼ぶ。手動で図を更新する文化が崩れ、Confluenceに残っているアーキテクチャ図がもはや参照されない、という状況は、規模を問わず起きている。
特に個人やスモールチームで動く「使い倒し型」の場合、ドキュメント管理に人手を割く余裕はない。気づいたら誰も全体像を把握していない、という状態が静かに発生する。AIがシェルを自律操作、開発の自動化が変わるでも触れたように、自動化が進むほど「人間がどこを見ればいいか」の整理が重要になってくる。
LikeC4が解こうとしていること
LikeC4(ライクC4)はGitHub上で4,200以上のスターを集めているOSSで、「コードで書いたアーキテクチャ定義から、常に最新の構成図を自動生成する」という設計思想で作られている。
仕組みとしてはシンプルだ。プロジェクト内に.likec4という専用の定義ファイルを置き、そこにシステムの要素(サービス、データストア、外部APIなど)と関係性をテキストで記述する。するとCLIがそれを読み取り、インタラクティブなシステム構成図をリアルタイムで描画・更新してくれる。
重要なのは、図がコードと同じリポジトリに存在するという点だ。コードを変えれば図も変わる。プルリクエストのレビューで構成の変化が視覚的に確認できる。「図と実装がズレる」という問題を、ワークフローの構造ごと解消しようとしている。
UIはWebベースのビューワーが付属しており、ローカルで立ち上げてブラウザから確認できる。チームで使うなら、図をそのまま静的HTMLとしてエクスポートして共有することも可能だ。公式ドキュメントによると、Mermaid等の汎用図形ツールとの最大の違いは「図が常にコードの現在地と同期している」点にある。
コードなしでできること、書けると有利なこと
LikeC4の定義ファイルは独自DSL(ドメイン固有言語)で書くが、構文はシンプルで、JSONやYAMLを書いたことがある人なら数分で読めるレベルだ。
コードなしでできることとして、まず既存プロジェクトの構成を手で定義ファイルに書き起こし、図として出力するという使い方がある。ドキュメント代わりに使うだけでも、散らばっていた情報を一箇所に集める効果がある。ビューワーで複数の「視点」(全体図・特定コンポーネントの詳細図など)を切り替えながら確認できるのも実用的なポイントだ。
コードが書けると有利なこととしては、CI/CDパイプラインに組み込むことが挙げられる。コードの変更がマージされるたびに図の更新を自動で走らせ、常に最新の構成図をどこかに発行し続ける運用が可能になる。また、AIにコードを書かせる際に.likec4ファイルも同時に更新させるようプロンプトで指示すれば、「AIが書いた設計の全体像」を人間が追いやすくなる。
AIコーディング中にWeb検索をローカルで完結させるのようにローカル環境を整えている人なら、LikeC4のCLIをそこに加えるだけでシームレスに組み込めるはずだ。
今すぐ試すための最初の3ステップ
始めるハードルは低い。公式ドキュメント(https://likec4.dev)とGitHubリポジトリ(https://github.com/likec4/likec4)がスタート地点だ。
ステップ1:CLIをインストールする
npmが使える環境ならnpm install -g @likec4/cli一行で入る。Node.js環境があれば追加の準備は不要だ。
ステップ2:定義ファイルを作る
既存プロジェクトのルートにarchitecture.likec4を作成し、まずは3〜5個の要素と関係性だけを書く。公式サイトにプレイグラウンド(ブラウザ上で試せるデモ環境)が用意されているので、手元の環境を汚さずに構文を確認できる。
ステップ3:ビューワーを立ち上げる
likec4 serveを実行するとローカルでWebサーバーが起動し、ブラウザから構成図を確認できる状態になる。ここまでの所要時間は、慣れていれば15分もかからない。
まず「今動いているプロジェクトのサービス間の依存関係」を5個だけ書いてみる、という使い方から始めると、ツールの価値を最も素直に確認できる。
AIとの組み合わせで化ける使い方
ここからは一歩踏み込んだ活用の話だ。
AIコーディングでよく起きる問題のひとつが、「ファイルが増えるたびに全体のどこに何があるか分からなくなる」ことだ。LikeC4の定義ファイルをシステムプロンプトに含める、あるいはコンテキストとして渡すことで、AIが「今の構成を理解した上でコードを書く」状態を作れる可能性がある。
具体的には、新機能を追加するとき「このアーキテクチャ定義(.likec4ファイルの内容)を読んだうえで、認証モジュールに手を加えるならどこを変えればいいか」と聞く形だ。268社のAIを1本のURLで使い回す無料ゲートウェイのようなマルチモデル環境を使っているなら、複数のモデルに同じアーキテクチャ定義を渡して回答を比較するという使い方も面白い。
LikeC4のDSLはテキストベースなので、「コードの変更に合わせて.likec4ファイルも更新してほしい」とAIに依頼する運用も無理なく成立する。構成が複雑になるほど、「図を最新に保つ作業」もAIに委ねられる余地が生まれてくる。
参照ソース
- [GitHub]chrislgarry/Apollo-11→ github.com/chrislgarry/Apollo-11
- [GitHub]likec4/likec4→ github.com/likec4/likec4
- [GitHub]schollz/croc→ github.com/schollz/croc
