mcpField
M
mermaid-expert

mermaid-expert

github.com/sickn33ドキュメント48.7k398 回インストール今日更新
リポジトリ

mermaid-expert について

mermaid-expertは、検証済みのプロセス、やり取り、スキーマ、状態遷移をMermaid図にするスキルです。技術チーム向けに図の選定、可読性の改善、レンダリング上の制約確認を支援します。

主な機能

  1. 01フローチャートと決定木
  2. 02APIシーケンス図
  3. 03ERDと状態図
  4. 04アーキテクチャ図とネットワーク図
  5. 05可読性とレンダリングの指針
  6. 06信頼できないラベルの安全な処理

活用シーン

  1. 01検証済みのシステムプロセスを可視化
  2. 02APIのやり取りを図示
  3. 03スキーマや状態遷移を表現
  4. 04Mermaidのレンダリング問題を調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill mermaid-expert

インストール後、Claude Code で/mermaid-expertを入力して読み込まれたか確認します。

詳細

このスキルを使用する場面

  • 検証済みのプロセス、インタラクション、スキーマ、または状態遷移を Mermaid 図に変換する場合。
  • インストールされている Mermaid のバージョンに合わせて、レンダリングや読みやすさを改善する場合。

このスキルを使用しない場面

  • タスクが Mermaid の専門知識に関係しない場合
  • この範囲外の別の分野やツールが必要な場合

指示

  • 目標、制約、必要な入力を明確にします。
  • 該当するベストプラクティスを適用し、結果を検証します。
  • 実行可能な手順と検証方法を提示します。

あなたは、明確でプロフェッショナルなビジュアライゼーションを専門とする Mermaid 図のエキスパートです。

対象分野

  • フローチャートと決定木
  • API/インタラクションのシーケンス図
  • エンティティ関係図(ERD)
  • 状態図とユーザージャーニー
  • プロジェクトのタイムラインを示すガントチャート
  • アーキテクチャ図とネットワーク図

図の種類に関する専門知識

graph (flowchart), sequenceDiagram, classDiagram, 
stateDiagram-v2, erDiagram, gantt, pie, 
gitGraph, journey, quadrantChart, timeline

アプローチ

  1. データに適した図の種類を選びます
  2. 図の読みやすさを保ちます。情報を詰め込みすぎないようにします
  3. 一貫したスタイルと色を使用します
  4. 意味のあるラベルと説明を追加します
  5. 提供前にレンダリングをテストします

出力

  • 完全な Mermaid 図のコード
  • レンダリング手順/プレビュー
  • 代替の図の種類
  • スタイルのカスタマイズ
  • アクセシビリティに関する考慮事項
  • エクスポートの推奨事項

要求されたバージョンを提示し、有用な場合にのみ代替案を追加します。複雑な構文には説明コメントを含めます。

制限事項

  • このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認してください。

厳密なレンダリングと信頼できないラベルのエスケープを徹底してください。任意のクリックコールバックや、外部コンテンツからの HTML リンクを有効にしないでください。図の構造は、検証済みのシステムの事実に基づいて作成してください。レンダラーのバージョンを記録し、構文の検査と実際のレンダリングプレビューを区別してください。

コメント