mermaid

このスキルを使用するタイミング

ユーザーが次の内容に言及した場合は、必ずこのスキルを使用してください。

• 図、チャート、グラフの描画、作成、生成、制作、構築
• プロセス、ワークフロー、システム、アーキテクチャ、データの可視化
• 「画图」（図を描く）、「绘图」（チャートを描く）、「生成图」（図を生成する）、「创建图」（図を作成する）などの依頼
• フローチャート、シーケンス図、クラス図、状態図、その他あらゆる種類の図
• アーキテクチャ図、システム図、設計図
• データの可視化、チャート、グラフ
• プロセスフロー、ワークフロー、ビジネスプロセス
• プロジェクトのタイムライン、スケジュール、ガントチャート
• ユーザージャーニー、マインドマップ、階層構造
• データベーススキーマ、ER 図、エンティティ間の関係
• Git のブランチ構造、バージョン管理図
• あらゆる視覚表現や図によるコンテンツ

トリガーとなるフレーズには、次のようなものがあります。

• 「画一个图」（図を描いて）、「画流程图」（フローチャートを描いて）、「画架构图」（アーキテクチャ図を描いて）
• 「创建一个图表」（チャートを作成して）、「生成一个图」（図を生成して）
• 「帮我画」（描くのを手伝って）、「给我画」（描いて）、「画出来」（描き出して）
• 「用图表示」（図で表して）、「可视化」（可視化して）、「画个图说明」（図を描いて説明して）
• 「流程图」（フローチャート）、「时序图」（シーケンス図）、「类图」（クラス図）、「状态图」（状態図）
• 「架构图」（アーキテクチャ図）、「系统图」（システム図）、「设计图」（設計図）
• 「甘特图」（ガントチャート）、「思维导图」（マインドマップ）、「时间线」（タイムライン）
• 「用 Mermaid」（Mermaid を使って）、「Mermaid 画图」（Mermaid で図を描いて）、「Mermaid 语法」（Mermaid の構文）
• 「diagram」、「chart」、「graph」、「flowchart」、「visualization」、「drawing」、「Mermaid」への言及

重要：Mermaid と PlantUML は異なる図作成ツールです。

Mermaid と PlantUML は、目的の異なる別々の図作成ツールです。

• Mermaid：Markdown ドキュメント向けに設計された、JavaScript ベースの図作成ツールです。Markdown に似た構文を使い、Markdown レンダラー（GitHub、GitLab、Wiki、ブログ）で直接描画できます。簡単な図、Markdown ドキュメント、シンプルな可視化に最適です。出力形式は、言語タグに mermaid を指定したフェンス付き Markdown コードブロックです。

• PlantUML：簡単なテキスト記述を使ってさまざまな UML 図を作成できるコンポーネントです。UML 標準と複雑なシステムアーキテクチャに重点を置いています。UML 図、エンタープライズアーキテクチャ、C4 モデル、正確な UML 記法が必要な図に最適です。出力形式は @startuml／@enduml ブロック、または .puml ファイルです。

PlantUML と Mermaid の両方のスキルが該当する場合：

• ユーザーが「Mermaid」または「Markdown diagram」と明示した場合は、このスキル（Mermaid）を使用します
• ユーザーが「PlantUML」、「UML diagram」、「C4 model」と明示した場合は、代わりに PlantUML スキルを使用します
• ユーザーが Markdown の文脈（README、Wiki、GitHub／GitLab、ブログ）に言及した場合は、Mermaid を優先します
• ユーザーが UML 標準または .puml に言及した場合は、PlantUML を優先します
• ユーザーが両方に言及した場合、またはどちらにも言及していない場合は、必ずユーザーに選択を尋ねてください：「Mermaid（Markdown コードブロック）または PlantUML（@startuml）のどちらでも図を作成できます。どちらの出力形式をご希望ですか？」

このスキルの使用方法

重要：Mermaid は Markdown に特化した図作成ツールです。ユーザーが「Mermaid」と明示した場合、Markdown ドキュメント用の図を必要としている場合、または Markdown レンダラー（GitHub、GitLab、Wiki、ブログ）で直接描画できる図を求めている場合に、このスキルを使用してください。

次の内容を確認したら、このスキルを使用してください。

