mcpField
E
explain-diagram

explain-diagram

github.com/ashryaagrデザイン・UI5357 回インストール6 週間前に更新
リポジトリ

explain-diagram について

編集可能な Excalidraw 図で考えを説明するためのエージェント向けスキルです。図の形式を選び、読みやすさを確認して、短い説明とともに返す手順を示します。

主な機能

  1. 01質問に合う図の構成を選択
  2. 02Excalidraw による図の作成
  3. 03描画結果の確認と修正
  4. 04編集可能な図と説明の提示

活用シーン

  1. 01フロー図で手順を説明
  2. 02概念間の関係を表示
  3. 03選択肢を視覚的に比較

MCP 対応

利用可能な場合、同梱の Excalidraw MCP サーバーで `read_me` と `create_view` を呼び出します。MCP がない場合は、インポート可能なネイティブ `.excalidraw` JSON を作成できます。

インストール

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

$npx skills add https://github.com/ashryaagr/karpathy-output-style --skill explain-diagram

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

同梱ファイルreferences/excalidraw.md

詳細

図で説明する

Karpathy の前提:図は文章よりも理解しやすい場合があります。

  1. 読者が答えを見つける必要のある問いを特定します。答えが見てわかるように、フロー、関係性、比較、または順序を選びます。
  2. Excalidraw を使います。同梱の MCP サーバーを使う場合は、まず read_me を 1 回呼び出し、続いて要素の JSON 配列文字列を指定して create_view を呼び出します。現在のスキーマに従ってください。
  3. それぞれの図形には 1 つのアイデアを割り当てます。短く具体的なラベルと、明示的な矢印の向きを使います。判断とフィードバックループにはラベルを付けます。色は意味がある場合にのみ使います。
  4. 初めて見る人の視点で図を読みます。文字の大きさ、重なり、矢印の終点、メインの経路が明確かどうかを確認します。描画結果を修正します。
  5. 編集可能な図と、読み方の簡単な説明を返します。ホストがエクスポートに対応している場合は .excalidraw ファイルを保存します。実際にファイルまたは共有リンクを用意するまでは、存在すると主張しないでください。

MCP が利用できない場合は、excalidraw.com にインポートできるネイティブの .excalidraw JSON を作成します。ツールリファレンスを参照してください。

重要な関係性を保てる範囲で、図形の数を最小限にします。不確実な点は見える形で残します。説明をレポートのようにせず、依頼された成果物を作成してください。

コメント