SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场excalidraw-diagram-generator

excalidraw-diagram-generator

设计与创作

查看项目

更新于 10-16 04:39

技能介绍

用途

Excalidraw Diagram Generator 是一个根据自然语言描述生成 Excalidraw 格式图表的技能，用于将流程、系统、关系与想法转化为可视化图表，无需手动绘制。

当用户提出以下类型请求时适用：创建图表、制作流程图、可视化某个流程、绘制系统架构、生成思维导图、创建 Excalidraw 文件、展示某两者之间的关系、绘制工作流图等。

支持的图表类型

  • 流程图（Flowcharts）：顺序流程、工作流、决策树
  • 关系图（Relationship Diagrams）：实体关系、系统组件、依赖关系
  • 思维导图（Mind Maps）：概念层级、头脑风暴结果、主题组织
  • 架构图（Architecture Diagrams）：系统设计、模块交互、数据流
  • 数据流图（DFD）：数据流可视化、数据转换过程
  • 泳道业务流程图（Swimlane）：跨职能工作流、基于角色的流程
  • 类图（Class Diagrams）：面向对象设计、类结构与关系
  • 时序图（Sequence Diagrams）：对象随时间的交互、消息流
  • ER 图（ER Diagrams）：数据库实体关系、数据模型

使用方式

该技能按以下步骤工作：

  1. 理解请求：分析描述，确定图表类型、关键元素、关系与复杂度。
  2. 选择合适的图表类型：根据用户意图与关键词匹配对应图表类型。
  3. 提取结构化信息：按图表类型提取步骤、实体、关系、分支、参与者、类、消息、实体属性等。
  4. 生成 Excalidraw JSON：创建 .excalidraw 文件，使用 rectangle、ellipse、diamond、arrow、text 等元素类型，并设置位置、尺寸、样式、字体等属性。所有文本元素必须使用 fontFamily: 5（Excalifont）。
  5. 格式化输出：按 Excalidraw 文件结构组织，包含 type、version、source、elements、appState、files 等字段。
  6. 保存并提供说明：保存为 <descriptive-name>.excalidraw，并告知用户如何打开（访问 https://excalidraw.com 后点击 Open 或拖放文件，或使用 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）
  • 简单流程用直线箭头，复杂关系用曲线箭头

复杂度管理：若元素过多，建议拆分为多个图表，先聚焦主要元素，再提供详细子图。

图标库（可选增强）

对于 AWS/GCP/Azure 等专业架构图，可使用 Excalidraw 预置图标库。若用户请求图标，先检查 libraries/<library-name>/reference.md 是否存在：

  • 若存在，按 AI Assistant Workflow 使用图标。
  • 若不存在，提供设置说明：访问 https://libraries.excalidraw.com/ 搜索并下载 .excalidrawlib 文件，创建目录 skills/excalidraw-diagram-generator/libraries/[icon-set-name]/，放入文件后运行拆分脚本：

python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[icon-set-name]/

设置完成后可使用实际图标；也可先用简单形状创建图表，之后在 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 禁用。

  • 添加箭头：

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]

Python 脚本方式的优点：不消耗 token（图标 JSON 数据不进入 AI 上下文）、坐标计算准确、自动生成 UUID 避免冲突、可靠、快速、可复用。

输出格式

始终提供：完整的 .excalidraw JSON 文件、创建内容摘要、元素数量、打开/编辑说明。

验证清单

交付前检查：所有元素具有唯一 ID、坐标不重叠、文本可读（字号 16+）、所有文本使用 fontFamily: 5（Excalifont）、箭头逻辑连接、颜色方案一致、文件为有效 JSON、元素数量合理（清晰起见 <20）。

限制

该技能依赖用户提供清晰的描述、关键实体/步骤/概念以及元素间关系。若请求元素过多，需拆分为多个图表。图标库需用户自行下载并运行脚本设置。具体收费、价格、平台支持等信息暂未提供。