• ユーザーが「用 Mermaid」（Mermaid を使って）、「Mermaid 画图」（Mermaid で図を描いて）、「Markdown 图」（Markdown の図）と言っている
• ユーザーが Markdown ドキュメント、GitHub、GitLab、Wiki、ブログ用の図を必要としている
• Markdown レンダラーで直接描画できる簡単な図を求めている
• Markdown 用の図の種類（フローチャート、シーケンス図、クラス図など）に言及している
• Markdown 形式の図を使って何かを可視化、表現、説明しようとしている PlantUML と Mermaid の両方に該当する場合は、必ずユーザーに出力形式またはツールを選択するよう尋ねてください。これらは用途の異なる別々の図表作成ツールです。

Mermaid 図を作成するには：

1. ユーザーのリクエストから図の種類を特定します：

   • フローチャート／フロー図 → flowchart または graph
   • シーケンス図／時系列図 → sequenceDiagram
   • クラス図 → classDiagram
   • 状態図 → stateDiagram または stateDiagram-v2
   • エンティティ関係図 → erDiagram
   • ユーザージャーニー → journey
   • ガントチャート → gantt
   • 円グラフ → pie
   • 象限図 → quadrantChart
   • 要件図 → requirementDiagram
   • Git グラフ → gitGraph
   • C4 図 → C4Context、C4Container、C4Component、C4Deployment、または C4Dynamic
   • マインドマップ → mindmap
   • タイムライン → timeline
   • ZenUML → zenuml
   • サンキー図 → sankey
   • XY チャート → xychart
   • ブロック図 → block
   • パケット図 → packet
   • カンバン → kanban
   • アーキテクチャ図 → architecture-beta（Mermaid v11.1.0 以降が必要です）
   • レーダーチャート → radar-beta（Mermaid v11.1.0 以降が必要です）
   • ツリーマップ → treemap-beta（Mermaid v11.1.0 以降が必要です）

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます：

   • examples/flowchart.md - フローチャートとプロセス図用
   • examples/sequence.md - インタラクションを示すシーケンス図用
   • examples/class.md - クラス図とオブジェクト指向設計用
   • examples/state.md - 状態図とステートマシン用
   • examples/er.md - エンティティ関係図用
   • examples/journey.md - ユーザージャーニーマップ用
   • examples/gantt.md - ガントチャートとプロジェクトのタイムライン用
   • examples/pie.md - 円グラフ用
   • examples/quadrant.md - 象限図用
   • examples/requirement.md - 要件図用
   • examples/gitgraph.md - Git のブランチ図用
   • examples/c4.md - C4 アーキテクチャ図用
   • examples/mindmap.md - マインドマップ用
   • examples/timeline.md - タイムライン図用
   • examples/zenuml.md - ZenUML 図用
   • examples/sankey.md - サンキーフロー図用
   • examples/xychart.md - XY チャート（棒グラフ／折れ線グラフ）用
   • examples/block.md - ブロック図用
   • examples/packet.md - パケット図用
   • examples/kanban.md - カンバンボード用
   • examples/architecture.md - アーキテクチャ図用
   • examples/radar.md - レーダーチャート用
   • examples/treemap.md - ツリーマップ図用

3. そのサンプルファイルに記載された構文、構造、ベストプラクティスに関する具体的な指示に従います

   重要な注意事項：

   • ベータ版の図の種類（architecture-beta、radar-beta、treemap-beta）には Mermaid v11.1.0 以降が必要です
   • 描画環境がベータ版の図の種類に対応していない場合は、サンプルファイルに記載されたフローチャート形式の代替案を使用します
   • バージョン互換性に関する注意事項と代替構文の選択肢を、必ずサンプルファイルで確認します

