excalidraw

Name: excalidraw
Author: kv0906

github.com/kv0906设计与 UI1850 次安装3 周前更新

代码仓库

关于 excalidraw

excalidraw 是用于生成 Excalidraw 兼容图表 JSON 的技能，面向需要创建流程图和结构图的用户。它提供网格布局、元素定位与文本居中等规范，并将结果保存为可打开的 .excalidraw.json 文件。

主要功能

01生成 Excalidraw 兼容 JSON
02提供网格布局与尺寸规范
03计算文本居中位置
04支持形状、文本和箭头
05提供流程图等布局模板

适用场景

01制作流程图或处理流程图
02绘制带分支的决策图
03生成带连接箭头的结构图

安装

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

$npx skills add https://github.com/kv0906/cc-skills --skill excalidraw

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/

flowchart-template.excalidraw.json

references/

elements.md

processing-loop-template.md

详细介绍

Excalidraw 图表生成器

创建兼容 Excalidraw 的 JSON 图表。输出 .excalidraw.json 文件。

JSON 架构

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

坐标系

原点：左上角（0, 0）
X 轴：向右递增
Y 轴：向下递增
单位：像素

基于网格的布局系统

使用 20px 网格进行对齐。标准位置：

GRID_UNIT = 20
COLUMN_WIDTH = 200    # Element + gap
ROW_HEIGHT = 150      # Element + gap

Position formula:
  x = START_X + (column * COLUMN_WIDTH)
  y = START_Y + (row * ROW_HEIGHT)

Recommended START_X = 50, START_Y = 100

标准元素尺寸

元素	宽度	高度	用途
小框	120	60	标签、简单步骤
标准框	160	80	流程步骤
大框	200	100	详细节点
宽框	240	80	长文本
菱形	100	100	决策点
圆形	80	80	开始/结束节点
图标圆形	90	80	带表情符号

文本居中公式

重要：要使文本在形状内居中：

text_x = shape_x + (shape_width - text_width) / 2
text_y = shape_y + (shape_height - text_height) / 2

文本尺寸参考

字号	字符宽度	行高	用途
11	~6px	15px	标签、注释
12	~7px	16px	次要文本
14	~8px	18px	正文
16	~9px	20px	主要文本
18	~10px	24px	标题
20	~11px	26px	标题
28	~16px	35px	图标/表情符号

估算 text_width：char_count * char_width 估算 text_height：line_count * line_height

居中示例

Shape: x=100, y=100, width=160, height=80
Text: "Process" (7 chars), fontSize=16

text_width = 7 * 9 = 63
text_height = 1 * 20 = 20
text_x = 100 + (160 - 63) / 2 = 148.5 ≈ 148
text_y = 100 + (80 - 20) / 2 = 130

元素类型

通用属性（所有元素必需）

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 160,
  "height": 80,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "roughness": 1,
  "opacity": 100,
  "angle": 0,
  "seed": 100,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "link": null,
  "locked": false
}

特定类型属性

矩形：添加 "roundness": {"type": 3} 以使用圆角

文本：

{
  "type": "text",
  "text": "Content\nLine 2",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle"
}

fontFamily：1=Virgil（手写），2=Helvetica，3=Cascadia（等宽）

箭头/线条：

