跳转到使用指南
excalidraw-diagram-generator作者 GitHub

Excalidraw Diagram Generator Skill.

一个用于图表和图形的 Claude Code 和 Codex skill:从自然语言生成 Excalidraw 图表和思维导图。

  • Diagrams & Data Visualization
  • Diagram
github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md
--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques
前置数据和章节标题读取自上游文件,日期 2026-09-14 · 完整内容 24,276 字符

01 功能说明

excalidraw-diagram-generator Skill 在 Claude Code 和 Codex 中的功能

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

根据自然语言描述生成 Excalidraw 格式的图表。支持九种图表类型:用于顺序流程的流程图、用于实体关系的关系图、用于概念层级的思维导图、用于系统设计的架构图、用于数据转换流程的数据流图、用于跨职能工作流的业务流程泳道图、用于面向对象设计的类图、用于随时间展开的对象交互的序列图,以及用于数据库实体关系的 ER 图。

输出带有适当元素(矩形、椭圆、菱形、箭头、文本)的 .excalidraw JSON 文件,这些元素使用计算得出的坐标进行定位,并采用统一的配色方案进行样式设置。文件可直接在 excalidraw.com 或通过 VS Code 扩展中打开。

它产出什么

  • 完整的 .excalidraw JSON 文件,带有描述性文件名
  • 所创建内容的摘要,包括图表类型和元素数量
  • 在 Excalidraw 中打开和编辑该图表的说明
查看示例提示词 ↗

工作方式

  1. 01
    理解请求

    分析用户的描述,以确定图表类型(流程图、关系图、思维导图、架构图)、关键元素(实体、步骤、概念)、关系(流向、连接、层级)以及复杂度(元素数量)。

  2. 02
    选择合适的图表类型

    通过识别关键词,将用户意图匹配到相应的图表类型。

  3. 03
    提取结构化信息

    根据图表类型列出元素。对于流程图:顺序步骤、决策点、起点和终点。

  4. 04
    生成 Excalidraw JSON

    创建 .excalidraw 文件,使用合适的元素类型(矩形、椭圆、菱形、箭头、文本),并设置关键属性,包括位置(x、y 坐标)、大小(width、height)、样式(strokeColor、backgroundColor、fillStyle)、字体(fontFamily:5 表示 Excalifont)以及连接(箭头的 points 数组)。

  5. 05
    格式化输出

    构建完整的 Excalidraw 文件结构,包括 type、version、source、elements 数组、appState(viewBackgroundColor、gridSize)以及 files 对象。

  6. 06
    保存并提供说明

    以 descriptive-name.excalidraw 保存,并告知用户如何打开:访问 excalidraw.com,点击 Open 或将文件拖放进去,或使用 Excalidraw VS Code 扩展。

02 找到适合场景

何时使用 excalidraw-diagram-generator Skill

当工作是此类图表和图形时,在 Claude Code 或 Codex 中使用 excalidraw-diagram-generator skill。下面的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 使用流程图呈现顺序流程、工作流和决策树
  • 使用关系图呈现实体关系、系统组件和依赖关系
  • 使用思维导图呈现概念层级、头脑风暴结果和主题组织
  • 使用架构图呈现系统设计、模块交互和数据流
  • 使用业务流程泳道图呈现跨职能工作流和基于角色的流程

了解边界

  • 复杂曲线会被简化为直线或基本曲线
  • 自动生成不支持嵌入图片
  • 元素超过 20 个的图表,因为建议每个图表最多 20 个元素
  • 不支持自动碰撞检测,该 skill 改用间距指南

需要提供的信息

  • 清晰描述需要可视化的内容用自然语言描述需要制成图表的流程、系统、关系或概念
  • 识别关键实体、步骤或概念将成为图表元素的主要组成部分
  • 理解元素之间的关系或流向实体如何连接、步骤的顺序,或层级结构

03 Skill 内部