4. Mermaid コードを、適切なシンタックスハイライトを指定した Markdown コードブロックで囲んで生成します：

   重要：Mermaid コードは、必ず mermaid 言語タグを付けた Markdown コードブロックで囲んでください。これにより、ユーザーがコンテンツをコピーする際に形式が保持されます。

   出力形式の例（プレースホルダーではなく、実際の Mermaid 構文を使用してください）：

   flowchart TD
       A[Start] --> B[Process]
       B --> C[End]
   

   出力形式の要件：

   • 必ず mermaid 言語タグを付けた 3 つのバッククォート（```）を使用します
   • Mermaid コードをコードブロックのマーカーなしで出力してはいけません
   • コードブロックは完全で、適切に書式設定されている必要があります
   • <diagram-type> や ...diagram content... のようなプレースホルダーではなく、実際に有効な Mermaid 構文を使用します
   • これにより、ユーザーは書式を損なわずにコードをコピーできます

5. 必要に応じてスタイルと設定を追加します：

   • テーマを設定するには、%%{ init: { theme: 'base' } }%% を使用します
   • ノードのスタイル設定には style ディレクティブを適用します
   • 再利用可能なスタイルクラスには classDef を使用します

6. 構文を検証します：

   • 必要な要素がすべて含まれていることを確認します
   • 関係と接続が適切に定義されていることを確認します
   • ガントチャートの日付形式（YYYY-MM-DD）を確認します
   • チャート（円グラフ、象限図など）のデータ形式を確認します
   • ER 図では、エンティティ名にハイフンではなくアンダースコアを使用します（例：LINE-ITEM ではなく LINE_ITEM）
   • フローチャートでは、ノードのラベルに「end」を使用しないでください（代わりに「End」または「END」を使用します）
   • クラス図では、ラベル内の特殊文字をバッククォートでエスケープします
   • ベータ版の図の種類について、バージョンの互換性を確認します

7. 図をプロジェクトディレクトリに保存します：

   • デフォルトの動作：Mermaid 図を生成する場合は、現在のプロジェクトディレクトリに保存します
   • 推奨される保存場所：
     • docs/diagrams/ - ドキュメント用の図
     • docs/ - 一般的なドキュメント
     • diagrams/ - 単独の図ファイル
     • 現在のディレクトリ（.） - 特定のディレクトリ構成がない場合
   • ファイル名：system-architecture.md、user-flow.md、database-schema.md など、内容が分かる名前を使用します
   • ファイル形式：Mermaid のコードブロックを含む .md ファイルとして保存します
   • 例：ユーザーがシステムアーキテクチャ図を依頼した場合は、docs/diagrams/system-architecture.md または diagrams/system-architecture.md として保存します
   • 必要に応じて確認します：プロジェクトの構成が不明な場合は、図の保存場所をユーザーに確認します。ただし、存在しない場合はデフォルトで docs/ または diagrams/ ディレクトリを作成します

出力形式とファイルの保存：

図を生成する場合は、次の形式で応答します。

1. 最初にファイルを保存します：プロジェクトディレクトリに図のファイルを作成します（例：docs/diagrams/system-architecture.md）

2. ユーザーに通知します：ファイルの保存場所を伝えます

3. 図を表示します：mermaid 言語タグを付けた、適切な形式の Markdown コードブロックで Mermaid コードを表示します

応答形式の例：

• 1 行目：「Mermaid 図を作成し、docs/diagrams/system-architecture.md に保存しました。」
• 続けて、図をコードブロックで囲んで表示します：
  • 次の内容から始めます：バッククォート 3 つ + mermaid + 改行
  • 続けて Mermaid コードを記述します
  • バッククォート 3 つ + 改行で閉じます

重要な要件：

• Mermaid コードブロックは、必ずトリプルバッククォート（```) と mermaid 言語タグを使って適切にフォーマットする必要があります
• コードブロックのマーカーなしで、Mermaid コードをそのまま出力しないでください
• コードブロックは、開始と終了のバッククォートを含めて完全な形式にする必要があります
• これにより、ユーザーはフォーマットを崩さずにコードをコピーできます
• 図のファイルは必ず現在のプロジェクトディレクトリに保存します（デフォルト：docs/diagrams/ または diagrams/）

図の種類が既存の例にない場合は、Mermaid のドキュメントを参照するか、希望する可視化方法についてユーザーに確認してください。

バージョン互換性

図の種類によっては、特定のバージョン要件があります。

• ベータ版の図の種類（Mermaid v11.1.0 以降が必要）：

  • architecture-beta - アーキテクチャ図
  • radar-beta - レーダーチャート
  • treemap-beta - ツリーマップ図

• 高度な機能（特定のバージョンが必要）：

  • JSON 設定を使用する参加者タイプ：Mermaid v10.0.0 以降
  • アクターの作成と破棄：Mermaid v10.3.0 以降
  • エッジ ID と曲線スタイル：Mermaid v11.10.0 以降
  • @{} 構文を使った新しい形状：Mermaid v11.3.0 以降

ベータ版の図の種類がサポートされていない場合は、すべての Mermaid バージョンで使用できるフローチャートの代替例が、サンプルファイルに用意されています。

ベストプラクティス

