Design diagram
Claude Code / GitHub Copilot 等向けエージェントスキル集（gh skill installで導入可能）
npx -y skills add idylle-cynique/solo-dev-skills --skill design-diagramAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 18 days oldThe repository was created 18 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 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.
What its author says it does
Copied from the file, not written here
対象コード・処理を分析し、要求に応じてフローチャート・シーケンス図・データフロー図・ ER図などをMermaidダイアグラムとしてドキュメント化するスキル。「フローチャートを書いて」 「シーケンス図で図解して」「ER図がほしい」など図解を依頼されたとき、またはコードを 見る前に処理を整理したいと言われたときは明示されていなくても積極的にこのスキルを 参照すること。呼び出しをまたいで状態が変化する処理の状態遷移図・テストケース導出は design-state-tests を使う。
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
6.1 KB, as published. Nobody here has run it
以下の手順で対象コードを分析し、適切な種類のMermaidダイアグラムとして出力してください。
入力
対象: $ARGUMENTS
図の種類が引数で明示されていればそれに従う。省略された場合は「2. 図の種類の選定」に 従って自分で判断する。
1. 対象コードの把握
対象を読み、以下を把握する。
- エントリーポイント、分岐条件、終端点（
exitコード・return値） - コンポーネント/オブジェクト間の呼び出し関係と、その時系列
- データが通過する処理ステップと、途中でのデータ形状の変化
- 永続化される状態（DB・ファイル・キャッシュなど）とエンティティ間の関係
対象が「呼び出しをまたいで状態が変化する処理」で、テストケース導出まで必要な場合は、
その旨をユーザーに伝えて design-state-tests の使用を提案し、このスキルの実行は中断する
（このスキルの範囲は図の作成であり、状態遷移からのテストケース導出は行わない）。
2. 図の種類の選定
対象の性質に応じて、以下の基準で図の種類を選ぶ。
| 対象の性質 | 適した図 | Mermaid記法 |
|---|---|---|
| 分岐・早期return・exit codeを持つ単発の処理（冪等） | フローチャート | flowchart TD |
| 複数コンポーネント/オブジェクト間の時系列のやり取り | シーケンス図 | sequenceDiagram |
| データが複数の処理ステップを通過して変換されていく様子 | データフロー図 | flowchart LR（下記の形状ルールで代用） |
| エンティティ間の関係・スキーマ構造 | ER図 | erDiagram |
| 呼び出しをまたいで状態が変化する処理 | 状態遷移図 | design-state-tests に委譲する |
重要な制約: 作成するダイアグラムは1〜3個までに収める。 ユーザーから「複数の切り口で」 「◯種類作って」のような明示的な追加指示がない限り、それ以上の図は作成しない。対象の理解に 複数の図が候補として挙がる場合は、最も理解に資する図を優先度順に絞り込み、判断に迷う場合は どの図を作成するかを一言確認してから進める。
3. 各図の作成方針
フローチャート（flowchart TD）
| 種別 | 記法 | 用途 |
|---|---|---|
| 開始/終端 | NodeID([テキスト]) | 起動・exit・return |
| 処理 | NodeID["テキスト"] | 値の計算・関数呼び出し |
| 分岐 | NodeID{"テキスト？"} | 条件分岐 |
ノードIDの形状（[]/{}/([])）は最初に出現した箇所で1回だけ定義し、以降はIDのみで参照する
（同じIDに異なる形状を複数回書くとレンダリングが崩れる場合がある）。ループは、ループ本体の
終わりからループ先頭ノードへ戻る矢印で表現する（別図にしない）。
シーケンス図（sequenceDiagram）
participant で登場するコンポーネント/オブジェクトを列挙し、時系列でメッセージ矢印を書く。
同期呼び出しは ->>、戻り値・非同期は -->> のように矢印種別で区別する。条件分岐がある場合は
alt/opt/loop ブロックで表現する。
データフロー図（flowchart LR で代用）
Mermaidに専用のDFD記法はないため、ノード形状で意味を区別する。
| 意味 | 記法 |
|---|---|
| 外部エンティティ | NodeID["テキスト"]（四角） |
| プロセス | NodeID("テキスト")（角丸） |
| データストア | NodeID[("テキスト")]（円柱型） |
左から右（LR）にデータの流れる向きを揃える。
ER図（erDiagram）
エンティティ名と属性、カーディナリティ（||--o{、}o--|| 等）を整理する。属性は主キー・外部キーが
分かるようにコメントまたは命名で示す。
4. 補足セクションの作成
図だけでは伝わらない、非自明な挙動をテキストで補足する。特に以下の観点を確認する。
- 評価順序の非対称性: 複数の失敗モードがある場合、どちらが先に評価されるか
- fails-open / fails-closed の違い: 依存ツール・外部リソースが欠如したときの挙動
- 同期/非同期の境界（シーケンス図の場合）、正規化・カーディナリティの前提（ER図の場合）など
5. 出力
出力先: 関連Issueがある場合は .vscode/docs/tasks/<issue番号>/<対象名>-<図種類>.md、
複数図を1ファイルにまとめる場合は <対象名>-diagrams.md。Issueが不明な場合は
.vscode/docs/plans/ 配下に同様の命名で出力する。
# <対象名> の<図種類>（Issue #<番号>）
<対象コードが何であるか、なぜこの図種を選んだかを1〜2文で>
## <図種類>
```mermaid
<選定した記法>
...
```
## 補足
- <非自明な挙動>
出力例は examples/sample.md を参照。
完了報告
- 作成した図の種類と数（1〜3個）、および選定理由
- 生成したファイルのパス
- 補足セクションで特に注意喚起した非自明な挙動の概要