excalidraw-diagram-generator skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 元素数量限制

    流程图步骤:建议 3-10 个,最多 15 个。关系实体:建议 3-8 个,最多 12 个。思维导图分支:建议 4-6 个,最多 8 个。

  2. 必需的字体

    所有文本元素必须使用 fontFamily: 5(Excalifont)以保持视觉外观一致。这是验证清单中的必检项。

  3. 间距规范

    元素之间的水平间距:200-300px。行与行之间的垂直间距:100-150px。文字大小:16-24px 以保证可读性。

  4. 配色方案一致性

    主要元素使用浅蓝色(#a5d8ff),次要元素使用浅绿色(#b2f2bb),重要/中心元素使用黄色(#ffd43b),提醒/警告使用浅红色(#ffc9c9)。

  5. 复杂度管理

    如果用户请求的元素过多,建议拆分为多个图表,先聚焦主要元素,并主动提出创建更详细的子图。

  6. 数据流方向

    对于数据流图,不表示流程顺序,只表示数据流。数据流应从左到右或从左上到右下展示。

  7. 元素数量上限

    元素数量必须合理,为保证清晰度,元素数应少于 20 个。这是交付前验证清单中的检查项。

  8. 唯一 ID 且不重叠

    所有元素必须具有唯一 ID,且坐标必须避免重叠。这些是交付图表前必须通过的验证检查。

04 投入使用

在 Claude Code 或 Codex 中安装 excalidraw-diagram-generator

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 excalidraw-diagram-generator 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

针对 skills/excalidraw-diagram-generator/SKILL.md 的通用 skills CLI 形式;该仓库可能有自己的文档路径说明。

给 Skill 分配第一个图表和图示任务

使用你自己的内容和约束调整此提示,然后在 Claude Code 或 Codex 中运行它。

Example prompt
Create a flowchart for user registration

来源:SKILL.md 示例(原文照录)。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 验证所有元素是否具有唯一 ID
  • 检查文字在字号 16 或更大时是否清晰可读
  • 验证所有文本元素是否使用 fontFamily: 5(Excalifont)
  • 确认箭头连接逻辑正确,颜色遵循统一方案

在 OpenDesign 中通过 SKILL.md 链接导入 excalidraw-diagram-generator:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
GitHub
Repository
github.com/github/awesome-copilot 分支 main
Skill 文件
skills/excalidraw-diagram-generator/SKILL.md 验证时记录的内容校验和;提交 1899b18
License
MIT 来自 LICENSE。
仓库星标数
38,981 GitHub 快照摄于 2026-09-14,针对整个 github/awesome-copilot 仓库,该仓库在此目录中包含 6 个 skills。不是 excalidraw-diagram-generator 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 何时使用此 Skill列出触发短语及支持的图表类型,包括流程图、关系图、思维导图、架构图、数据流图(DFD)、泳道图、类图、序列图和实体关系图(ER 图)
  2. 前提条件需要清晰的描述、关键实体或步骤的识别,以及对关系或流程的理解
  3. 分步工作流六步流程:从理解请求,到选择图表类型、提取信息、生成 JSON、格式化输出,再到附带说明保存
  4. 最佳实践元素数量指导、间距与定位的布局技巧、配色方案、文字大小,以及复杂度管理策略
  5. 示例提示与响应三个示例:用户注册流程图、用户-帖子-评论关系图,以及带提取步骤的机器学习思维导图
  6. 故障排查针对元素重叠、文字排布问题、元素过多、布局不清晰以及配色不一致的解决方案
  7. 进阶技巧用于关系图的网格布局公式、用于思维导图的放射状布局,以及使用时间戳和随机字符串的自动生成 ID 模式
  8. 输出格式始终提供完整的 .excalidraw JSON 文件、包含元素数量的摘要,以及在 excalidraw.com 或 VS Code 中打开的说明
  9. 验证清单交付前的八项检查,包括唯一 ID、坐标无重叠、文字可读、Excalifont 字体系列、箭头逻辑合理、配色一致、有效的 JSON,以及合理的元素数量
  10. 图标库(可选增强)用于从 Excalidraw 库中添加云服务图标的 Python 脚本工作流,包括设置说明以及 add-icon-to-diagram.py 和 add-arrow.py 的用法
  11. 参考资料随附的 schema 文档、元素类型规范、八个图表模板、三个用于图标和箭头集成的 Python 脚本,以及脚本说明文档
  12. 限制曲线简化、不支持嵌入图片、建议最多 20 个元素、无自动碰撞检测
Skill 自身的描述
「从自然语言描述生成 Excalidraw 图表。当被要求「创建图表」、「制作流程图」、「可视化流程」、「绘制系统架构」、「创建思维导图」或「生成 Excalidraw 文件」时使用。支持流程图、关系图、思维导图和系统架构图。输出可以直接在 Excalidraw 中打开的 .excalidraw JSON 文件。」

来自 SKILL.md 的 front-matter 描述。完整文件约 24,276 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 excalidraw-diagram-generator Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

如何打开生成的图表文件?

访问 excalidraw.com,点击 Open 或拖放 .excalidraw 文件。你也可以使用 Excalidraw VS Code 扩展直接在编辑器中打开它。

我可以在图表中使用 AWS 或云服务图标吗?

可以,该 skill 支持来自 excalidraw.com/libraries 的图标库。你需要下载一个 .excalidrawlib 文件,运行 split-excalidraw-library.py 脚本将其拆分为单个图标,然后使用 add-icon-to-diagram.py 和 add-arrow.py 这两个 Python 脚本为图表添加图标和连接线。

这种方式避免了 token 消耗,并提供了精确的坐标转换以及自动的 UUID 生成。

Excalidraw Diagram Generator

在真实的图表和图形任务中运行 excalidraw-diagram-generator。

下载 OpenDesign,从其 SKILL.md 链接导入 excalidraw-diagram-generator,粘贴上面的提示词,并在结果之前阅读计划。

终端
npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows