Mermaid Generator

ユーザーとの対話を通じてMermaidの図を仕上げる。一方的に生成するのではなく、 壁打ちしながらイメージを固め、アスキーアートで合意を取ってからコードを生成することが重要。

ワークフロー

Step 1: 意図の把握

$ARGUMENTS が指定されている場合はそこから図の種類・内容を読み取り、Step 2 以降から開始する。

指定がない場合は AskUserQuestion で図の種類を確認する：

AskUserQuestion({
  questions: [
    {
      question: "どんな図を作りたいですか？",
      header: "図の種類",
      options: [
        { label: "フローチャート", description: "プロセス・手順・条件分岐" },
        { label: "シーケンス図",   description: "時系列のやり取り・API呼び出し" },
        { label: "状態遷移図",     description: "状態の変化・ライフサイクル" },
        { label: "その他",         description: "ER図・クラス図・ガントチャート・マインドマップなど" }
      ],
      multiSelect: false
    }
  ]
})

「その他」が選択された場合はテキストで図の種類を確認する。図で表現したい内容がまだ不明な場合は、1〜2点ずつ追加で確認してテンポを保つ。

Step 2: 図の種類の提案

内容に合ったMermaidの図を提案する。複数候補があれば理由を添えて提示する。

図の種類	Mermaid記法	向いているもの
フローチャート	`flowchart`	プロセス・手順・条件分岐
シーケンス図	`sequenceDiagram`	時系列のやり取り・API呼び出し
クラス図	`classDiagram`	オブジェクト構造・継承関係
ER図	`erDiagram`	データベース設計・テーブル関係
状態遷移図	`stateDiagram-v2`	状態の変化・ライフサイクル
ガントチャート	`gantt`	スケジュール・タスク管理
マインドマップ	`mindmap`	アイデア整理・階層構造
円グラフ	`pie`	割合・内訳
Gitグラフ	`gitGraph`	ブランチ戦略
タイムライン	`timeline`	歴史・イベントの時系列

Step 3: アスキーアートでイメージ確認

図の骨格をアスキーアートで表現してユーザーに確認する。完璧な表現は不要 — 「こんな感じでよいですか？」という確認が目的。

各図種のスケッチ例は references/ascii-examples.md を参照。スケッチを作成する前に参照して表現スタイルを確認すること。

アスキーアートのコツ:

ノード名は実際の内容を使う（仮の名前でも可）
矢印の方向・ラベルも表現する
複雑な場合は主要なパスだけ示す
早めに骨格を見せる — 情報が揃い切らなくてもOK

フィードバックを受けたらアスキーアートを更新して再確認する。

Step 4: 詳細の詰め（必要に応じて）

骨格に合意が取れたら、必要に応じて詳細を確認する：

ラベル・条件: 矢印のテキスト、条件分岐のラベル
スタイル: 特定のノードを強調したい場合
補足: 注記・サブグラフ・グループ化など

明らかな場合は推測して進めてよい。細かすぎる確認で冗長にならないよう注意する。

Step 5: Mermaidコードの生成

合意が得られたらMermaidコードを生成して提示する。

出力形式:

```mermaid
（コード）
```

コード生成後は簡単な説明を添える：

主なノード・要素が何を表しているか
調整したい箇所があれば気軽に言ってもらえる旨

対話のスタイル

提案型で進める: 「〇〇はいかがでしょうか？」と具体的な案を出しながら進める
ユーザーが急いでいる場合: 必要な情報をまとめて聞いて一気に生成してもよい
修正依頼には柔軟に対応: コード生成後も「ここを変えたい」という要望に応える
Mermaid構文は正確に: 生成後は記法ごとの必須キーワード（flowchart/sequenceDiagram/erDiagram など）と矢印・ノード表記を自己レビューしてから提示する

mermaid-generator