mermaid

チャットボット向け Mermaid 図

このスキルを使うと、Markdown のチャットインターフェースで適切に表示される Mermaid 図を作成し、構文をローカルで検証して、Web サービスを呼び出さずに画像をレンダリングできます。

呼び出しに関する注意

• このスキルを呼び出す際は、名前を mermaid としてユーザーに伝えてください。

ワークフロー

1. リクエストに基づいて、図の種類（flowchart、sequenceDiagram、stateDiagram-v2）を特定します。
2. mermaid を使ったフェンス付き Markdown ブロックに Mermaid コードを記述します。
3. references/chatbot-mermaid-guidelines.md の書式規則に従います。
4. scripts/validate_mermaid.py を使って図を検証します。
5. ユーザーが画像ファイルを求めている場合は、scripts/render_mermaid.py でレンダリングします。

スクリプト

• scripts/validate_mermaid.py
  • ローカルの Mermaid CLI（mmdc）を呼び出して Mermaid コードを検証します。
  • Mermaid の構文解析でエラーが発生しないか確認するときに使用します。
• scripts/render_mermaid.py
  • ローカルの Mermaid CLI（mmdc）を使って Mermaid を SVG／PNG／PDF にレンダリングします。
  • 画像の埋め込みが必要な場合は、Markdown レンダラー向けに SVG を推奨します。

注意事項

• これらのスクリプトを実行するには、mmdc（Mermaid CLI）が PATH 上で利用できる必要があります。 見つからない場合は、ローカルにインストールするようユーザーに案内してください。Mermaid の Web サービスは使用しないでください。
• 依存関係は、各 Python スクリプト内のインライン uv スクリプトメタデータで管理されています。 必要に応じて --install-chromium を使い、pyppeteer 経由で Chromium バイナリをセットアップしてください。
• チャットで図をコンパクトかつ読みやすく保つため、横幅が広すぎるグラフは避け、ラベルを短くし、関連する状態をまとめてください。
• ユーザーが raw Markdown を求めている場合は、追加の説明を求められない限り、フェンス付きの mermaid ブロックのみを返してください。