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

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

本文参考 GitHub Awesome Copilot 的 excalidraw-diagram-generator Skill，结合实战经验，教你如何用 AI 一键生成手绘风格的技术图表。

作为程序员，我们经常需要绘制技术架构图、流程图、状态图，用于文档撰写、方案汇报或视频创作。以往要么用复杂工具调整样式，要么纯手搓手绘，耗时又费力。

传统绘图的问题：

脱离工作流：图表通常在外部工具中创建，以静态图片形式存入 Wiki 或 PPT，与代码和设计决策分离
易于过时：当系统变更时，更新图表变得困难，导致图表迅速失去准确性
耗时费力：一张复杂的架构图可能需要 30 分钟以上才能画好

解决方案：Excalidraw + AI Skills，实现“AI 生成框架 + 人工优化”的高效模式！

Excalidraw 是一款在 GitHub 上拥有 115K+ Star 的开源项目，主打手绘风格图形绘制。

核心特性

特性说明 手绘风格 线条、图形具有手写质感，适用于技术文档、视频素材和团队沟通 丰富素材库 社区提供大量预设素材，可直接加载使用 开源免费 采用 MIT 协议，支持个人和商业用途 多平台适配 支持在线使用、离线部署、npm 包集成，具备 PWA 离线功能 协作与导出 支持多人实时协作、端到端加密，可导出 PNG、SVG 等格式

在线体验

直接访问 https://excalidraw.com，支持中文界面，无需安装。

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 中使用

安装 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 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 画一个安全事件处置流程图，包含以下步骤：

安全事件发现
初步评估（判断是否为真实安全事件）
如果是误报，结束流程
如果是真实事件，启动应急响应
进行事件分析
实施处置措施
恢复系统
总结报告
AI 生成效果：
- 自动生成流程图框架
- 包含判断节点（菱形）
- 流程线清晰，标注 Yes/No 分支
人工微调：
- 调整节点颜色（红色表示高危环节）
- 添加图标增强可读性
- 调整布局使流程更紧凑
案例 2：微服务架构图

需求描述：
```
生成一个电商系统架构图，包含以下组件：
```

前端 Web 应用
API 网关（Kong/Nginx）
用户服务、商品服务、订单服务
MySQL 数据库（主从架构）
Redis 缓存集群
消息队列（RabbitMQ）

关系说明：

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

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

生成要点：

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

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

需求描述：

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

生成内容包含：

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

1. 明确性

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

❌ 不好的示例：

画一个系统架构图

✅ 好的示例：

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

2. 结构性

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

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

接入层：API 网关、负载均衡
服务层：用户服务、订单服务、商品服务
数据层：MySQL、Redis、Elasticsearch 提供足够的逻辑关系和依赖说明。
3. 上下文完整
```
关系说明：
```
用户服务调用订单服务查询用户订单
商品服务依赖 Redis 缓存商品信息
订单服务异步写入 MySQL，通过消息队列解耦

7.1 批量生成配图

对于技术博客或文档，可以批量生成系列配图：

请为我生成以下 5 张图：

系统整体架构图
用户注册流程图
订单处理时序图
数据库 ER 图
部署拓扑图

风格要求：统一使用蓝色系，手绘风格

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 (

); }

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 文档