excalidraw-diagram

Name: excalidraw-diagram
Author: aiagentwithdhruv

github.com/aiagentwithdhruv设计与 UI2071 次安装15 周前更新

代码仓库

关于 excalidraw-diagram

面向生成 Excalidraw 图表的技能，指导从澄清需求、规划布局到构建 JSON 并交付可编辑文件。强调颜色分区、嵌套关系、对比度和坐标规则。

主要功能

01先澄清图表主题与细节
02按区块规划布局和坐标
03生成 Excalidraw 元素及 JSON
04提供配色、排版和箭头规范
05支持根据反馈修改图表

适用场景

01绘制系统架构或流程图
02将复杂概念分区呈现
03修改已有图表的布局或内容

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aiagentwithdhruv/skills --skill excalidraw-diagram

安装后在 Claude Code 中输入/excalidraw-diagram确认已加载。

详细介绍

工作流

步骤 1：理解请求

在生成任何内容之前，确保你了解：

他们要绘制什么概念或系统？
主要组件或部分有哪些？
它们之间的流程或关系是什么？

如果请求含糊不清（例如“绘制一张 Docker 示意图”），请提出 1-2 个澄清问题：

具体要展示哪个方面？（架构、网络、卷等）
需要什么详细程度？（高层概览还是详细的内部结构）

步骤 2：必要时进行研究

如果你不确定该概念的技术准确性，请先研究，再绘图。核实：

组件名称及其关系是否正确
层级和嵌套是否恰当
数据流向是否准确

步骤 3：规划布局

编写任何 JSON 之前，先在脑中构思布局：

主要部分有哪些？（从左到右或从上到下）
哪些内容嵌套在其他内容中？
哪些元素之间需要用箭头连接？

写下各部分的布局规划：

[Section A: w=170] --40px gap-- [Section B: w=170] --40px gap-- [Section C: w=640]

步骤 4：生成元素

按顺序构建元素：

先绘制外部框或容器
再添加部分标题文本
添加嵌套元素（每个部分内从上到下）
最后添加箭头和箭头标签

步骤 5：保存并交付

将文件保存到当前目录下的 [concept-slug].excalidraw
在代码块中显示完整 JSON，方便用户直接复制
简要说明示意图展示的内容，以及每个颜色区域代表什么
告诉用户如何使用该文件：

如何查看和编辑你的示意图：

前往 excalidraw.com（免费，无需账户）

选项 A：点击菜单（左上角的汉堡菜单图标）> “打开” > 选择 .excalidraw 文件

选项 B：复制上方的 JSON 代码块，打开 excalidraw.com，然后按 Ctrl+V / Cmd+V 粘贴

每个元素都可以完整编辑——拖动即可移动，拖动控制点即可调整大小，双击即可编辑文本

步骤 6：处理反馈

如果用户要求修改：

移动元素 = 更新该元素及所有依赖元素的 x/y 坐标
修改文本 = 同时更新 text 和 originalText 字段
添加区域 = 从调色板中为其分配新颜色，并保持间距一致
如果示意图变得复杂（20 个以上元素），请分部分构建，以避免坐标错误

关键规则：文本对比度

彩色形状中的文本必须清晰易读。所有填充形状中的文本都使用 #1e1e1e（近黑色）或 #343a40（深炭灰色）。切勿使用区域的描边颜色作为该区域背景上的文本颜色（例如，在黄色卡片上使用黄色文本会无法辨认）。区域的 strokeColor 仅用于形状边框和箭头。

设计原则

颜色传达信息： 每个逻辑区域使用一种颜色。“输入”区域中的所有内容都用蓝色。“输出”区域中的所有内容都用绿色。读者应先理解结构，再阅读文字。

嵌套表示包含关系： 如果 X 属于 Y，就将 X 的框绘制在 Y 的框内，并保持内边距一致。坐标是绝对坐标，而非相对坐标：child_x = parent_x + padding。

标签要简短： 每个标签 2-5 个词。较长的说明应作为注释，使用较小的 fontSize 和柔和的颜色（#868e96）。

留白就是结构： 同级元素之间至少留出 15px 间距。主要部分之间至少留出 40px 间距。

箭头传达意图： 根据用途为箭头着色。为所有不明显的箭头添加标签。

