diagramming

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Diagramming with Excalidraw

使用Excalidraw绘图

Generate valid

.excalidraw

JSON files.

生成有效的

.excalidraw

JSON文件。

File Format

文件格式

json

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

Field	Type	Description
`type`	string	Always `"excalidraw"`
`version`	number	Schema version (currently `2` )
`source`	string	Origin URL
`elements`	array	All diagram elements
`appState`	object	Canvas settings (background, etc.)
`files`	object	Binary files keyed by fileId (images)

json

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

字段	类型	说明
`type`	字符串	固定为 `"excalidraw"`
`version`	数字	架构版本（当前为 `2` ）
`source`	字符串	来源URL
`elements`	数组	所有图表元素
`appState`	对象	画布设置（背景等）
`files`	对象	按fileId索引的二进制文件（图片）

Workflow

工作流程

Plan - Choose diagram type, layout, colors
Generate - Create elements with proper structure
Validate - Check bindings and structure before writing

规划 - 选择图表类型、布局、颜色
生成 - 创建结构正确的元素
验证 - 在写入前检查绑定关系和结构

Validation Checklist

验证检查清单

Before writing a diagram, verify:

在绘制图表前，请验证以下内容：

Bindings

绑定关系

Arrows connecting shapes have both
```
startBinding
```
and
```
endBinding
```
set
Arrow
```
x,y
```
sits at the source shape's edge, not floating in space
Shapes list connected arrows in their
```
boundElements
```
(bidirectional)
Text labels have
```
containerId
```
pointing to their container
Containers have
```
boundElements
```
referencing their text

连接形状的箭头需同时设置
```
startBinding
```
和
```
endBinding
```
箭头的
```
x,y
```
坐标需位于源形状的边缘，而非悬浮在空白处
形状需在其
```
boundElements
```
中列出所连接的箭头（双向绑定）
文本标签需设置
```
containerId
```
指向其所属容器
容器需在
```
boundElements
```
中引用其对应的文本

Polygons

多边形

Polygon labels use
```
groupIds
```
(not
```
containerId
```
)
Text positioned manually at polygon center
Polygons cannot have arrow bindings - bind to grouped text label instead
Polygon's
```
boundElements
```
must be
```
null
```

多边形标签使用
```
groupIds
```
（而非
```
containerId
```
）
文本需手动定位在多边形中心
多边形无法设置箭头绑定 - 请绑定到分组的文本标签
多边形的
```
boundElements
```
必须设为
```
null
```

Layout

布局

Elements don't overlap unexpectedly
Arrows route around shapes, not through them
Minimum 40px between sibling elements
All IDs are unique
Label text matches actual names (verify spelling)

元素不会意外重叠
箭头需绕开形状，而非穿过形状
同级元素之间至少保持40px间距
所有ID均唯一
标签文本与实际名称一致（检查拼写）

Text

文本

Use standard font sizes: S (16), M (20), L (28), XL (36)

Bound text: set

containerId

textAlign: "center"

verticalAlign: "middle"

Position bound text at container center; Excalidraw adjusts automatically

使用标准字体大小：S(16)、M(20)、L(28)、XL(36)

绑定文本：设置

containerId

、

textAlign: "center"

、

verticalAlign: "middle"

将绑定文本定位在容器中心；Excalidraw会自动调整位置

Frames (presentations only)

框架（仅用于演示）

Frames are slides/artboards, not for grouping elements in a single diagram

框架是幻灯片/画板，不可用于单个图表中的元素分组

Reference Index

参考索引

Load references progressively based on need:

根据需求逐步加载参考内容：

Elements

元素

Reference	Load When
shapes.md	Using rectangles, diamonds, ellipses
text.md	Adding labels, fonts, text styling
linear.md	Creating arrows, lines, bindings
freedraw.md	Hand-drawn paths
images.md	Embedding images
frames.md	Slides/artboards for presentations
polygons.md	Custom polygon shapes

参考链接	加载时机
shapes.md	使用矩形、菱形、椭圆时
text.md	添加标签、设置字体、文本样式时
linear.md	创建箭头、线条、绑定关系时
freedraw.md	绘制手绘路径时
images.md	嵌入图片时
frames.md	为演示创建幻灯片/画板时
polygons.md	使用自定义多边形形状时

Styling

样式

Reference	Load When
fill-stroke.md	Fill patterns, strokes
colors.md	Color palette selection
positioning.md	Layout, alignment, spacing
grouping.md	Groups, z-ordering

参考链接	加载时机
fill-stroke.md	设置填充图案、描边时
colors.md	选择调色板时
positioning.md	设置布局、对齐方式、间距时
grouping.md	设置分组、层级顺序时