运维养龙虾--用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 什么是 Skill？

Skill 是 GitHub Copilot 的扩展能力，通过自然语言指令让 AI 执行特定任务。excalidraw-diagram-generator 是 GitHub 官方技能库中的一个 Skill，能让 AI 瞬间把你的文字描述变成漂亮的手绘图。

3.2 Skill 的核心能力

• 自然语言绘图：用中文或英文描述需求，AI 自动生成 Excalidraw 图形元素
• 支持多种图表类型：流程图、架构图、时序图、思维导图、系统拓扑图等
• 输出标准格式 ：生成 .excalidraw JSON 文件，可直接在 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 中使用

1. 安装 Skill

   # 在 Claude Code 中输入
   /skill add excalidraw-diagram-generator

2. 唤醒 Skill

   /excalidraw-diagram

3. 输入指令描述你的需求

   画一个微服务架构图，包含 API 网关、用户服务、订单服务、
   商品服务、MySQL 数据库和 Redis 缓存

4.2 在 VS Code + GitHub Copilot 中使用

1. 配置 MCP 服务器

   在 .vscode/mcp.json 中添加

   {
     "servers": {
       "excalidraw": {
         "type": "http",
         "url": "https://mcp.excalidraw.com"
       }
     }
   }

2. 启用 Agent 模式

   • 打开 GitHub Copilot Chat
   • 切换到 Agent 模式

3. 使用 Skill

   /excalidraw-mcp-diagramming create me an azure diagram of 
   an azure frontdoor setup flow from user to afd to backend

4.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
    ├── data-flow-diagram-template.excalidraw
    └── relationship-template.excalidraw

🚀 支持的图表类型

• 📊 流程图 - 顺序流程、工作流、决策树
• 🔗 关系图 - 实体关系、系统组件
• 🧠 思维导图 - 概念层次、头脑风暴
• 🏗️ 架构图 - 系统设计、模块交互
• 📈 数据流图 (DFD)
• 🏊 泳道图 - 跨职能工作流
• 📦 类图 - 面向对象设计
• 📝 序列图 - 时序交互
• 🔍 ER图 - 数据库实体关系

---

五、实战案例

案例 1：安全事件处置流程图

需求描述：

/excalidraw-diagram
画一个安全事件处置流程图，包含以下步骤：
1. 安全事件发现
2. 初步评估（判断是否为真实安全事件）
3. 如果是误报，结束流程
4. 如果是真实事件，启动应急响应
5. 进行事件分析
6. 实施处置措施
7. 恢复系统
8. 总结报告

AI 生成效果：

• 自动生成流程图框架
• 包含判断节点（菱形）
• 流程线清晰，标注 Yes/No 分支

人工微调：

• 调整节点颜色（红色表示高危环节）
• 添加图标增强可读性
• 调整布局使流程更紧凑

案例 2：微服务架构图

需求描述：

生成一个电商系统架构图，包含以下组件：
- 前端 Web 应用
- API 网关（Kong/Nginx）
- 用户服务、商品服务、订单服务
- MySQL 数据库（主从架构）
- Redis 缓存集群
- 消息队列（RabbitMQ）

关系说明：
- 用户服务与订单服务之间有调用关系
- 商品服务依赖 Redis 缓存
- 订单服务通过消息队列异步处理

布局方式：从左到右的横向分层排列

生成要点：

• 使用不同颜色区分服务层、数据层、缓存层
• 箭头表示调用方向和数据流向
• 标注服务间的依赖

案例 3：OAuth 2.0 PKCE 授权流程时序图

需求描述：

创建一个 OAuth 2.0 PKCE 流程的时序图，
展示浏览器、API 网关和 Entra ID 认证服务器之间的交互

生成内容包含：

1. code_verifier / code_challenge 的生成
2. 授权请求（Authorization Request）
3. 令牌交换（Token Exchange）
4. API 网关的令牌验证步骤
5. 安全边界标注

---

六、高效 AI 指令的三大特征

1. 明确性

避免模糊描述，明确组件和关系。

❌ 不好的示例：

画一个系统架构图

✅ 好的示例：

画一个电商系统架构图，包含以下组件：
前端 Web 应用、API 网关、用户服务、商品服务、
订单服务、MySQL 数据库和 Redis 缓存

2. 结构性

指定布局方式和层次结构。

布局方式为从左到右的横向排列，分为三层：
- 接入层：API 网关、负载均衡
- 服务层：用户服务、订单服务、商品服务
- 数据层：MySQL、Redis、Elasticsearch

3. 上下文完整

提供足够的逻辑关系和依赖说明。

关系说明：
- 用户服务调用订单服务查询用户订单
- 商品服务依赖 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/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw />
    </div>
  );
}

8.3 AI Excalidraw 开源项目

如果你想构建自己的 AI 绘图工具，可以参考 AI Excalidraw 开源项目：

• GitHub ：https://github.com/co-pine/ai-excalidraw
• 在线体验 ：https://www.lzkz.top/tool/excalidraw

技术栈：

• React 19 + TypeScript + Vite
• Tailwind CSS v4
• Excalidraw 绘图引擎
• 支持 OpenAI、智谱 AI、阿里百炼等 API

---

九、安全与隐私

数据安全建议

• 敏感架构图：建议部署本地 LLM（如 Mistral、Llama3），避免数据上传至第三方
• 本地存储：使用本地部署的 Excalidraw 实例，数据保存在浏览器 localStorage
• 企业环境：配置私有 MCP 服务器，确保数据不流出内网

---

十、总结

Excalidraw 结合 AI Skills 解决了手绘技术图耗时长的痛点：

对比项	传统手绘	AI + Excalidraw
绘制时间	30+ 分钟	1-2 分钟
修改成本	高（需重画）	低（AI 重新生成）
风格一致性	依赖个人技能	自动统一
协作效率	低	高（实时协作）

核心价值：

• 将可视化表达变为通用能力，降低绘图门槛
• 使图表更容易在设计阶段创建和更新
• 从"需要后期更新的静态文档"转变为"实际工作完成方式的一部分"

推荐使用场景：

• 技术设计文档配图
• 架构评审会议
• 技术博客/视频创作
• 团队协作白板

---

参考资源

• Excalidraw 官网
• GitHub Awesome Copilot - excalidraw-diagram-generator
• AI Excalidraw 开源项目
• Excalidraw MCP 文档