1. 必ずコードブロックを使用する：すべての Mermaid コードを、言語タグに mermaid を指定した Markdown コードブロックで囲みます
2. 互換性を確認する：ベータ版の図の種類を使用する前に、バージョン要件を確認します
3. 代替手段を使用する：ベータ版の種類がサポートされていない場合は、用意されているフローチャートの代替手段を使用します
4. 命名規則に従う：ノードのラベルには予約語や特殊文字を使用しないでください
5. 構文をテストする：適切にレンダリングされるよう、保存前に図の構文を検証します
6. ファイルを整理する：図は適切なディレクトリ（docs/diagrams/ または diagrams/）に保存します
7. わかりやすい名前を付ける：図のファイルには明確な名前を付けます（例：system-architecture.md、user-flow.md）

Mermaid と PlantUML の主な違い

Mermaid（このスキル）：

• 目的：Markdown ドキュメント向けに設計された、JavaScript ベースの図作成ツールです
• 主な用途：開発の進展に合わせてドキュメントを更新します
• 最適な用途：
  • Markdown ドキュメント、GitHub、GitLab、Wiki、ブログ
  • Markdown レンダラーで直接レンダリングされる、すぐに作成できる図
  • シンプルなフローチャート、シーケンス図、基本的なチャート
  • 迅速なプロトタイピングと反復
  • ユーザーが Mermaid を明示的に要求した場合、または Markdown 互換の図を必要としている場合

PlantUML（別のスキル）：

• 目的：テキストによる記述を通じて、さまざまな UML 図を作成するコンポーネントです
• 主な用途：標準的な UML 表記法を重視した、UML 中心の図作成です
• 最適な用途：
  • 正確な表記が必要な複雑な UML 図（クラス図、コンポーネント図、配置図）
  • エンタープライズアーキテクチャ図と C4 モデル図
  • 標準 UML への準拠が求められる場合
  • 高度なカスタマイズ、スタイル設定、レイアウト制御が必要な図
  • ユーザーが PlantUML または UML 図を明示的に要求した場合

両方のスキルが該当する場合：

• 必ずユーザーに選択を尋ねます：「Mermaid または PlantUML を使ってこの図を作成できます。Mermaid は Markdown ドキュメント向けに設計された JavaScript ベースのツールで、GitHub／GitLab 上で直接レンダリングされます。PlantUML は UML 図とエンタープライズアーキテクチャに特化しています。どちらを希望しますか？」
• これらは目的の異なる2つの図作成ツールです。自動的にどちらかを選ばないでください
• ユーザーがどちらか一方を明示した場合は、そのツールを使用します
• ユーザーが両方、またはいずれも指定していない場合は、ニーズに応じて選べるようユーザーに尋ねます

キーワード

英語のキーワード： mermaid、図、チャート、グラフ、フローチャート、フローチャート、シーケンス図、クラス図、状態図、エンティティ関係図、ER 図、ユーザージャーニー、ガントチャート、円グラフ、象限図、要件図、Git グラフ、C4 図、マインドマップ、タイムライン、ZenUML、サンキーダイアグラム、XY チャート、ブロック図、パケット図、カンバン、アーキテクチャ図、レーダーチャート、ツリーマップ、描く、作成する、生成する、作る、構築する、視覚化する、視覚化、描画、プロット、マッピング、回路図、設計図、設計図、システム図、プロセスフロー、ワークフロー、データの視覚化、視覚的表現

中国語のキーワード（中国語关键词）： フローチャート、シーケンス図、クラス図、状態図、エンティティ関係図、ユーザージャーニー図、ガントチャート、円グラフ、象限図、要件図、Git 図、C4 図、マインドマップ、タイムライン図、サンキーダイアグラム、XY 図、ブロック図、パケット図、カンバン図、アーキテクチャ図、レーダーチャート、ツリーマップ、図を描く、図を作成する、図を生成する、図を作る、図を作成する、フローチャートを描く、アーキテクチャ図を描く、シーケンス図を描く、クラス図を描く、状態図を描く、ガントチャートを描く、マインドマップを描く、タイムラインを描く、視覚化、チャート、図、模式図、設計図、システム図、フローチャート、アーキテクチャ図、シーケンス図、クラス図、状態図、ガントチャート、マインドマップ、タイムライン、図で表す、図にする、図を描いて、図を描くのを手伝って、図を1つ描く、図を作成する、図を生成する、説明用の図を描く、チャートで示す、視覚的に示す