mermaid

Mermaid 図

文章よりも関係性を明確に伝える、有効な Mermaid ソースを作成します。

使い分け

• Markdown ネイティブの図には、デフォルトで Mermaid を選択します。
• 厳密な UML 表記、詳細な C4、または .puml 出力には、plantuml スキルを選択します。次のコマンドでインストールします：npx skills add full-stack-skills/document-skills --skill plantuml。
• ユーザーが ProcessOn またはホスト型の編集可能なレンダリングを明示的に希望する場合は、processon-diagram-generator スキルを選択します。次のコマンドでインストールします：npx skills add full-stack-skills/document-skills --skill processon-diagram-generator。
• コンテキストから安全なデフォルトがすでに決まる場合は、ツールを選ぶようユーザーに尋ねないでください。

ワークフロー

1. リクエストと利用可能なソースから、エンティティ、状態、判断、メッセージ、依存関係を抽出します。
2. 適切な図の種類のうち、最もシンプルなものを選択します。
3. 構文的に完全な Mermaid ソースを生成します。
4. ラベルは簡潔にし、句読点、括弧、特殊文字を含むラベルは引用符で囲みます。
5. 構造を検証し、Mermaid レンダラーが利用可能な場合は、納品前にレンダリングします。
6. ユーザーからファイルの作成を依頼された場合、または図を既存のドキュメントに含める場合にのみ、ファイルを保存します。

図の選択

必要なもの	Mermaid 宣言
プロセスまたは判断	flowchart TD または flowchart LR
時系列の呼び出し	sequenceDiagram
状態のライフサイクル	stateDiagram-v2
型の関係	classDiagram
データエンティティ	erDiagram
スケジュール	gantt
ユーザー体験	journey
階層	mindmap
時系列	timeline
軽量なアーキテクチャ	architecture-beta またはフローチャート

構文の詳細が必要な場合は、examples/ 内の該当するファイルだけを読み込みます。すべての例を読み込まないでください。

作成ルール

• すべてのノードに、安定したシンプルな識別子を付けます。
• 人が読むラベルに句読点が含まれる場合は、引用符で囲みます。
• 方向は一貫させ、不要な交差を避けます。
• 判断はひし形で表し、分岐先にラベルを付けます。
• シーケンスの参加者とメッセージを明示します。
• 対象プラットフォームが分かっている場合を除き、特定のレンダラーに依存するスタイル設定は避けます。
• 読みにくい図は、ラベルを縮小したり過剰なサブグラフを追加したりせず、分割します。
• 図を完成したように見せるためだけに、裏付けのない事実を記述しないでください。

出力

インラインで提供する場合は、次のフェンス付きブロックを返します。

```mermaid
flowchart LR
    A["Input"] --> B{"Valid?"}
    B -->|Yes| C["Process"]
    B -->|No| D["Reject"]
```

ファイルで提供する場合は、リポジトリに既存の図の慣例がなければ、docs/diagrams/<descriptive-name>.md を優先します。既存ファイルは保持し、上書きする前に確認してください。

検証チェックリスト

• 冒頭の宣言が、意図した図の種類と一致している。
• 識別子が有効で、一意である。
• 句読点を含むラベルが引用符で囲まれている。
• すべての分岐、参加者、関係が意図どおりに接続されている。
• フェンス付き Markdown ブロックが閉じられている。
• レンダラーが利用可能な場合、ユーザーの対象プラットフォームで図がレンダリングされる。