手绘图表技能(hand-drawn-diagrams)
一句自然语言提示,即可生成手绘风格的 Excalidraw 架构图、流程图、线框图,并附带可编辑的托管链接、逐笔描摹动画和 PNG 导出。
证据显示最小权限取向:默认写入 /tmp 而非用户工作区、明确禁止未验证就渲染、文件位置规则清晰,MIT 许可与上游 Excalidraw/excalidraw-animate 归属完整。扣分项:核心交付链依赖把完整图表内容以 URL 哈希发送到 excalidraw.com 托管服务,数据流向披露不够醒目;open_diagram.py 会自动打开浏览器,无用户确认环节;发布者身份未经验证。
仓库含真实 pytest 测试套件(hosted_scene_urls、open_diagram),且工作流强制『先验证再出 URL』的失败反馈路径, INSTALL.md 有故障排查表。扣分项:静态审查无法执行复现;未见运行测试的 CI 工作流(仅有 skill-review),Playwright/浏览器路径的测试标记为 slow 覆盖薄。
适用场景、路由表(teach/UX/funnel/medical 等)、输出形式与触发关键词描述相当清晰,非适用边界(不是 Excalidraw 替代品)有说明。扣分项:核心功能依赖 excalidraw.com 托管 URL 与浏览器渲染,对中国大陆网络可达性有不确定性,未见中文支持说明。
文档分层良好(SKILL.md→workflow→steps→references),安装/卸载脚本齐全,MIT 许可及第三方归属清楚,测试说明完整。扣分项:注册表 license 元数据为 NOASSERTION;无版本号/变更日志;README 由 deemwar 署名而 LICENSE 版权为 Muthukumaran Navaneethakrishnan,维护责任表述不一致。
声明能力(自然语言→可编辑 .excalidraw→动画/PNG)与脚本、路由、模板体系一致,对比直接使用 Excalidraw 的价值表清晰,引用了示例输出图片。扣分项:静态审查无法验证输出可直接可用;托管 URL 交付模式(过长的 URL 经 open.html 重定向)的实际可用性未经执行证实。
有可审计的第一手材料:committed 测试、确定性编码测试、样例文件引用、上游库归属。扣分项:静态审查无法独立复现;README 示例图片与动画效果无法在本审查中验证;缺第三方执行证据(无运行测试的 CI)。
- 交付链默认将完整图表内容编码进发送至 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 可作为后续步骤提供。
- 学生在复习备考时,把课程笔记转换成手绘风格的复习导图和概念图
- 系统架构师用一句描述快速生成系统和 API 流程图,并拿到可编辑的 Excalidraw 链接
- 设计师和产品经理把 UX 流程和页面想法画成单色线框图或页面原型
- 教师为课堂准备概念讲解图和知识拆解可视化
- 销售团队生成漏斗和转化路径的可视化图示
- 开发者为文档补一张动画 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。