告别手动拖框画图！excalidraw-diagram-skill 自动产出流程图、系统架构、ER 图

互动交流
1

一、项目定位

excalidraw-diagram-skill是专门适配 Claude Code / Cursor 的AI绘图技能，依托开源手绘白板Excalidraw，纯自然语言描述自动生成结构化手绘图表，输出原生.excalidraw可编辑源文件+高清PNG截图。
解决写技术文档、做PPT汇报、梳理系统架构时手动拖拽画布耗时、排版杂乱的痛点，完整融入你的Vibe Coding+PPT制作工作流。

二、核心亮点

1. 支持全品类技术图表，覆盖90%开发场景

内置专业绘图逻辑，可一次性生成主流图纸：

  • 系统架构图、前后端分层数据流图
  • 业务流程图、决策分支、泳道跨角色流程
  • ER实体关系图、UML类图、时序图
  • 思维导图、产品需求脑图
  • 接口调用链路、CI/CD流水线、分布式部署拓扑
    AI会自动分层分组、合理排布节点，不会出现元素重叠、连线混乱问题。

2. 双文件交付，兼顾编辑与交付

每次生成同步输出两份文件：

  1. .excalidraw JSON源文件：导入官网/本地白板自由拖拽修改、增删节点、调整配色，支持团队协作；
  2. 高清PNG图片：直接插入PPT、Markdown文档、掘金/知乎文章、README。

3. 专业技术向优化，区别普通简易绘图

  • 支持嵌入真实代码片段、JSON示例作为图表注释，贴合开发文档需求；
  • 语义化配色：服务层、数据库、第三方组件自动区分色彩；
  • 智能布局：一对多发散、聚合汇总、时序横向排布等专业构图逻辑；
  • 内置渲染校验：基于Playwright自动渲染预览，排查文字截断、线条错位问题。

4. 极简安装，全局/项目双模式部署

一键安装命令：

npx playbooks add skill coleam00/excalidraw-diagram-skill --skill excalidraw-diagram-skill

也可手动克隆仓库放入项目.claude/skills目录，支持单项目独立使用或全局所有工程共用。

5. 和整套PPT技能完美联动（核心配套价值）

完整幻灯片制作链路：

  1. theme-factory：统一整套品牌配色字体规范；
  2. excalidraw-diagram-skill：生成架构/流程手绘插图；
  3. canvas-design：制作PPT封面、章节视觉图；
  4. open-slide / ppt-master-skill：整合所有图表生成完整演示文稿；
    手绘风格图表柔和简约，不会破坏PPT整体高级质感，技术分享、架构评审汇报首选配图。

三、标准使用示例（直接发给Cursor/Claude）

使用excalidraw-diagram-skill绘制一套前后端SaaS系统架构图：
分层包含前端Next页面、API网关、业务服务、MySQL数据库、Redis缓存、对象存储、第三方支付接口；标注完整数据流走向，手绘简约风格，生成可编辑excalidraw文件与高清PNG，用于技术分享PPT。

四、适用场景

  1. 技术PPT汇报：架构分享、项目复盘、方案评审，手绘图表比死板矢量图更亲和易懂；
  2. 开源项目文档：README流程图、系统设计文档、接口说明；
  3. 产品梳理：业务流程、用户路径、需求脑图；
  4. 团队协作白板：远程会议快速梳理业务逻辑，生成图表同步分享；
  5. 教学课件：讲解算法、网络请求、大模型RAG流程等原理配图。