excalidraw-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Excalidraw Diagram Generation

Excalidraw 图表生成

Workflow

工作流程

Write excalidraw JSON to
```
<name>.excalidraw
```

Render:

python -m excalidraw <name>.excalidraw -o <name>.png

编写Excalidraw JSON内容到
```
<name>.excalidraw
```
文件

渲染：

python -m excalidraw <name>.excalidraw -o <name>.png

File Structure

文件结构

json

{
  "type": "excalidraw",
  "version": 2,
  "source": "claude",
  "elements": [...],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

json

{
  "type": "excalidraw",
  "version": 2,
  "source": "claude",
  "elements": [...],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

Available Shapes

可用形状

```
rectangle
```
,
```
ellipse
```
,
```
diamond
```
,
```
line
```
,
```
arrow
```
,
```
text
```

```
rectangle
```
（矩形）、
```
ellipse
```
（椭圆）、
```
diamond
```
（菱形）、
```
line
```
（直线）、
```
arrow
```
（箭头）、
```
text
```
（文本）

Shape Properties

形状属性

json

{
  "id": "unique_id",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 150,
  "height": 80,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0
}

json

{
  "id": "unique_id",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 150,
  "height": 80,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 0
}

Text Elements

文本元素

json

{
  "id": "label1",
  "type": "text",
  "x": 110,
  "y": 110,
  "width": 130,
  "height": 60,
  "text": "Multi-line\ntext here",
  "fontSize": 16,
  "fontFamily": 5,
  "textAlign": "center",
  "strokeColor": "#1e1e1e"
}

fontFamily: 1=hand-drawn, 2=normal, 5=monospace (use for technical diagrams)

json

{
  "id": "label1",
  "type": "text",
  "x": 110,
  "y": 110,
  "width": 130,
  "height": 60,
  "text": "多行\n文本示例",
  "fontSize": 16,
  "fontFamily": 5,
  "textAlign": "center",
  "strokeColor": "#1e1e1e"
}

fontFamily（字体）: 1=手绘风格, 2=常规字体, 5=等宽字体（用于技术图表）

Arrow/Line Elements

箭头/直线元素

json

{
  "id": "arrow1",
  "type": "arrow",
  "x": 100,
  "y": 100,
  "width": 0,
  "height": 50,
  "strokeColor": "#1971c2",
  "strokeWidth": 2,
  "roughness": 0,
  "points": [[0, 0], [0, 50]]
}

json

{
  "id": "arrow1",
  "type": "arrow",
  "x": 100,
  "y": 100,
  "width": 0,
  "height": 50,
  "strokeColor": "#1971c2",
  "strokeWidth": 2,
  "roughness": 0,
  "points": [[0, 0], [0, 50]]
}

Dashed Frames

虚线框架

json

{
  "id": "frame1",
  "type": "rectangle",
  "strokeColor": "#2f9e44",
  "backgroundColor": "transparent",
  "strokeStyle": "dashed",
  "roughness": 0
}

json

{
  "id": "frame1",
  "type": "rectangle",
  "strokeColor": "#2f9e44",
  "backgroundColor": "transparent",
  "strokeStyle": "dashed",
  "roughness": 0
}

Color Palette

调色板

Color	Stroke	Fill
Green	#2f9e44	#b2f2bb
Orange	#f08c00	#ffd8a8, #ffec99
Red	#e03131	#ffc9c9
Blue	#1971c2	#a5d8ff, #d0ebff
Purple	#9c36b5	#e599f7, #eebefa
Grey	#868e96	#dee2e6, #e9ecef

颜色	描边色	填充色
绿色	#2f9e44	#b2f2bb
橙色	#f08c00	#ffd8a8, #ffec99
红色	#e03131	#ffc9c9
蓝色	#1971c2	#a5d8ff, #d0ebff
紫色	#9c36b5	#e599f7, #eebefa
灰色	#868e96	#dee2e6, #e9ecef

Spacing Guidelines

间距规范

Title fontSize: 28-36
Section headers: 20-24
Body text: 12-16
Minimum padding inside boxes: 10px
Gap between sections: 20-30px
Dashed frame padding: 20px inside content

标题字号：28-36
章节标题：20-24
正文字号：12-16
盒子内部最小内边距：10px
章节间间距：20-30px
虚线框架内部内容内边距：20px

Arrow Labeling Rules

箭头标注规则

Arrows point AT things, not along them - perpendicular to target
Arrow tip touches the target
Text and arrow must not overlap

箭头指向目标对象，而非沿对象延伸——与目标垂直
箭头尖端需接触目标
文本与箭头不得重叠

Iteration Log

迭代记录

fontFamily: Use 5 (monospace) for technical diagrams, not 1 (hand-drawn).
Text in shapes: Create separate text elements inside boxes for reliable rendering.
roughness: Set to 0 for clean technical diagrams.

fontFamily：技术图表使用5（等宽字体），而非1（手绘风格）。
形状内文本：在盒子内创建独立的文本元素以确保渲染可靠。
roughness：设置为0以生成简洁的技术图表。