システム構成図、もう手で描くのやめました ── Claude Codeで構成図を自動生成・自動更新する仕組み - ZOZO TECH BLOG
- 構造情報と規約情報を中間ファイルに分離してから図を生成する。structure.yaml(ノード・エッジの関係)と conventions.md(表記ルール)を用意し、生成の根拠を明確化する。
- structure-spec.mdでstructure.yamlの書式を定義し、捏造禁止・id一意などのルールを固定する。
- レンダラ(描画ツール)に依存しない設計にする。D2(テキストで書く図言語)で自動レイアウトを使い、必要ならdraw.io等に差し替え可能にする。
- Claude Code Skillsで/create-diagramを用意。コード読解→structure.yaml生成→規約反映→D2出力→PNG化までをワークフロー化する。
- GitHub Actionsでリリース時に自動更新。リポジトリとビューの対応から影響範囲を絞り、diffを見てstructure.yamlと図を修正しPRを作る。
- 矢印の色や線種に意味を割り当てるなど、表記ルールを規約に残し再利用する。失敗例も追記して品質を育てる。
- 手作業比で作成時間を約1/6に短縮。更新漏れや「古い図」を防ぎ、誰が触っても一貫した図になる。
- 一度で完璧は少ない。対話で中間ファイルを直しながら精度を上げる。実装前の設計図としても活用できる。

techblog.zozo.com








