explain-diagram について
編集可能な Excalidraw 図で考えを説明するためのエージェント向けスキルです。図の形式を選び、読みやすさを確認して、短い説明とともに返す手順を示します。
主な機能
- 01質問に合う図の構成を選択
- 02Excalidraw による図の作成
- 03描画結果の確認と修正
- 04編集可能な図と説明の提示
活用シーン
- 01フロー図で手順を説明
- 02概念間の関係を表示
- 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 の前提:図は文章よりも理解しやすい場合があります。
- 読者が答えを見つける必要のある問いを特定します。答えが見てわかるように、フロー、関係性、比較、または順序を選びます。
- Excalidraw を使います。同梱の MCP サーバーを使う場合は、まず
read_meを 1 回呼び出し、続いて要素の JSON 配列文字列を指定してcreate_viewを呼び出します。現在のスキーマに従ってください。 - それぞれの図形には 1 つのアイデアを割り当てます。短く具体的なラベルと、明示的な矢印の向きを使います。判断とフィードバックループにはラベルを付けます。色は意味がある場合にのみ使います。
- 初めて見る人の視点で図を読みます。文字の大きさ、重なり、矢印の終点、メインの経路が明確かどうかを確認します。描画結果を修正します。
- 編集可能な図と、読み方の簡単な説明を返します。ホストがエクスポートに対応している場合は
.excalidrawファイルを保存します。実際にファイルまたは共有リンクを用意するまでは、存在すると主張しないでください。
MCP が利用できない場合は、excalidraw.com にインポートできるネイティブの .excalidraw JSON を作成します。ツールリファレンスを参照してください。
重要な関係性を保てる範囲で、図形の数を最小限にします。不確実な点は見える形で残します。説明をレポートのようにせず、依頼された成果物を作成してください。
コメント
Markdown 対応