mermaid-diagrammer

name	mermaid-diagrammer
description	説明・要件・コードから Mermaid 図（シーケンス図・ER図・フローチャート・状態遷移図・ガント・クラス図・マインドマップ等）を生成・修正するスキル。「図にして」「図解して」「シーケンス図を書いて」「ER図を作って」「フローチャートを描いて」「状態遷移図にして」「Mermaidで書いて」などで発動する。設計・仕様の図化部品として横断的に使う。
metadata	{"version":"1.0.0","tier":"experimental","category":"document","tags":["mermaid","diagram","sequence","er","flowchart","visualization"]}

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: 対象と図タイプを決める

1. 入力（自然言語の説明・要件・既存コード・API 仕様）を把握する
2. 上表から図タイプを選ぶ。1つの説明から複数図が有効なら提案する（例: フロー＋シーケンス）
3. コードからの図化の場合、対象ファイルを読んで実際の構造・呼び出し関係を確認する（推測で描かない）

Step 2: 要素を抽出する

• シーケンス図: 参加者（actor/participant）と、その間のメッセージ（同期/非同期/戻り）
• ER図: エンティティ・属性・主キー・リレーション（基数 ||--o{ 等）
• フローチャート: 開始/終了・処理・判断（分岐ラベル付き）
• 状態遷移図: 状態・遷移・トリガー（イベント）

Step 3: Mermaid を生成する

• ノード/参加者の ID は英数字、表示ラベルは日本語可（A[ユーザー登録]）
• 1図に詰め込みすぎない（目安: ノード15〜20以内）。大きい場合は分割するか subgraph で整理する
• 方向はフローの自然さで選ぶ（手順は TD、パイプラインは LR）
• ラベル・エッジに意味を持たせる（無名の矢印を減らす）

Step 4: 検証する

1. references/syntax.md の構文と照合し、閉じ忘れ・予約語衝突・特殊文字エスケープを確認する
2. Mermaid CLI が使える環境なら描画確認できる（任意・未導入なら省略）:

   # mmdc があれば: 構文エラーは描画失敗で検出できる
   npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg
   

3. 出力はコードフェンス ```mermaid で囲み、そのまま Markdown/GitHub/Obsidian に貼れる形にする

ガードレール

制限	内容
事実性	コード/仕様から描く場合、実体に無い関係を描かない。不明は注記する
複雑さ	1図が大きすぎる場合は分割を提案する（可読性優先）
特殊文字	ラベル内の () : ; # 等は必要に応じ "…" で囲む／エスケープする
スコープ	図の生成に集中。DDD設計・AWS構成図は専用スキルへ委譲