ASADASHI
バイブコーディング
バイブコーディング2026.07.23·読了 2·難易度: ふつう

コードからシステム構成図を自動生成するツール

朝の出汁版(通勤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に委ねられる余地が生まれてくる。

参照ソース