Structure visualize

Skill mjcreativelab/mjcreativelab-agent-prompts/skills/structure-visualize

指定された開発構造（インフラ構成、ER 図、コンポーネント設計、クラス構成、モジュール依存など）を自己完結 HTML の構成図として docs/structure-diagrams/ に出力する。入力は会話で説明された設計・設計ドキュメント・リポジトリ内の実体（IaC / DB スキーマ / ソースコード）のいずれでもよい。カテゴリ別配色とエリア枠（レイヤー・所属のグルーピング囲み）、ノード詳細パネル・ズーム/パン付き。 git ブランチ差分の可視化は /branch-visualize（本スキルは指定内容のスナップショット構造を描く）。ユーザーが「構造を可視化して」「構成図にして」「/structure-visualize」と言ったら起動する。From its SKILL.md

Install

npx -y skills add mjcreativelab/mjcreativelab-agent-prompts --skill structure-visualize

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

6.1 KB, ~2.0k tokens by cl100k_base, as published. Nobody here has run it

Structure Visualize

指定された内容の「開発に関する静的構造」を、カテゴリ配色 + エリア枠付きの自己完結 HTML 構成図として可視化する。設計レビュー・設計共有・実装前の構造把握の補助が目的。git リポジトリであることは要求しない。

引数の解析

$ARGUMENTS 全体を「可視化対象の指定」として解釈する（自然文・ファイル / ディレクトリパスの混在可。フラグは無い）:

パスらしきトークンは存在確認する。存在しなければエラーを表示して終了する
引数が無い場合は直近の会話コンテキストから対象を推定する。推定できなければ AskUserQuestion で対象を確認する（使えないエージェントではテキストで確認する。以降の AskUserQuestion も同様）

手順

1. 対象確定・ゲート表示

入力種別を判定する（組み合わせ可）: 会話（会話中で説明された設計）/ ドキュメント（指定された設計文書）/ コード解析（リポジトリ内の IaC・スキーマ・ソース）
図種を判定する: インフラ構成 / ER / コンポーネント / クラス / モジュール依存 / 汎用
確定後、以下のブロックを 1 回表示する:

対象: <説明 or パス>
入力種別: <会話 / ドキュメント / コード解析>
図種: <インフラ構成 / ER / コンポーネント / クラス / モジュール依存 / 汎用>

2. 構造の抽出

会話: 会話中の設計記述から要素（ノード候補）と関係（エッジ候補）を抽出する
ドキュメント: 指定ファイルを読み、要素と関係を抽出する
コード解析（図種に応じた読み方）:
- IaC: resource / module ブロックと参照関係
- DB: migration / DDL / ORM スキーマからテーブル・カラム・FK
- コンポーネント / クラス: 定義 + import / 継承 / 実装 / 参照
Grep での関係追跡は指定スコープ内に限定する（スコープ外へ 2 ホップ以上辿らない）

3. 構造化（GRAPH JSON）

references/html-guide.md のスキーマ・作図指針に従い、抽出結果を GRAPH JSON に整理する:

group はカテゴリ / レイヤー / 所属（プロバイダ・アーキテクチャ層など「最も伝えたい大きな括り」。1 階層のみ）
layout は同ガイドの選択基準で決める（所属・境界が主題 → areas / 依存の流れ・ER → flow）
ノード数 80 超が見込まれる場合はディレクトリ / リソース種別単位に集約し、集約内容を完了報告に明記する（無言の切り詰めをしない）
members は 1 ノード 10 行を目安とし、超過分は「…他 N 件」の行を置く

4. HTML 生成

出力先 docs/structure-diagrams/ が無ければ AskUserQuestion で作成可否を確認する（拒否されたら出力先ディレクトリを尋ねる）
ファイル名: <図種プレフィックス>-<対象スラグ>-<日付>.html
- 図種プレフィックス: infra / er / component / class / module / structure（汎用）
- 対象スラグ: 対象の短い kebab-case 表現（例: payment-system）
- 日付: TZ=Asia/Tokyo date +%Y-%m-%d
assets/diagram-template.html を読み、__TITLE__ と __GRAPH_JSON__ を置換して生成する（エスケープ規則は html-guide.md 参照。配色・レイアウトはテンプレートが内蔵しており生成側の座標計算は不要）

5. 完了報告

生成したファイルのパスを表示する
図の要点（主要な要素と関係、エリア構成）を 2〜3 文で添える
集約・省略した内容があれば明記する
生成物のコミットはしない（コミットするかどうかはユーザーの判断に委ねる）

エラーハンドリング

ケース	挙動
指定パスが存在しない	エラーを表示して終了
対象が特定できない（引数なし・会話にも設計の言及なし）	AskUserQuestion で対象を確認
`docs/structure-diagrams/` が無い	AskUserQuestion で作成可否を確認（拒否時は出力先を尋ねる）
対象が広大（ノード数 80 超見込み）	集約して描画し、完了報告に集約内容を明記
git リポジトリでない	エラーにしない（本スキルは git 不要）

やらないこと

振る舞い・時系列の図（シーケンス図・フローチャート・状態遷移図）— 静的構造のみを描く
多段ネストのコンテナ（入れ子枠）— group は 1 階層のみ
git ブランチ差分の可視化（→ /branch-visualize）
指定スコープ外の無差別リポジトリスキャン（広大な対象は集約 + 明記）
生成物の自動コミット
コード内容の外部送信・外部レンダリング API / CDN への依存（自己完結 HTML・オフライン動作）
mermaid / d2 出力（HTML のみ）

What ships with it: 3 files

47.6 KB alongside SKILL.md

assets/

diagram-template.html38.7 KB

references/

html-guide.md6.5 KB

README.md2.5 KB