{
  "type": "arrow",
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

点相对于元素的 x,y 坐标
箭头端点：null、"arrow"、"bar"、"dot"、"triangle"

箭头定位

水平箭头（从左到右）

From shape at (x1, y1, w1, h1) to shape at (x2, y2, w2, h2):

arrow_x = x1 + w1           # Right edge of source
arrow_y = y1 + h1/2         # Vertical center
gap = x2 - (x1 + w1)        # Space between shapes
points = [[0, 0], [gap, 0]]

垂直箭头（从上到下）

arrow_x = x1 + w1/2         # Horizontal center
arrow_y = y1 + h1           # Bottom edge of source
gap = y2 - (y1 + h1)
points = [[0, 0], [0, gap]]

对角线/曲线箭头

points = [[0, 0], [dx/2, dy], [dx, dy]]  # Curved path

配色方案

颜色	描边	背景	用途
蓝色	#1971c2	#a5d8ff	主要、信息
绿色	#2f9e44	#b2f2bb	成功、开始
橙色	#e8590c	#ffc9c9	警告、操作
红色	#e03131	#ffc9c9	错误、结束
紫色	#9c36b5	#eebefa	特殊、循环
黄色	#f08c00	#ffec99	高亮
青绿色	#099268	#96f2d7	次要
灰色	#868e96	#dee2e6	中性、标签
黑色	#1e1e1e	-	文本、边框

Z 顺序（元素数组顺序）

元素按数组顺序渲染。第一个在最底层，最后一个在最上层。

正确顺序：

背景形状（容器、框架）
连接线/箭头
前景形状（节点、框）
文本标签
图标/叠加层

布局模式

水平流程（从左到右）

COL_GAP = 60  # Gap between elements

Element 1: x=50,  y=100, w=160, h=80
Arrow 1:   x=210, y=140, points=[[0,0],[60,0]]
Element 2: x=270, y=100, w=160, h=80
Arrow 2:   x=430, y=140, points=[[0,0],[60,0]]
Element 3: x=490, y=100, w=160, h=80

垂直流程（从上到下）

ROW_GAP = 50

Element 1: x=100, y=50,  w=160, h=80
Arrow 1:   x=180, y=130, points=[[0,0],[0,50]]
Element 2: x=100, y=180, w=160, h=80

决策分支（菱形）

Diamond:    x=300, y=200, w=100, h=100
Center:     (350, 250)

Yes path (up-right):
  arrow_x=350, arrow_y=200
  points=[[0,0], [0,-50], [100,-50]]

No path (down-right):
  arrow_x=350, arrow_y=300
  points=[[0,0], [0,50], [100,50]]

反馈循环（返回箭头）

From bottom-right back to left:
  Start: (800, 400)
  points=[
    [0, 0],        # Start
    [0, 80],       # Down
    [-400, 80],    # Left
    [-400, -150]   # Up to target
  ]

完整节点示例

[
  {
    "id": "node1-box",
    "type": "rectangle",
    "x": 100, "y": 100, "width": 160, "height": 80,
    "strokeColor": "#1971c2",
    "backgroundColor": "#a5d8ff",
    "fillStyle": "solid",
    "strokeWidth": 2,
    "roughness": 1,
    "opacity": 100,
    "angle": 0,
    "seed": 100,
    "version": 1,
    "isDeleted": false,
    "boundElements": [{"id": "arrow1", "type": "arrow"}],
    "roundness": {"type": 3},
    "link": null,
    "locked": false
  },
  {
    "id": "node1-text",
    "type": "text",
    "x": 130, "y": 130,
    "width": 100, "height": 20,
    "text": "Process Step",
    "fontSize": 16,
    "fontFamily": 1,
    "textAlign": "center",
    "verticalAlign": "middle",
    "strokeColor": "#1e1e1e",
    "backgroundColor": "transparent",
    "fillStyle": "solid",
    "strokeWidth": 1,
    "roughness": 1,
    "opacity": 100,
    "angle": 0,
    "seed": 101,
    "version": 1,
    "isDeleted": false,
    "boundElements": null,
    "link": null,
    "locked": false
  }
]

定位检查清单

生成前：

☐ 定义网格：START_X、START_Y、COLUMN_WIDTH、ROW_HEIGHT
☐ 列出所有元素及其行/列位置
☐ 使用公式计算准确的 x,y 坐标
☐ 使用居中公式计算文本位置
☐ 计算箭头起点和相对端点
☐ 按正确的 Z 顺序排列元素
☐ 分配唯一 ID 和递增的种子值

模板

基本流程图：assets/flowchart-template.excalidraw.json
处理循环：references/processing-loop-template.md
元素规格：references/elements.md

输出

保存为 .excalidraw.json
复制到 /mnt/user-data/outputs/
告诉用户：“在 excalidraw.com 打开 → 菜单 → 打开”

支持 Markdown

登录后评论