excalidraw-diagram-generator

Excalidraw 图表生成器

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

何时使用此技能

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

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

支持的图表类型：

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

前提条件

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

分步工作流

第 1 步：理解请求

分析用户的描述以确定：

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

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

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

第 3 步：提取结构化信息

对于流程图：

顺序步骤列表
决策点（如果有）
起点和终点

对于关系图：

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

对于思维导图：

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

对于数据流图 (DFD)：

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

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

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

对于类图：

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

对于序列图：

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

对于 ER 图：

实体（带实体名称的矩形）
属性（列在实体内部）
主键（下划线或标记为 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 步：保存并提供说明

保存为 <descriptive-name>.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、Post 和 Comment 实体之间的关系图”

代理生成：

实体：User、Post、Comment
关系：User → Post（“创建”）、User → Comment（“撰写”）、Post → Comment（“包含”）
保存为 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/<library-name>/reference.md
如果库存在：继续使用图标（参见下面的 AI 助手工作流）

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

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

1. 访问 https://libraries.excalidraw.com/
2. 搜索“[AWS 架构图标等]”并下载 .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 文件
示例类别（可用性可能变化；在网站上确认）：
- 云服务图标
- UI/材料图标
- 流程图符号

第 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 \
  <diagram-path> <icon-name> <x> <y> [--label "Text"] [--library-path 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 \
  <diagram-path> <from-x> <from-y> <to-x> <to-y> [--label "Text"] [--style solid|dashed|dotted] [--color HEX]

默认启用通过 .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/<library-name>/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 Gateway、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/基础设施图标
- UI/材料图标
- 流程图/图表符号
- 网络图图标
可用性和名称可能变化；使用前在网站上确认确切的库名称。

回退：无可用图标

如果未设置图标库：

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

参考资料

请参阅附带的参考资料：

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 语法导入
模板库扩展
生成后的交互式编辑

你可能还喜欢

deployment-pipeline-design

38Kdevops-cloud

设计包含审批门控、安全检查与部署编排的多阶段CI/CD流水线。在设计零停机部署流水线、实施金丝雀发布策略、设置多环境晋升工作流或调试CI/CD中失败的部署门控时使用此技能。

wshobson

获取

runtime

37Kdevops-cloud

@copilotkit/runtime — mount a fetch-native CopilotRuntime on any JS server, wire middleware, pick an AgentRunner, instantiate BuiltInAgent (Factory Mode with TanStack AI is the preferred default) or plug in any of 12 external agent frameworks (Mastra, LangGraph, CrewAI Crews/Flows, PydanticAI, ADK, LlamaIndex, Agno, AWS Strands, MS Agent Framework, AG2, A2A), enable Intelligence mode for durable threads + websocket, register server-side tools via defineTool, and wire voice transcription. Uses the fetch-based createCopilotRuntimeHandler primitive — the Express/Hono adapters are discouraged. Load the reference under references/ that matches your task.

copilotkit

获取

tmux

386Kdevops-cloud

Control tmux sessions/panes for interactive CLIs: list, capture output, send keys, paste text, monitor prompts.

openclaw

获取

继续探索

浏览 devops-cloud 热门 Skills 最近更新