Claude Code 画图神器来了！随口一句话，自动生成 Excalidraw 图表

Claude Code 画图神器来了！随口一句话，自动生成 Excalidraw 图表

用 Claude Code 写代码时，你有没有遇到过这种情况——想画个系统架构图、流程图，结果只能靠脑子里的”手绘草图”，或者花半小时在 Excalidraw 官网手动拖拽？

现在，这个痛点有解了。

今天推荐一个让我眼前一亮的新 Skill——excalidraw-diagram，装上之后直接对 Claude Code 说一句话，它就能帮你生成完整的 Excalidraw 图表 JSON 文件，还能自动渲染预览、验证布局，一键出图。

做了什么

这个 Skill 的核心功能有三个：

自然语言生成图表。你只需要描述你想要的图——比如”画一个微服务架构图，展示 API Gateway、认证服务、用户服务之间的调用关系”——Claude 就会自动拆解概念、规划布局，生成 Excalidraw JSON 文件。不再是简单的方块+箭头，而是有语义、有层次的视觉论证。

内置渲染验证管道。这是最打动我的地方。传统 AI 画图最大的问题是什么？生成完你不知道效果对不对。这个 Skill 集成了 Playwright 管道，生成 JSON 后会自动渲染成 PNG，然后拿渲染结果对照你的原始意图做视觉审查——布局歪了、元素重叠、颜色不对，都能被发现并修复。相当于给 AI 加了一个”先看效果再交付”的 QA 环节。

品牌色自定义。一个 color-palette.md 文件，改一处颜色，整个图表体系自动同步。不需要每次生成后手动调色，输出风格始终统一。

怎么用

安装一行命令：

npx skills add https://github.com/coleam00/excalidraw-diagram-skill --skill excalidraw-diagram

之后在 Claude Code 里直接描述需求就行，比如：

“创建一个 Excalidraw 图表，展示 AG-UI 协议从 AI Agent 到前端 UI 的事件流”

Skill 会自动处理概念映射、布局、JSON 生成、渲染和视觉验证的全部流程。

适合谁

写技术文档的开发者：API 文档、架构说明、README 配图，告别”文字够用但图不够清晰”的时代。

做技术分享的工程师：系统设计、流程讲解，配图不再是短板。

需要快速原型验证的产品经理：把想法快速可视化，一句话出图。

总结一下

excalidraw-diagram 解决的不是”AI 能画图”的问题，而是”AI 画的图真的能用”的问题。它把 AI 生成的不确定性，通过强制渲染验证管道降到了最低。

GitHub ⭐ 2.8K，周安装 1.6K，还在快速增长。推荐装上试试，说不定哪天就是那个让你”多快好省”出图的关键工具。

安装地址：https://github.com/coleam00/excalidraw-diagram-skill

GitHub: https://github.com/coleam00/excalidraw-diagram-skill