mcpField
H
hand-drawn-diagrams

hand-drawn-diagrams

github.com/muthuishereデザイン・UI83629 回インストール5 週間前に更新
リポジトリ

hand-drawn-diagrams について

hand-drawn-diagramsは、手描き風のExcalidraw図を作成するスキルです。依頼に応じて図の種類を選び、成果物を検証して編集用URLを生成します。レンダリングにはChrome DevTools MCPも任意で利用できます。

主な機能

  1. 01依頼に応じた図の種類の選択
  2. 02手描き風Excalidraw図の作成
  3. 03納品前の図ファイル検証
  4. 04オンライン編集URLの生成
  5. 05ブラウザーでのPNG・SVGレンダリング（任意）

活用シーン

  1. 01技術的な概念を説明する図の作成
  2. 02UXフローやファネルの整理
  3. 03ブレインストーミング図やページモックの作成

MCP 対応

ワークフローではChrome DevTools MCPを使い、ブラウザーでPNGやアニメーションSVGをレンダリングできます。代替手段としてPlaywrightも利用します。

インストール

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

$npx skills add https://github.com/muthuishere/hand-drawn-diagrams --skill hand-drawn-diagrams

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore
LICENSE
CLAUDE.md
README.md
.gitattributes
INSTALL.md
AGENTS.md
MANUAL-INSTALL.md
install.cmd
install.sh
.github/workflows/
skill-review.yml
docs/
animate.html
edit.html
index.html
installscripts/
install.py
uninstall.py
references/
activation-routing.xml
animation-spec.md
bullets.md
arrow-routing.md
color-palette.md
element-templates.md
index.md
ideation-diagrams.md
creative-raw-diagrams.md
fundamental-shapes.md
medical-diagrams.md
json-schema.md
page-mockup-diagrams.md
patterns.md

詳細

./workflow.md の指示に従ってください。

ワークフロー

  1. 振り分け — ./steps/step-01-route.md を読みます。ユーザーの意図（指導、ブレインストーミング、UX フロー、ファネル、技術解説、医療、クリエイティブ、ページのモックアップ）に基づいて、振り分けテーブル（references/activation-routing.xml）から図の種類を 1 つ選びます。
  2. 描画 — ./steps/step-02-draw.md を読みます。共通の図形文法（references/fundamental-shapes.md）を使って図を設計し、/tmp/hand-drawn-diagrams/<slug>/ に、空でない elements 配列を含む .excalidraw JSON ファイルを書き込みます。
  3. 検証と納品 — ./steps/step-03-validate.md を読みます。scripts/validate_excalidraw.py を実行し、続いて scripts/open_diagram.py を実行して、ホストされた編集用 URL を生成し、ブラウザーで開きます。追加の選択肢として、アニメーションと PNG を提案します。

主なルール

  • 手描き風のスタイルと同じスケッチフォントを使い、デフォルトではモノクロにします
  • ラベルは図形ごとに 1～5 語、コンテナーごとに短い箇条書きは最大 3 項目にします
  • .excalidraw ファイルはユーザーから依頼がない限り、ユーザーのワークスペースではなく /tmp/ に書き込みます
  • URL の生成前に必ず検証します。空の図を共有してはいけません
  • レンダリングの優先順位：Chrome DevTools MCP（高速）→ Playwright（フォールバック）

参考資料

  • references/index.md — 参考資料の全インデックス
  • references/activation-routing.xml — 振り分けの選択ルールと納品方法
  • references/fundamental-shapes.md — 図形の基本表現

オプション：Chrome DevTools MCP

高速な PNG およびアニメーション SVG のレンダリングには、chrome-devtools-mcp をインストールします（実際のブラウザーを使用するため、Playwright は不要です）。セットアップについては INSTALL.md を参照してください。インストールされていない場合は、Playwright にフォールバックしてレンダリングします。

コメント

Markdown 対応