设计与前端 excalidrawdiagrammingux-wireframesarchitecture-diagramsflowchartsanimationpng-exportvisualization

手绘图表技能(hand-drawn-diagrams)

一句自然语言提示,即可生成手绘风格的 Excalidraw 架构图、流程图、线框图,并附带可编辑的托管链接、逐笔描摹动画和 PNG 导出。

FollowSkills 评估 · FSRS-2.0
谨慎使用
53/ 100 五分制 2.7 / 5
1 2 3 4 5 6
1信任安全15 / 25 · 3.0/5

证据显示最小权限取向:默认写入 /tmp 而非用户工作区、明确禁止未验证就渲染、文件位置规则清晰,MIT 许可与上游 Excalidraw/excalidraw-animate 归属完整。扣分项:核心交付链依赖把完整图表内容以 URL 哈希发送到 excalidraw.com 托管服务,数据流向披露不够醒目;open_diagram.py 会自动打开浏览器,无用户确认环节;发布者身份未经验证。

2可靠稳定9 / 20 · 2.3/5

仓库含真实 pytest 测试套件(hosted_scene_urls、open_diagram),且工作流强制『先验证再出 URL』的失败反馈路径, INSTALL.md 有故障排查表。扣分项:静态审查无法执行复现;未见运行测试的 CI 工作流(仅有 skill-review),Playwright/浏览器路径的测试标记为 slow 覆盖薄。

3适用触发10 / 15 · 3.3/5

适用场景、路由表(teach/UX/funnel/medical 等)、输出形式与触发关键词描述相当清晰,非适用边界(不是 Excalidraw 替代品)有说明。扣分项:核心功能依赖 excalidraw.com 托管 URL 与浏览器渲染,对中国大陆网络可达性有不确定性,未见中文支持说明。

4规范维护9 / 15 · 3.0/5

文档分层良好(SKILL.md→workflow→steps→references),安装/卸载脚本齐全,MIT 许可及第三方归属清楚,测试说明完整。扣分项:注册表 license 元数据为 NOASSERTION;无版本号/变更日志;README 由 deemwar 署名而 LICENSE 版权为 Muthukumaran Navaneethakrishnan,维护责任表述不一致。

5有效结果6 / 15 · 2.0/5

声明能力(自然语言→可编辑 .excalidraw→动画/PNG)与脚本、路由、模板体系一致,对比直接使用 Excalidraw 的价值表清晰,引用了示例输出图片。扣分项:静态审查无法验证输出可直接可用;托管 URL 交付模式(过长的 URL 经 open.html 重定向)的实际可用性未经执行证实。

6证据核验4 / 10 · 2.0/5

有可审计的第一手材料:committed 测试、确定性编码测试、样例文件引用、上游库归属。扣分项:静态审查无法独立复现;README 示例图片与动画效果无法在本审查中验证;缺第三方执行证据(无运行测试的 CI)。

证据充分度: 评估于 2026年9月10日 审查版本 eb791cca3c69
使用前请注意
  • 交付链默认将完整图表内容编码进发送至 excalidraw.com 的 URL,敏感内容的图表应避免使用托管链接
  • open_diagram.py 会自动打开浏览器,属外部效果,使用前请注意确认
  • 核心渲染依赖 excalidraw.com 与 GitHub/npm 生态,中国大陆网络可达性未经验证
  • 维护署名不一致(deemwar vs LICENSE 版权人)且无版本号/变更日志,长期维护状态不确定
  • 静态审查未执行任何代码,输出质量与脚本行为未经独立复现
查看完整评分方法 →

这个 Skill 能做什么,适合哪些场景?

hand-drawn-diagrams 是一个面向 Claude Code、Codex CLI 等兼容智能体的 Agent 技能,把自然语言描述转换为手绘风格的 Excalidraw 图表。它会根据意图(教学、头脑风暴、UX 流程、漏斗、技术讲解、医疗、创意或页面原型)自动选择图表类型,按共享的形状语法绘制,并通过脚本校验文件合法性。产出物包括标准 .excalidraw 源文件、托管编辑链接、逐笔描摹的动画 SVG,以及按需导出的 PNG。图表默认写入 /tmp/hand-drawn-diagrams/,不污染用户工作区。

