mcpField
H
hand-drawn-diagrams

hand-drawn-diagrams

github.com/muthuishere设计与 UI83629 次安装5 周前更新
代码仓库

关于 hand-drawn-diagrams

hand-drawn-diagrams 是用于创建手绘风格 Excalidraw 图表的技能。它根据请求选择图表类型、验证结果，并可生成在线编辑链接；渲染时也可选用 Chrome DevTools MCP。

主要功能

  1. 01根据请求匹配图表类型
  2. 02创建手绘风格 Excalidraw 图表
  3. 03交付前验证图表文件
  4. 04生成在线编辑链接
  5. 05可选浏览器渲染 PNG 和 SVG

适用场景

  1. 01制作技术概念说明图
  2. 02梳理 UX 流程或转化漏斗
  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）中选择一种图表类型。
  2. 绘制 — 阅读 ./steps/step-02-draw.md。使用共享形状语法（references/fundamental-shapes.md）设计图表，然后将非空的 elements 数组写入 /tmp/hand-drawn-diagrams/<slug>/ 下的 .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