运维养龙虾--用Excalidraw Skill 手绘各种配图：从安装 Skill 到批量生成配图

本文参考 GitHub Awesome Copilot 的 excalidraw-diagram-generator Skill结合实战经验教你如何用 AI 一键生成手绘风格的技术图表。一、前言为什么需要 AI 绘图作为程序员我们经常需要绘制技术架构图、流程图、状态图用于文档撰写、方案汇报或视频创作。以往要么用复杂工具调整样式要么纯手搓手绘耗时又费力。传统绘图的问题脱离工作流图表通常在外部工具中创建以静态图片形式存入 Wiki 或 PPT与代码和设计决策分离易于过时当系统变更时更新图表变得困难导致图表迅速失去准确性耗时费力一张复杂的架构图可能需要 30 分钟以上才能画好解决方案Excalidraw AI Skills实现AI 生成框架 人工优化的高效模式二、Excalidraw 简介Excalidraw 是一款在 GitHub 上拥有 115K Star 的开源项目主打手绘风格图形绘制。核心特性特性说明手绘风格线条、图形具有手写质感适用于技术文档、视频素材和团队沟通丰富素材库社区提供大量预设素材可直接加载使用开源免费采用 MIT 协议支持个人和商业用途多平台适配支持在线使用、离线部署、npm 包集成具备 PWA 离线功能协作与导出支持多人实时协作、端到端加密可导出 PNG、SVG 等格式在线体验直接访问 https://excalidraw.com支持中文界面无需安装。三、excalidraw-diagram-generator Skill 详解3.1 什么是 SkillSkill 是 GitHub Copilot 的扩展能力通过自然语言指令让 AI 执行特定任务。excalidraw-diagram-generator是 GitHub 官方技能库中的一个 Skill能让 AI 瞬间把你的文字描述变成漂亮的手绘图。3.2 Skill 的核心能力自然语言绘图用中文或英文描述需求AI 自动生成 Excalidraw 图形元素支持多种图表类型流程图、架构图、时序图、思维导图、系统拓扑图等输出标准格式生成.excalidrawJSON 文件可直接在 Excalidraw 中打开编辑流式响应AI 生成过程中逐元素解析并立即绘制体验流畅3.3 技术实现原理用户输入自然语言描述 ↓ AI 服务GPT-4/Claude 等处理 ↓ 生成 Excalidraw JSON 格式数据 ↓ 渲染到画布 / 保存为 .excalidraw 文件Excalidraw JSON 结构示例[ { type: rectangle, x: 100, y: 100, width: 120, height: 60, text: Web Server }, { type: arrow, points: [[220, 130], [280, 130]], startArrowhead: null, endArrowhead: arrow } ]四、安装与配置4.1 在 Claude Code 中使用安装 Skill# 在 Claude Code 中输入 /skill add excalidraw-diagram-generator唤醒 Skill/excalidraw-diagram输入指令描述你的需求画一个微服务架构图包含 API 网关、用户服务、订单服务、 商品服务、MySQL 数据库和 Redis 缓存4.2 在 VS Code GitHub Copilot 中使用配置 MCP 服务器在.vscode/mcp.json中添加{ servers: { excalidraw: { type: http, url: https://mcp.excalidraw.com } } }启用 Agent 模式打开 GitHub Copilot Chat切换到 Agent 模式使用 Skill/excalidraw-mcp-diagramming create me an azure diagram of an azure frontdoor setup flow from user to afd to backend4.3 在workbuddy安装/skill add excalidraw-diagram-generator✅ 安装成功 excalidraw-diagram-generator 已安装项目详情来源github/awesome-copilot(11.3K installs)安装位置~/.workbuddy/skills/excalidraw-diagram-generator/安全状态✅ SAFE - 通过安全扫描 文件清单excalidraw-diagram-generator/ ├── SKILL.md (23KB) # 技能定义和使用说明 ├── scripts/ │ ├── add-arrow.py (9.5KB) # 添加箭头连接线 │ ├── add-icon-to-diagram.py (13KB) # 添加图标 │ └── split-excalidraw-library.py (5.4KB) # 分割图标库 └── templates/ ├── flowchart-template.excalidraw ├── er-diagram-template.excalidraw ├── sequence-diagram-template.excalidraw ├── mindmap-template.excalidraw ├── class-diagram-template.excalidraw ├── business-flow-swimlane-template.excalidraw ├── />案例 2微服务架构图需求描述生成一个电商系统架构图包含以下组件 - 前端 Web 应用 - API 网关Kong/Nginx - 用户服务、商品服务、订单服务 - MySQL 数据库主从架构 - Redis 缓存集群 - 消息队列RabbitMQ 关系说明 - 用户服务与订单服务之间有调用关系 - 商品服务依赖 Redis 缓存 - 订单服务通过消息队列异步处理 布局方式从左到右的横向分层排列生成要点使用不同颜色区分服务层、数据层、缓存层箭头表示调用方向和数据流向标注服务间的依赖案例 3OAuth 2.0 PKCE 授权流程时序图需求描述创建一个 OAuth 2.0 PKCE 流程的时序图 展示浏览器、API 网关和 Entra ID 认证服务器之间的交互生成内容包含code_verifier/code_challenge的生成授权请求Authorization Request令牌交换Token ExchangeAPI 网关的令牌验证步骤安全边界标注六、高效 AI 指令的三大特征1. 明确性避免模糊描述明确组件和关系。❌不好的示例画一个系统架构图✅好的示例画一个电商系统架构图包含以下组件 前端 Web 应用、API 网关、用户服务、商品服务、 订单服务、MySQL 数据库和 Redis 缓存2. 结构性指定布局方式和层次结构。布局方式为从左到右的横向排列分为三层 - 接入层API 网关、负载均衡 - 服务层用户服务、订单服务、商品服务 - 数据层MySQL、Redis、Elasticsearch3. 上下文完整提供足够的逻辑关系和依赖说明。关系说明 - 用户服务调用订单服务查询用户订单 - 商品服务依赖 Redis 缓存商品信息 - 订单服务异步写入 MySQL通过消息队列解耦七、进阶技巧7.1 批量生成配图对于技术博客或文档可以批量生成系列配图请为我生成以下 5 张图 1. 系统整体架构图 2. 用户注册流程图 3. 订单处理时序图 4. 数据库 ER 图 5. 部署拓扑图 风格要求统一使用蓝色系手绘风格7.2 迭代优化AI 生成的图表可能需要多次调整// 第一轮生成基础框架 画一个 Kubernetes 集群架构图 // 第二轮添加细节 在刚才的图上添加 Ingress Controller 和 Cert-Manager // 第三轮调整样式 将所有 Pod 节点改为圆角矩形使用绿色系7.3 结合代码生成图表从代码注释或 API 定义自动生成图表根据以下 API 端点生成调用流程图 GET /api/users - 获取用户列表 POST /api/users - 创建用户 GET /api/orders - 获取订单列表 POST /api/orders - 创建订单八、本地部署与二次开发8.1 Docker 部署# 使用官方镜像 docker run -d -p 3000:80 excalidraw/excalidraw:latest # 或使用 Sealos 应用商店一键部署8.2 npm 集成到 React 项目npm install excalidraw/excalidraw # 或 yarn add excalidraw/excalidrawimport { Excalidraw } from excalidraw/excalidraw; function App() { return ( div style{{ height: 500px }} Excalidraw / /div ); }8.3 AI Excalidraw 开源项目如果你想构建自己的 AI 绘图工具可以参考AI Excalidraw开源项目GitHubhttps://github.com/co-pine/ai-excalidraw在线体验https://www.lzkz.top/tool/excalidraw技术栈React 19 TypeScript ViteTailwind CSS v4Excalidraw 绘图引擎支持 OpenAI、智谱 AI、阿里百炼等 API九、安全与隐私数据安全建议敏感架构图建议部署本地 LLM如 Mistral、Llama3避免数据上传至第三方本地存储使用本地部署的 Excalidraw 实例数据保存在浏览器 localStorage企业环境配置私有 MCP 服务器确保数据不流出内网十、总结Excalidraw 结合 AI Skills 解决了手绘技术图耗时长的痛点对比项传统手绘AI Excalidraw绘制时间30 分钟1-2 分钟修改成本高需重画低AI 重新生成风格一致性依赖个人技能自动统一协作效率低高实时协作核心价值将可视化表达变为通用能力降低绘图门槛使图表更容易在设计阶段创建和更新从需要后期更新的静态文档转变为实际工作完成方式的一部分推荐使用场景技术设计文档配图架构评审会议技术博客/视频创作团队协作白板参考资源Excalidraw 官网GitHub Awesome Copilot - excalidraw-diagram-generatorAI Excalidraw 开源项目Excalidraw MCP 文档