技能分三步执行:1) 路由——读取步骤文件并依据 references/activation-routing.xml 的路由表为用户意图选择图表类型;2) 绘制——使用 references/fundamental-shapes.md 中的形状语法设计图表,在 /tmp/hand-drawn-diagrams/<slug>/ 生成非空的 .excalidraw JSON 文件;3) 校验与交付——运行 scripts/validate_excalidraw.py 校验,再用 scripts/open_diagram.py 生成托管编辑 URL 并在浏览器中打开。标签遵循每形状 1–5 个词、每容器最多 3 条短列表的规则。默认单色手绘风格;渲染优先使用 Chrome DevTools MCP,未安装时回退到 Playwright。动画与 PNG 可作为后续步骤提供。

  1. 学生在复习备考时,把课程笔记转换成手绘风格的复习导图和概念图
  2. 系统架构师用一句描述快速生成系统和 API 流程图,并拿到可编辑的 Excalidraw 链接
  3. 设计师和产品经理把 UX 流程和页面想法画成单色线框图或页面原型
  4. 教师为课堂准备概念讲解图和知识拆解可视化
  5. 销售团队生成漏斗和转化路径的可视化图示
  6. 开发者为文档补一张动画 SVG 架构说明图,逐笔描摹更有讲解感

这个 Skill 有哪些优点和局限?

优点
  • 零起点:自然语言输入即可产出图表,自动选择图表类型并排布不重叠的坐标
  • 产物是标准 .excalidraw 文件,可在 Excalidraw 中打开、编辑、归档,无锁定
  • 一次请求可产出托管编辑链接、动画 SVG 和 PNG,动画基于开源库 excalidraw-animate
  • 源文件默认写到 /tmp/,保持用户工作区整洁
  • 内置校验脚本,要求生成链接前先验证,避免交付空图表
局限
  • 仓库 License 字段显示 NOASSERTION,而 README 文末自称 MIT,许可状态需自行核实
  • 完整渲染体验(快速 PNG/动画)依赖 Chrome DevTools MCP 或 Playwright,环境缺失时能力受限
  • 仓库未提供测试套件或跨平台验证的证据
  • 标签与文字限制(每形状 1–5 词、每容器最多 3 条要点)不适合信息密集的复杂图表
  • 校验范围局限于脚本验证与字体、单色等风格规则,不保证图表语义正确

如何安装这个 Skill?

运行 npx skills add muthuishere/hand-drawn-diagrams。该安装器支持 Claude Code、Codex、OpenCode、Windsurf、GitHub Copilot、Cursor、Gemini CLI 等 40+ 兼容智能体,并自动检测已安装的智能体。全局/项目作用域及卸载选项见仓库的 INSTALL.md(源材料未展开细节)。若想获得更快的 PNG 和动画 SVG 渲染,可按 INSTALL.md 安装 chrome-devtools-mcp;不装则回退到 Playwright。

如何使用这个 Skill?

安装后,在支持的智能体中直接用自然语言请求即可,例如"画一个订单系统的架构图"或"把这段流程画成手绘线框图"。默认情况下图表会在浏览器中打开托管编辑器供编辑、下载;说"打开动画"可看逐笔描摹效果,说"保存图片"会导出 PNG,"保存为 excalidraw"会保留源文件。源文件默认写入 /tmp/hand-drawn-diagrams/,除非你明确要求保存到项目内。

这个 Skill 与同类方案有什么区别?

README 将其与直接使用 Excalidraw 对比:Excalidraw 需要空白画布手动画图,而本技能从自然语言出发,自动选型、自动排布、自动生成动画,并交付托管链接;但它是构建在 Excalidraw 之上的技能,并非替代品。动画能力基于 dai-shi 的开源库 excalidraw-animate。

常见问题

用这个技能花钱吗?
源材料未提及任何费用。技能本身开源,动画依赖的开源库 excalidraw-animate 亦然;但托管编辑链接和浏览器渲染涉及的网络服务是否有配额或限制,文档中没有说明。
它需要哪些权限和环境?
需要 shell 执行 Python 脚本、本地文件系统读写(默认写 /tmp/)、以及网络访问(托管编辑链接)。想获得更快的 PNG/动画渲染需安装 chrome-devtools-mcp 或备有 Playwright。
如果我不用 Claude Code,还能用吗?
README 声称通过 npx skills add 安装器支持 Codex、Cursor、Gemini CLI 等 40+ 智能体;SKILL.md 本身是通用的三步工作流加脚本调用,未使用 Claude Code 专属机制,理论上在具备等效 shell 和文件系统能力的智能体中可直接使用,但源材料未逐一验证各平台。
图表会写进我的项目目录吗?
默认不会。源文件写到 /tmp/hand-drawn-diagrams/;只有当你明确说"保存为 excalidraw"或"保存图片"时,产物才会写入你的项目。

相关 Skills