布局系统

编写 JSON 之前，务必先规划坐标。

确定主要区域（从左到右或从上到下）
为每个区域分配固定宽度和起始 x 坐标
计算间距：主要区域之间为 40-60px，同级元素之间为 15-25px
在各区域内从上到下排列：next_y = current_y + current_height + gap

内边距规则：

外框到内层标签：顶部偏移 8-10px
外框到嵌套框：四周偏移 10-15px
同级元素之间：间距 10-15px

**文本宽度技巧：**将文本宽度设为父框宽度。设置 textAlign: "center" 后，文本会自动居中。

**箭头标签：**将标签作为独立文本元素放置在箭头中点 y 坐标上方 20-25px 处，宽度和 x 坐标与箭头保持一致。

坐标计算示例：

Section A: x=30,  w=170  -> right edge = 200
Gap:                        40px
Section B: x=240, w=170  -> right edge = 410
Gap:                        40px
Section C: x=450, w=600  -> right edge = 1050

配色系统

区域	用途	strokeColor	backgroundColor
蓝色	输入、源、外部服务	`#1971c2`	`#e7f5ff`
黄色	处理、转换	`#f59f00`	`#fff9db`
绿色	输出、容器、成功	`#2f9e44`	`#d3f9d8`
紫色	共享层、基础设施	`#862e9c`	`#f3d9fa`
红色	主机操作系统、警告、错误	`#c92a2a`	`#ffe3e3`
灰色	硬件、中性容器	`#495057`	`#f8f9fa`

对于嵌套元素，应调整填充色的深浅：

外层：最浅（例如，#d3f9d8）
内层：中等（例如，#8ce99a）
深层内层：浅中间色（例如，#b2f2bb）

字体大小层级

角色	fontSize	fontFamily
图表标题	32-36	1（Virgil）
区域标题	20-24	1
元素标签	16-18	1
注释	14-15	1
小注释	12-13	1
代码标签	14-16	3（Cascadia）

文本宽度 = 父框宽度。文本的 x/y 坐标相对框的 x/y 坐标偏移约 8-10px，作为内边距。

元素结构

每个元素都需要包含以下基础字段。不得省略。

基础字段（所有类型）

{
  "id": "unique-string",
  "type": "rectangle|ellipse|diamond|arrow|line|text|freedraw",
  "x": 0, "y": 0,
  "width": 100, "height": 50,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "roundness": null,
  "boundElements": [],
  "updated": 1,
  "link": null,
  "locked": false
}

文本字段（添加到基础字段中）

{
  "text": "Label text",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "top",
  "containerId": null,
  "originalText": "Label text",
  "lineHeight": 1.25
}

箭头字段（添加到基础字段中）

{
  "points": [[0, 0], [100, 0]],
  "lastCommittedPoint": null,
  "startBinding": null,
  "endBinding": null,
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

关键值

**fontFamily：**1 = Virgil（手写风格，默认），2 = Helvetica，3 = Cascadia（等宽字体）
**roughness：**0 = 平滑，1 = 略显粗糙（默认 Excalidraw 风格），2 = 非常粗糙
fillStyle："solid" 表示简洁图表，"hachure" 表示经典 Excalidraw 排线
roundness：null = 尖角，{"type": 3} = 圆角矩形，{"type": 2} = 曲线箭头
strokeStyle："solid"、"dashed"（可选连接）、"dotted"

常见模式

带标签的框

[Rect: x, y, w, h]
[Title text: x, y+10, w, fontSize=18]
[Subtitle: x, y+38, w, fontSize=14, strokeColor=#868e96]

嵌套容器

[Host rect: x=0, y=0, w=640, h=500]
[Host label: x=0, y=10, w=640]
[Item 1: x=15, y=50, w=190, h=200]
[Item 2: x=225, y=50, w=190, h=200]
[Item 3: x=435, y=50, w=190, h=200]

带标签的箭头

[Arrow: x=start_x, y=mid_y, width=gap_width, points=[[0,0],[gap_width,0]]]
[Label: x=start_x, y=mid_y-25, width=gap_width, textAlign=center]

JSON 包装结构

每个图表都使用此外壳：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [ ... ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

支持 Markdown

登录后评论