mcpField
H
hand-drawn-diagrams

hand-drawn-diagrams

github.com/podo设计与 UI29162 次安装3 天前更新
代码仓库

关于 hand-drawn-diagrams

hand-drawn-diagrams 是一项技能，可将文本提示转换为手绘风格的 Excalidraw 图表。它会生成并验证图表文件，可提供托管编辑链接，也支持后续渲染动画 SVG 和 PNG。

主要功能

  1. 01根据文本生成图表
  2. 02流程图、思维导图和线框图
  3. 03验证 Excalidraw 文件
  4. 04托管式图表编辑链接
  5. 05渲染动画 SVG 和 PNG
  6. 06单色手绘风格

适用场景

  1. 01草绘流程图
  2. 02用思维导图探索想法
  3. 03制作页面线框草图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill hand-drawn-diagrams

安装后在 Claude Code 中输入/hand-drawn-diagrams确认已加载。

附带文件stub.yaml

详细介绍

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： 发送一条以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行它。

注意事项

  • 要求： Python 和 uv（该技能通过 uv run python 运行 scripts/*.py）；仅在渲染 PNG 和动画 SVG 时需要 Chrome DevTools MCP 或 Playwright
  • 许可证： MIT（GitHub 将其报告为 NOASSERTION）

安装后调用

  • 技能名称：hand-drawn-diagrams
  • 触发短语："hand drawn diagram"、"sketch diagram"、"rough diagram"

功能

根据文本提示生成手绘风格的 Excalidraw 图表（流程图、说明图、思维导图、线框图、页面模型）。它会选择图表类型，编写并验证 .excalidraw 文件，然后生成托管编辑链接，并可进一步导出动画 SVG 和 PNG。默认输出单色草图。适合快速白板风格草图和早期构思，在这些场景中，粗略的视觉风格能够传达“仍在探索中”。编辑和动画链接会打开作者的 GitHub Pages 网站页面，图表数据编码在 URL 中，因此图表数据会随链接一起传递。

不适用场景

  • 使用 Excalidraw 库和渲染流程制作精致或结构化的图表（请使用 excalidraw-diagram）
  • 图表不得通过可分享链接离开本机的情况（请使用 excalidraw-diagram，它通过本地 Playwright 浏览器进行渲染）

评论

支持 Markdown