这个 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.com 的 URL，敏感内容的图表应避免使用托管链接
- open_diagram.py 会自动打开浏览器，属外部效果，使用前请注意确认
- 核心渲染依赖 excalidraw.com 与 GitHub/npm 生态，中国大陆网络可达性未经验证
- 维护署名不一致（deemwar vs LICENSE 版权人）且无版本号/变更日志，长期维护状态不确定
- 静态审查未执行任何代码，输出质量与脚本行为未经独立复现
- Shell / 命令行
- 网络访问
- 本地文件系统
- MCP Server
Python (validation and rendering scripts)browser rendering via Chrome DevTools MCP or Playwright fallback
运行 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。
git clone --depth 1 https://github.com/muthuishere/hand-drawn-diagrams.git ~/.claude/skills/hand-drawn-diagrams根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 画一个订单系统的架构图
- 把这段流程画成手绘线框图
- 打开动画
- 保存图片
安装后，在支持的智能体中直接用自然语言请求即可，例如"画一个订单系统的架构图"或"把这段流程画成手绘线框图"。默认情况下图表会在浏览器中打开托管编辑器供编辑、下载；说"打开动画"可看逐笔描摹效果，说"保存图片"会导出 PNG，"保存为 excalidraw"会保留源文件。源文件默认写入 /tmp/hand-drawn-diagrams/，除非你明确要求保存到项目内。
这个 Skill 有哪些优点和局限？
- 零起点：自然语言输入即可产出图表，自动选择图表类型并排布不重叠的坐标
- 产物是标准 .excalidraw 文件，可在 Excalidraw 中打开、编辑、归档，无锁定
- 一次请求可产出托管编辑链接、动画 SVG 和 PNG，动画基于开源库 excalidraw-animate
- 源文件默认写到 /tmp/，保持用户工作区整洁
- 内置校验脚本，要求生成链接前先验证，避免交付空图表
- 仓库 License 字段显示 NOASSERTION，而 README 文末自称 MIT，许可状态需自行核实
- 完整渲染体验（快速 PNG/动画）依赖 Chrome DevTools MCP 或 Playwright，环境缺失时能力受限
- 仓库未提供测试套件或跨平台验证的证据
- 标签与文字限制（每形状 1–5 词、每容器最多 3 条要点）不适合信息密集的复杂图表
- 校验范围局限于脚本验证与字体、单色等风格规则，不保证图表语义正确
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| 手绘图表技能（hand-drawn-diagrams） 本页 | 53 · 谨慎使用 | ★ 79 | 28 天前 | NOASSERTION |
| Diagram Design（编辑级图表生成技能） | 58 · 推荐 | ★ 55k | 12 天前 | MIT |
| Draw.io 图表生成技能 | 61 · 推荐 | ★ 5.6k | 12 天前 | Apache-2.0 |
| Slides-Grab 卡片新闻技能 | 51 · 谨慎使用 | ★ 1.2k | 1 个月前 | MIT |
| Canvas Design 视觉艺术创作技能 | 42 · 不推荐 | ★ 3.1k | 8 个月前 | MIT |
README 将其与直接使用 Excalidraw 对比：Excalidraw 需要空白画布手动画图，而本技能从自然语言出发，自动选型、自动排布、自动生成动画，并交付托管链接；但它是构建在 Excalidraw 之上的技能，并非替代品。动画能力基于 dai-shi 的开源库 excalidraw-animate。
FollowSkills 如何评估这个 Skill？
证据显示最小权限取向：默认写入 /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）。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →