🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install github/awesome-copilot/excalidraw-diagram-generator

💡 提示：需要 Node.js 和 NPM

Excalidraw 图表生成器

这是一个根据自然语言描述生成 Excalidraw 格式图表的技能。该技能有助于创建流程、系统、关系和想法的可视化表示，无需手动绘制。

何时使用该技能

当用户提出以下请求时使用该技能：

“创建一个图表，展示…”
“为…制作一个流程图”
“将…的过程可视化”
“画出…的系统架构”
“生成一个关于…的思维导图”
“创建一个关于…的 Excalidraw 文件”
“展示…之间的关系”
“绘制…的工作流程图”

支持的图表类型：

📊 流程图：顺序流程、工作流程、决策树
🔗 关系图：实体关系、系统组件、依赖关系
🧠 思维导图：概念层次结构、头脑风暴结果、主题组织
🏗️ 架构图：系统设计、模块交互、数据流
📈 数据流图：数据流可视化、数据转换过程
🏊 业务流程图（泳道图）：跨职能工作流、基于角色的流程
📦 类图：面向对象设计、类结构和关系
🔄 序列图：对象随时间推移的交互、消息流
🗃️ 实体关系图：数据库实体关系、数据模型

前置条件

需要可视化的内容的清晰描述
识别关键实体、步骤或概念
理解元素之间的关系或流程

分步工作流程

第 1 步：理解请求

分析用户的描述以确定：

图表类型（流程图、关系图、思维导图、架构图）
关键元素（实体、步骤、概念）
关系（流程、连接、层次结构）
复杂度（元素数量）

第 2 步：选择合适的图表类型

用户意图	图表类型	示例关键词
流程、步骤、程序	流程图	“工作流”、”过程”、”步骤”、”程序”
连接、依赖、关联	关系图	“关系”、”连接”、”依赖”、”结构”
概念层次、头脑风暴	思维导图	“思维导图”、”概念”、”想法”、”分解”
系统设计、组件	架构图	“架构”、”系统”、”组件”、”模块”
数据流、转换过程	数据流图	“数据流”、”数据处理”、”数据转换”
跨职能流程、角色职责	业务流程图（泳道图）	“业务流程”、”泳道”、”角色”、”职责”
面向对象设计、类结构	类图	“类”、”继承”、”OOP”、”对象模型”
交互序列、消息流	序列图	“序列”、”交互”、”消息”、”时间线”
数据库设计、实体关系	实体关系图	“数据库”、”实体”、”关系”、”数据模型”

第 3 步：提取结构化信息

对于流程图：

顺序步骤列表
决策点（如果有）
开始和结束点

对于关系图：

实体/节点（名称 + 可选描述）
实体之间的关系（从 → 到，带标签）

对于思维导图：

中心主题
主要分支（建议 3-6 个）
每个分支的子主题（可选）

对于数据流图：

数据源和目标（外部实体）
处理过程（数据转换）
数据存储（数据库、文件）
数据流（箭头表示数据从左到右或从左上到右下的移动）
重要：不表示处理顺序，只表示数据流向

对于业务流程图（泳道图）：

参与者/角色（部门、系统、人员）- 显示为标题列
流程泳道（每个参与者下方的垂直泳道）
流程框（每个泳道内的活动）
流程箭头（连接流程框，包括跨泳道的交接）

对于类图：

带名称的类
带可见性的属性（+， -， #）
带可见性和参数的方法
关系：继承（实线 + 白色三角形）、实现（虚线 + 白色三角形）、关联（实线）、依赖（虚线）、聚合（实线 + 白色菱形）、组合（实线 + 实心菱形）
多重性表示（1， 0..1， 1..*， *）

对于序列图：

对象/参与者（水平排列在顶部）
生命线（从每个对象垂直向下的线）
消息（生命线之间的水平箭头）
同步消息（实线箭头）、异步消息（虚线箭头）
返回值（虚线箭头）
激活条（执行期间生命线上的矩形）
时间从上到下流动

对于实体关系图：

实体（带实体名称的矩形）
属性（列在实体内部）
主键（带下划线或标记为 PK）
外键（标记为 FK）
关系（连接实体的线）
基数：1:1（一对一）、1:N（一对多）、N:M（多对多）
用于多对多关系的连接/关联实体（虚线矩形）

第 4 步：生成 Excalidraw JSON

使用适当的元素创建 .excalidraw 文件：

可用的元素类型：

rectangle（矩形）：用于实体、步骤、概念的方框
ellipse（椭圆）：用于强调的替代形状
diamond（菱形）：决策点
arrow（箭头）：方向性连接
text（文本）：标签和注释

要设置的关键属性：

位置：x、y 坐标
尺寸：width（宽度）、height（高度）
样式：strokeColor（描边颜色）、backgroundColor（背景颜色）、fillStyle（填充样式）
字体：fontFamily: 5（Excalifont – 所有文本元素必需）
文本：用于标签的内嵌文本
连接：箭头的 points（点）数组

重要：所有文本元素必须使用 fontFamily: 5（Excalifont）以确保视觉外观一致。

第 5 步：格式化输出

构建完整的 Excalidraw 文件结构：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    // 图表元素数组
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": 20
  },
  "files": {}
}

第 6 步：保存并提供说明

保存为 <描述性名称>.excalidraw
告知用户如何打开：
- 访问 https://excalidraw.com
- 点击”打开”或拖放文件
- 或使用 Excalidraw VS Code 扩展

最佳实践

元素数量指南

图表类型	建议数量	最大数量
流程图步骤	3-10	15
关系图实体	3-8	12
思维导图分支	4-6	8
思维导图每个分支的子主题	2-4	6

布局技巧

起始位置：将重要元素居中，使用一致的间距
间距：
- 水平间距：元素之间 200-300px
- 垂直间距：行之间 100-150px
颜色：使用一致的配色方案
- 主要元素：浅蓝色 (#a5d8ff)
- 次要元素：浅绿色 (#b2f2bb)
- 重要/中心元素：黄色 (#ffd43b)
- 警报/警告：浅红色 (#ffc9c9)
文本大小：16-24px 以确保可读性
字体：所有文本元素始终使用 fontFamily: 5（Excalifont）
箭头样式：简单流程使用直线箭头，复杂关系使用曲线箭头

复杂度管理

如果用户请求包含过多元素：

建议拆分为多个图表
首先关注主要元素
提供创建详细子图表的选项

示例回复：

"您的请求包含 15 个组件。为了清晰起见，我建议：
1. 先创建高级架构图（6 个主要组件）
2. 为每个子系统创建详细图表

您希望我先从高级视图开始吗？"

示例提示和响应

示例 1：简单流程图

用户：“创建一个用户注册的流程图”

助手生成：

提取步骤：”输入邮箱” → “验证邮箱” → “设置密码” → “完成”
创建包含 4 个矩形和 3 个箭头的流程图
保存为 user-registration-flow.excalidraw

示例 2：关系图

用户：“画出用户、帖子和评论实体之间的关系图”

助手生成：

实体：用户、帖子、评论
关系：用户 → 帖子 (“创建”)，用户 → 评论 (“撰写”)，帖子 → 评论 (“包含”)
保存为 user-content-relationships.excalidraw

示例 3：思维导图

用户：“关于机器学习概念的思维导图”

助手生成：

中心：”机器学习”
分支：监督学习、无监督学习、强化学习、深度学习
每个分支下的子主题
保存为 machine-learning-mindmap.excalidraw

故障排除

问题	解决方案
元素重叠	增加坐标之间的间距
文本不适合框内	增加框宽或减小字体大小
元素过多	拆分为多个图表
布局不清晰	使用网格布局（行/列）或径向布局（思维导图）
颜色不一致	根据元素类型预先定义调色板

高级技巧

网格布局（适用于关系图）

const columns = Math.ceil(Math.sqrt(entityCount));
const x = startX + (index % columns) * horizontalGap;
const y = startY + Math.floor(index / columns) * verticalGap;

径向布局（适用于思维导图）

const angle = (2 * Math.PI * index) / branchCount;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);

自动生成 ID

使用时间戳 + 随机字符串生成唯一 ID：

const id = Date.now().toString(36) + Math.random().toString(36).substr(2);

输出格式

始终提供：

✅ 完整的 .excalidraw JSON 文件
📊 创建内容的摘要
📝 元素数量
💡 打开/编辑的说明

示例摘要：

已创建：user-workflow.excalidraw
类型：流程图
元素：7 个矩形、6 个箭头、1 个标题文本
总计：14 个元素

查看方式：
1. 访问 https://excalidraw.com
2. 将 user-workflow.excalidraw 拖放到页面
3. 或在 Excalidraw VS Code 扩展中使用文件 → 打开

验证清单

在交付图表前：

所有元素都有唯一的 ID
坐标确保无重叠
文本可读（字体大小 16+）
所有文本元素都使用 fontFamily: 5（Excalifont）
箭头逻辑连接正确
颜色遵循一致方案
文件是有效的 JSON
元素数量合理（为了清晰度 <20）

图标库（可选增强功能）

对于专业图表（例如，AWS/GCP/Azure 架构图），您可以使用 Excalidraw 的预制图标库。这提供了专业的标准化图标，而非基本形状。

当用户请求图标时

如果用户要求绘制 AWS/云架构图或提到想要使用特定图标：

检查库是否存在：查找 libraries/<库名称>/reference.md
如果库存在：继续使用图标（参见下面的 AI 助手工作流程）

如果库不存在：回复设置说明：

要使用 [AWS/GCP/Azure/等] 架构图标，请按照以下步骤操作：

1. 访问 https://libraries.excalidraw.com/
2. 搜索 "[AWS Architecture Icons/etc.]" 并下载 .excalidrawlib 文件
3. 创建目录：skills/excalidraw-diagram-generator/libraries/[图标集名称]/
4. 将下载的文件放入该目录
5. 运行拆分脚本：
   python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[图标集名称]/

这会将库拆分为单独的图标文件，以便高效使用。
设置完成后，我就可以使用实际的 AWS/云图标创建您的图表。

或者，我现在可以使用简单形状（矩形、椭圆）创建图表，
您可以稍后在 Excalidraw 中手动用图标替换它们。

用户设置说明（详细）

第 1 步：创建库目录

mkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons

第 2 步：下载库

访问：https://libraries.excalidraw.com/
搜索您想要的图标集（例如，”AWS Architecture Icons”）
点击下载以获取 .excalidrawlib 文件
示例类别（可用性因网站而异；请在网站上确认）：
- 云服务图标
- 用户界面/材质图标
- 流程图符号

第 3 步：放置库文件

将下载的文件重命名为与目录名匹配（例如，aws-architecture-icons.excalidrawlib）
将其移动到第 1 步创建的目录中

第 4 步：运行拆分脚本

python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/

第 5 步：验证设置
运行脚本后，验证以下结构是否存在：

skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/
  aws-architecture-icons.excalidrawlib  （原始文件）
  reference.md                          （生成的 - 图标查找表）
  icons/                                （生成的 - 单个图标文件）
    API-Gateway.json
    CloudFront.json
    EC2.json
    Lambda.json
    RDS.json
    S3.json
    ...

AI 助手工作流程

当图标库在 libraries/ 中可用时：

推荐方法：使用 Python 脚本（高效且可靠）

代码库包含自动处理图标集成的 Python 脚本：

创建基础图表结构：
- 创建包含基本布局（标题、方框、区域）的 .excalidraw 文件
- 这建立了画布和整体结构

使用 Python 脚本添加图标：

python skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \
  <图表路径> <图标名称> <x坐标> <y坐标> [--label "文本"] [--library-path 路径]

默认启用通过 .excalidraw.edit 进行编辑以避免覆盖问题；传递 --no-use-edit-suffix 可禁用。

示例：

# 在位置 (400, 300) 添加带标签的 EC2 图标
python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Web Server"

# 在位置 (200, 150) 添加 VPC 图标
python scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150

# 从不同库添加图标
python scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \
  --library-path libraries/gcp-icons --label "API Server"

添加连接箭头：

python skills/excalidraw-diagram-generator/scripts/add-arrow.py \
  <图表路径> <起点x> <起点y> <终点x> <终点y> [--label "文本"] [--style solid|dashed|dotted] [--color 十六进制]

默认启用通过 .excalidraw.edit 进行编辑以避免覆盖问题；传递 --no-use-edit-suffix 可禁用。

示例：

# 从 (300, 250) 到 (500, 300) 的简单箭头
python scripts/add-arrow.py diagram.excalidraw 300 250 500 300

# 带标签的箭头
python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS"

# 带自定义颜色的虚线箭头
python scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"

工作流程总结：

# 第 1 步：创建带有标题和结构的基础图表
# （创建包含初始元素的 .excalidraw 文件）

# 第 2 步：添加带标签的图标
python scripts/add-icon-to-diagram.py my-diagram.excalidraw "Internet-gateway" 200 150 --label "Internet Gateway"
python scripts/add-icon-to-diagram.py my-diagram.excalidraw VPC 250 250
python scripts/add-icon-to-diagram.py my-diagram.excalidraw ELB 350 300 --label "Load Balancer"
python scripts/add-icon-to-diagram.py my-diagram.excalidraw EC2 450 350 --label "EC2 Instance"
python scripts/add-icon-to-diagram.py my-diagram.excalidraw RDS 550 400 --label "Database"

# 第 3 步：添加连接箭头
python scripts/add-arrow.py my-diagram.excalidraw 250 200 300 250  # Internet → VPC
python scripts/add-arrow.py my-diagram.excalidraw 300 300 400 300  # VPC → ELB
python scripts/add-arrow.py my-diagram.excalidraw 400 330 500 350  # ELB → EC2
python scripts/add-arrow.py my-diagram.excalidraw 500 380 600 400  # EC2 → RDS

Python 脚本方法的好处：

✅ 不消耗令牌：图标 JSON 数据（每个 200-1000 行）永远不会进入 AI 上下文
✅ 准确转换：坐标计算确定性地处理
✅ ID 管理：自动生成 UUID 防止冲突
✅ 可靠：无坐标计算错误或 ID 冲突的风险
✅ 快速：直接文件操作，无解析开销
✅ 可重用：适用于您提供的任何 Excalidraw 库

备选方案：手动图标集成（不推荐）

仅当 Python 脚本不可用时使用：

检查库：

列出目录：skills/excalidraw-diagram-generator/libraries/
查找包含 reference.md 文件的子目录

读取 reference.md：

打开：libraries/<库名称>/reference.md
此文件较小（通常 <300 行），列出了所有可用图标

查找相关图标：

在 reference.md 表格中搜索与图表需求匹配的图标名称
示例：对于需要 EC2、S3、Lambda 的 AWS 图 → 在表格中查找 "EC2"、"S3"、"Lambda"

加载特定图标数据（警告：大文件）：

仅读取需要的图标文件：
- libraries/aws-architecture-icons/icons/EC2.json（200-300 行）
- libraries/aws-architecture-icons/icons/S3.json（200-300 行）
- libraries/aws-architecture-icons/icons/Lambda.json（200-300 行）
注意：每个图标文件 200-1000 行 - 这会消耗大量令牌

提取和转换元素：

每个图标 JSON 包含一个 "elements" 数组
计算边界框 (min_x， min_y， max_x， max_y)
为所有 x/y 坐标应用偏移量
为所有元素生成新的唯一 ID
更新 groupIds 引用
将转换后的元素复制到您的图表中

定位图标并添加连接：

调整 x/y 坐标以正确定位图标
更新 ID 以确保整个图表的唯一性
根据需要添加连接箭头和标签

手动集成的挑战：

⚠️ 高令牌消耗（每个图标 200-1000 行 × 图标数量）
⚠️ 复杂的坐标转换计算
⚠️ 如果处理不当，存在 ID 冲突风险
⚠️ 对于包含许多图标的图表耗时较长

示例：使用图标创建 AWS 图表

请求：”创建一个包含 Internet 网关、VPC、ELB、EC2 和 RDS 的 AWS 架构图”

推荐工作流程（使用 Python 脚本）：

# 第 1 步：创建带有标题的基础图表文件
# 创建 my-aws-diagram.excalidraw，包含基本结构（标题等）

# 第 2 步：检查图标可用性
# 读取：libraries/aws-architecture-icons/reference.md
# 确认图标存在：Internet-gateway、VPC、ELB、EC2、RDS

# 第 3 步：使用 Python 脚本添加图标
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw "Internet-gateway" 150 100 --label "Internet Gateway"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw VPC 200 200
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw ELB 350 250 --label "Load Balancer"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw EC2 500 300 --label "Web Server"
python scripts/add-icon-to-diagram.py my-aws-diagram.excalidraw RDS 650 350 --label "Database"

# 第 4 步：添加连接箭头
python scripts/add-arrow.py my-aws-diagram.excalidraw 200 150 250 200  # Internet → VPC
python scripts/add-arrow.py my-aws-diagram.excalidraw 265 230 350 250  # VPC → ELB
python scripts/add-arrow.py my-aws-diagram.excalidraw 415 280 500 300  # ELB → EC2
python scripts/add-arrow.py my-aws-diagram.excalidraw 565 330 650 350 --label "SQL" --style dashed

# 结果：包含专业 AWS 图标、标签和连接的完整图表

好处：

无需手动计算坐标
图标数据不消耗令牌
结果确定、可靠
易于迭代和调整位置

备选工作流程（手动，如果脚本不可用）：

检查：libraries/aws-architecture-icons/reference.md 存在 → 是
读取 reference.md → 查找 Internet-gateway、VPC、ELB、EC2、RDS 的条目
加载：
- icons/Internet-gateway.json（298 行）
- icons/VPC.json（550 行）
- icons/ELB.json（363 行）
- icons/EC2.json（231 行）
- icons/RDS.json（类似大小）
  总计：需处理约 2000+ 行 JSON
从每个 JSON 中提取元素
为每个图标计算边界框和偏移量
转换所有坐标 (x， y) 以定位
为所有元素生成唯一 ID
添加显示数据流的箭头
添加文本标签
生成最终的 .excalidraw 文件

手动方法的挑战：

高令牌消耗（约 2000-5000 行）
复杂的坐标计算
ID 冲突风险

支持的图标库（示例 — 验证可用性）

此工作流程适用于您提供的任何有效 .excalidrawlib 文件。
您可能在 https://libraries.excalidraw.com/ 上找到的库类别示例：
- 云服务图标
- Kubernetes / 基础设施图标
- 用户界面 / 材质图标
- 流程图 / 图表符号
- 网络图图标
可用性和名称可能发生变化；使用前请在网站上验证确切的库名称。

后备方案：无可用图标

如果未设置任何图标库：

使用基本形状（矩形、椭圆、箭头）创建图表
使用颜色编码和文本标签来区分组件
告知用户可以稍后添加图标或为将来的图表设置库
图表仍然功能清晰，只是视觉上不那么精美

参考资料

查看捆绑的参考资料：

references/excalidraw-schema.md – 完整的 Excalidraw JSON 模式
references/element-types.md – 详细的元素类型规范
templates/flowchart-template.json – 基本流程图模板
templates/relationship-template.json – 关系图模板
templates/mindmap-template.json – 思维导图模板
scripts/split-excalidraw-library.py – 用于拆分 .excalidrawlib 文件的工具
scripts/README.md – 库工具的文档
scripts/.gitignore – 防止本地 Python 工件被提交

局限性

复杂曲线简化为直线/基本曲线
手绘粗糙度设置为默认值 (1)
自动生成不支持嵌入图像
建议最大元素数：每个图表 20 个
无自动碰撞检测（请使用间距指南）

未来增强

可能的改进：

自动布局优化算法
从 Mermaid/PlantUML 语法导入
模板库扩展
生成后交互式编辑

📄 原始文档

完整文档（英文）：

https://skills.sh/github/awesome-copilot/excalidraw-diagram-generator

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Excalidraw Diagram Generator

🚀 快速安装

Excalidraw 图表生成器

何时使用该技能

前置条件

分步工作流程

第 1 步：理解请求

第 2 步：选择合适的图表类型

第 3 步：提取结构化信息

第 4 步：生成 Excalidraw JSON

第 5 步：格式化输出

第 6 步：保存并提供说明

最佳实践

元素数量指南

布局技巧

复杂度管理

示例提示和响应

示例 1：简单流程图

示例 2：关系图

示例 3：思维导图

故障排除

高级技巧

网格布局（适用于关系图）

径向布局（适用于思维导图）

自动生成 ID

输出格式

验证清单

图标库（可选增强功能）

当用户请求图标时

用户设置说明（详细）

AI 助手工作流程

示例：使用图标创建 AWS 图表

支持的图标库（示例 — 验证可用性）

后备方案：无可用图标

参考资料

局限性

未来增强

📄 原始文档

评论(0)

提示：请文明发言 取消回复

相关文章

Dotnet .NET/C# Best Practices

cpp-coding-standards – 汇易宝

idor-vulnerability-testing – 汇易宝

test-writer – 汇易宝

近期文章

近期评论

提示：请文明发言取消回复