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

excalidraw

设计与创作

查看项目

更新于 10-15 07:43

技能介绍

用途

Excalidraw 图表生成器用于从代码库分析中直接生成架构图，并输出为 .excalidraw 文件。当用户提出“为这个项目生成架构图”“创建系统的 excalidraw 图表”“将此代码库可视化为 excalidraw 文件”等请求时，该技能会分析代码库（支持任意语言和框架），识别组件、服务、数据库、API，梳理它们之间的关系与数据流，最终生成有效的 .excalidraw JSON，其中包含动态 ID 和标签。该技能无需任何前置条件，不依赖已有图表、Terraform 或特定文件类型。

主要能力

  • 分析代码库，识别组件、服务、数据库、API。
  • 映射组件之间的关系与数据流。
  • 生成有效的 .excalidraw JSON，包含动态 ID 和标签。
  • 支持多种元素类型：rectangle（服务、数据库、容器、编排器）、ellipse（用户、外部系统、起点/终点）、text（形状内标签、标题、注释）、arrow（数据流、连接、依赖）、line（分组边界、分隔线）。
  • 提供默认颜色调色板，按组件类型区分背景色与描边色，例如前端 #a5d8ff/#1971c2、后端/API #d0bfff/#7048e8、数据库 #b2f2bb/#2f9e44、存储 #ffec99/#f08c00、AI/ML #e599f7/#9c36b5、外部 API #ffc9c9/#e03131、编排 #ffa8a8/#c92a2a、消息队列 #fff3bf/#fab005、缓存 #ffe8cc/#fd7e14、用户 #e7f5ff/#1971c2。
  • 提供参考文件：references/json-format.md（元素类型、必需属性、文本绑定）、references/arrows.md（路由算法、模式、绑定、错开）、references/colors.md（默认、AWS、Azure、GCP、K8s 调色板）、references/examples.md（完整 JSON 示例、布局模式）、references/validation.md（检查清单、验证算法、错误修复）。

使用方式

用户只需提出请求，例如“为这个项目生成架构图”“创建系统的 excalidraw 图表”“将此代码库可视化为 excalidraw 文件”。Claude Code 将执行以下流程：

  1. 分析代码库：根据代码库类型查找组件，例如 Monorepo 查找 packages//package.json、工作区配置；微服务查找 docker-compose.yml、k8s 清单；IaC 查找 Terraform/Pulumi 资源定义；后端 API 查找路由定义、控制器、数据库模型；前端查找组件层级、API 调用。使用工具：Glob → /package.json、/Dockerfile、**/.tf；Grep → app.get、@Controller、CREATE TABLE；Read → README、配置文件、入口点。
  2. 规划布局：常见垂直流，第 1 行用户/入口点（y: 100），第 2 行前端/网关（y: 230），第 3 行编排（y: 380），第 4 行服务（y: 530），第 5 行数据层（y: 680）；列 x = 100, 300, 500, 700, 900；元素尺寸 160-200px x 80-90px。其他模式见 references/examples.md。
  3. 生成元素：为每个组件创建唯一 id 的形状，添加 boundElements 引用文本，创建带 containerId 的文本，根据类型选择颜色。
  4. 添加连接：为每个关系计算源边缘点，规划肘形路由（避免重叠），创建带 points 数组的箭头，描边颜色匹配目标类型。
  5. 添加分组（可选）：使用带 strokeStyle: "dashed" 的大型透明矩形，并在左上角放置独立文本标签。
  6. 验证并写入：写入前运行验证，保存到 docs/ 或用户指定路径。

关键规则

  1. 禁止使用菱形形状：原始 Excalidraw JSON 中菱形箭头连接会失效。改用带样式的矩形表达语义：编排器/中心使用珊瑚色（#ffa8a8/#c92a2a）且 strokeWidth: 3；决策点使用橙色（#ffd8a8/#e8590c）且虚线描边。
  2. 标签需要两个元素：label 属性在原始 JSON 中无效。每个带标签的形状需要：形状带 boundElements 引用，以及单独的文本元素带 containerId。
  3. 肘形箭头需要三个属性：对于 90 度角（非曲线），设置 roughness: 0（干净线条）、roundness: null（尖角）、elbowed: true（90 度模式）。
  4. 箭头边缘计算：箭头必须从形状边缘而非中心起止。顶部 (x + width/2, y)，底部 (x + width/2, y + height)，左侧 (x, y + height/2)，右侧 (x + width, y + height/2)。详细箭头路由见 references/arrows.md。

适用场景

  • 需要从代码库快速生成架构图、系统图或可视化图表。
  • 代码库为任意语言或框架，包括 Monorepo、微服务、IaC、后端 API、前端等。
  • 无需已有图表、Terraform 或特定文件类型。

限制

  • 原始 Excalidraw JSON 中菱形箭头连接会失效，因此禁止使用菱形形状。
  • label 属性在原始 JSON 中无效，必须使用形状与文本两个元素。
  • 肘形箭头需设置特定属性才能实现 90 度角。
  • 箭头需从形状边缘起止，否则会悬浮。
  • 多箭头从同一边缘出发时需错开起始位置，避免重叠。
  • 输出文件需通过验证清单检查，包括：每个带标签的形状有 boundElements + 文本元素；文本元素有匹配形状的 containerId；多点箭头有 elbowed: true、roundness: null；箭头 x,y 等于源形状边缘点；箭头最终点偏移到达目标边缘；无菱形形状；无重复 ID。
  • 输出位置为 docs/architecture/ 或用户指定；文件名具有描述性，例如 system-architecture.excalidraw；可在 https://excalidraw.com 或 VS Code 扩展中打开测试。

常见问题修复

  • 标签不显示：使用两个元素（形状 + 文本），而非 label 属性。
  • 箭头弯曲：添加 elbowed: true、roundness: null、roughness: 0。
  • 箭头悬浮：从形状边缘计算 x,y，而非中心。
  • 箭头重叠：在边缘上错开起始位置。

详细错误修复见 references/validation.md。