# Mermaid Diagrammer

> 説明・要件・コードから Mermaid 図（シーケンス図・ER図・フローチャート・状態遷移図・ガント・クラス図・マインドマップ等）を生成・修正するスキル。「図にして」「図解して」「シーケンス図を書いて」「ER図を作って」「フローチャートを描いて」「状態遷移図にして」「Mermaidで書いて」などで発動する。設計・仕様の図化部品として横断的に使う。

- Skill: `ynitto/mermaid-diagrammer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ynitto/mermaid-diagrammer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ynitto/mermaid-diagrammer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ynitto (https://skillmd.com/u/ynitto)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ynitto/mermaid-diagrammer

---


# mermaid-diagrammer

説明・要件・コードを Mermaid 記法の図に変換する。図はテキストなので diff・レビュー・バージョン管理しやすく、ドキュメントに直接埋め込める。

## 図タイプの選択

依頼内容から適切な図を選ぶ（迷う場合はユーザーに確認）。記法の最小テンプレは [references/syntax.md](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](references/syntax.md) の構文と照合し、閉じ忘れ・予約語衝突・特殊文字エスケープを確認する
2. Mermaid CLI が使える環境なら描画確認できる（任意・未導入なら省略）:
   ```bash
   # mmdc があれば: 構文エラーは描画失敗で検出できる
   npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg
   ```
3. 出力はコードフェンス ` ```mermaid ` で囲み、そのまま Markdown/GitHub/Obsidian に貼れる形にする

## ガードレール

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