hand-drawn-diagrams

hand-drawn-diagrams

カタログの概要 — スキルの全内容はこちら：muthuishere/hand-drawn-diagrams

判断ツリー

1. スキルの全内容はすでにインストールされていますか？

   • グローバル：f=~/.agents/skills/hand-drawn-diagrams/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/hand-drawn-diagrams/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは hand-drawn-diagrams としてインストールされています。これを呼び出して続行してください
   • pointer → ステップ 2 に進んでください

2. スコープを検出してから、インストールします：

   [ -e ~/.agents/skills/hand-drawn-diagrams ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -g -y
   

   プロジェクト：

   npx skills add muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信してください。

注意事項

• 必要条件： uv を使う Python（このスキルは scripts/*.py を uv run python 経由で実行します）。PNG およびアニメーション SVG のレンダリングを行う場合に限り、Chrome DevTools MCP または Playwright が必要です
• ライセンス： MIT（GitHub では NOASSERTION と報告されています）

インストール後の呼び出し

• スキル名：hand-drawn-diagrams
• トリガーフレーズ：「hand drawn diagram」、「sketch diagram」、「rough diagram」

機能

テキストプロンプトから、手描き風の Excalidraw 図（フロー図、解説図、マインドマップ、ワイヤーフレーム、ページのモックアップ）を生成します。図の種類を選択し、.excalidraw ファイルを作成して検証した後、ホストされた編集リンクを生成します。続けてアニメーション SVG や PNG もエクスポートできます。デフォルトではモノクロのスケッチを出力します。ラフな見た目によって「これは探索的なものです」と伝えられる、ホワイトボード風の素早いスケッチやアイデア出しに最適です。編集リンクとアニメーションリンクを開くと、図のデータが URL にエンコードされた、作成者の GitHub Pages サイトが表示されます。そのため、図のデータはリンク内に含まれます。

使用しない場合

• Excalidraw ライブラリとレンダリングパイプラインを使って、洗練された構造的な図を作成する場合（excalidraw-diagram を使用してください）
• 共有可能なリンク内で図がマシンの外に出てはならない場合（ローカルの Playwright ブラウザーでレンダリングする excalidraw-diagram を使用してください）