ynitto mermaid-diagrammer
説明・要件・コードを Mermaid 記法の図に変換する。図はテキストなので diff・レビュー・バージョン管理しやすく、ドキュメントに直接埋め込める。
図タイプの選択
依頼内容から適切な図を選ぶ（迷う場合はユーザーに確認）。記法の最小テンプレは references/syntax.md。
| 表現したいもの | 図タイプ | Mermaid 宣言 |
|---|---|---|
| 処理の時系列・コンポーネント間のやり取り | シーケンス図 | sequenceDiagram |
| データモデル・テーブル関連 | ER図 | erDiagram |
| 処理の分岐・手順フロー | フローチャート | flowchart TD / LR |
| オブジェクトの状態遷移 | 状態遷移図 | stateDiagram-v2 |
| スケジュール・工程 | ガントチャート | gantt |
| クラス構造（DDD は domain-modeler を優先） | クラス図 | classDiagram |
| 発想・階層整理 | マインドマップ | mindmap |
| ユーザー操作の感情遷移 | ユーザージャーニー | journey |
棲み分け: DDD のドメインモデル設計は
domain-modeler、AWS 構成図はaws-architecture-diagram(draw.io) を使う。本スキルはそれ以外の汎用作図を担う。
ワークフロー
Step 1: 対象と図タイプを決める
- 入力（自然言語の説明・要件・既存コード・API 仕様）を把握する
- 上表から図タイプを選ぶ。1つの説明から複数図が有効なら提案する（例: フロー＋シーケンス）
- コードからの図化の場合、対象ファイルを読んで実際の構造・呼び出し関係を確認する（推測で描かない）
Step 2: 要素を抽出する
- シーケンス図: 参加者（actor/participant）と、その間のメッセージ（同期/非同期/戻り）
- ER図: エンティティ・属性・主キー・リレーション（基数
||--o{等） - フローチャート: 開始/終了・処理・判断（分岐ラベル付き）
- 状態遷移図: 状態・遷移・トリガー（イベント）
Step 3: Mermaid を生成する
- ノード/参加者の ID は英数字、表示ラベルは日本語可（
A[ユーザー登録]） - 1図に詰め込みすぎない（目安: ノード15〜20以内）。大きい場合は分割するか
subgraphで整理する - 方向はフローの自然さで選ぶ（手順は
TD、パイプラインはLR） - ラベル・エッジに意味を持たせる（無名の矢印を減らす）
Step 4: 検証する
- references/syntax.md の構文と照合し、閉じ忘れ・予約語衝突・特殊文字エスケープを確認する
- Mermaid CLI が使える環境なら描画確認できる（任意・未導入なら省略）:
# mmdc があれば: 構文エラーは描画失敗で検出できる npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg - 出力はコードフェンス
```mermaidで囲み、そのまま Markdown/GitHub/Obsidian に貼れる形にする
ガードレール
| 制限 | 内容 |
|---|---|
| 事実性 | コード/仕様から描く場合、実体に無い関係を描かない。不明は注記する |
| 複雑さ | 1図が大きすぎる場合は分割を提案する（可読性優先） |
| 特殊文字 | ラベル内の () : ; # 等は必要に応じ "…" で囲む／エスケープする |
| スコープ | 図の生成に集中。DDD設計・AWS構成図は専用スキルへ委譲 |