Back to Details

excalidraw

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Excalidraw Diagram Generator

Excalidraw 图表生成器

Create Excalidraw-compatible JSON diagrams. Output 
.excalidraw.json
files.
创建兼容Excalidraw的JSON图表。输出
.excalidraw.json
文件。

JSON Schema

JSON 架构

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

Coordinate System

坐标系

  • Origin: Top-left corner (0, 0)
  • X-axis: Increases rightward
  • Y-axis: Increases downward
  • Unit: Pixels
  • 原点: 左上角 (0, 0)
  • X轴: 向右递增
  • Y轴: 向下递增
  • 单位: 像素

Grid-Based Layout System

基于网格的布局系统

Use a 20px grid for alignment. Standard positions:
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
使用20px网格进行对齐。标准位置：
GRID_UNIT = 20
COLUMN_WIDTH = 200    # 元素 + 间距
ROW_HEIGHT = 150      # 元素 + 间距

位置计算公式:
  x = START_X + (column * COLUMN_WIDTH)
  y = START_Y + (row * ROW_HEIGHT)

推荐 START_X = 50, START_Y = 100

Standard Element Sizes

标准元素尺寸

ElementWidthHeightUse Case
Small box12060Labels, simple steps
Standard box16080Process steps
Large box200100Detailed nodes
Wide box24080Long text
Diamond100100Decision points
Circle8080Start/End nodes
Icon circle9080With emoji
元素宽度高度使用场景
小方框12060标签、简单步骤
标准方框16080流程步骤
大方框200100详细节点
宽方框24080长文本
菱形100100决策点
圆形8080开始/结束节点
图标圆形9080搭配表情符号

Text Centering Formula

文本居中计算公式

CRITICAL: To center text inside a shape:
text_x = shape_x + (shape_width - text_width) / 2
text_y = shape_y + (shape_height - text_height) / 2
关键: 要在形状内居中放置文本：
text_x = shape_x + (shape_width - text_width) / 2
text_y = shape_y + (shape_height - text_height) / 2

Text Size Reference

文本尺寸参考

Font SizeChar WidthLine HeightUse
11~6px15pxLabels, annotations
12~7px16pxSecondary text
14~8px18pxBody text
16~9px20pxPrimary text
18~10px24pxHeadings
20~11px26pxTitles
28~16px35pxIcons/Emoji
Estimate text_width: 
char_count * char_width
Estimate text_height: 
line_count * line_height
字号字符宽度行高用途
11~6px15px标签、注释
12~7px16px次要文本
14~8px18px正文
16~9px20px主要文本
18~10px24px标题
20~11px26px大标题
28~16px35px图标/表情符号
估算text_width: 
字符数 * 字符宽度
估算text_height: 
行数 * 行高

Centering Example

居中示例

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
形状: x=100, y=100, width=160, height=80
文本: "Process" (7个字符), 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

Element Types

元素类型

Common Properties (required for all)

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

json
{
  "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
}
json
{
  "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
}

Type-Specific Properties

类型专属属性

Rectangle: Add 
"roundness": {"type": 3}
for rounded corners
Text:
json
{
  "type": "text",
  "text": "Content\nLine 2",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle"
}
  • fontFamily: 1=Virgil (hand), 2=Helvetica, 3=Cascadia (mono)
Arrow/Line:
json
{
  "type": "arrow",
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow"
}
  • Points are relative to element's x,y
  • Arrowheads: 
    null
    , 
    "arrow"
    , 
    "bar"
    , 
    "dot"
    , 
    "triangle"
矩形: 添加
"roundness": {"type": 3}
实现圆角效果
文本:
json
{
  "type": "text",
  "text": "内容\n第二行",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle"
}
  • fontFamily: 1=Virgil（手写体）, 2=Helvetica, 3=Cascadia（等宽）
箭头/线条:
json
{
  "type": "arrow",
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow"
}
  • 点坐标相对于元素的x,y位置
  • 箭头样式: 
    null
    , 
    "arrow"
    , 
    "bar"
    , 
    "dot"
    , 
    "triangle"

Arrow Positioning

箭头定位

Horizontal Arrow (Left to Right)

水平箭头（从左到右）

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]]
从形状(x1, y1, w1, h1)到形状(x2, y2, w2, h2):

arrow_x = x1 + w1           # 源形状右边缘
arrow_y = y1 + h1/2         # 垂直居中
gap = x2 - (x1 + w1)        # 形状间间距
points = [[0, 0], [gap, 0]]

Vertical Arrow (Top to Bottom)

垂直箭头（从上到下）

arrow_x = x1 + w1/2         # Horizontal center
arrow_y = y1 + h1           # Bottom edge of source
gap = y2 - (y1 + h1)
points = [[0, 0], [0, gap]]
arrow_x = x1 + w1/2         # 水平居中
arrow_y = y1 + h1           # 源形状下边缘
gap = y2 - (y1 + h1)
points = [[0, 0], [0, gap]]

Diagonal/Curved Arrow

对角线/曲线箭头

points = [[0, 0], [dx/2, dy], [dx, dy]]  # Curved path
points = [[0, 0], [dx/2, dy], [dx, dy]]  # 曲线路径

Color Palette

调色板

ColorStrokeBackgroundUse
Blue#1971c2#a5d8ffPrimary, info
Green#2f9e44#b2f2bbSuccess, start
Orange#e8590c#ffc9c9Warning, action
Red#e03131#ffc9c9Error, end
Purple#9c36b5#eebefaSpecial, loop
Yellow#f08c00#ffec99Highlight
Teal#099268#96f2d7Secondary
Gray#868e96#dee2e6Neutral, labels
Black#1e1e1e-Text, borders
颜色描边色背景色用途
蓝色#1971c2#a5d8ff主色调、信息类
绿色#2f9e44#b2f2bb成功、开始节点
橙色#e8590c#ffc9c9警告、操作类
红色#e03131#ffc9c9错误、结束节点
紫色#9c36b5#eebefa特殊、循环节点
黄色#f08c00#ffec99高亮
蓝绿色#099268#96f2d7次要色调
灰色#868e96#dee2e6中性、标签
黑色#1e1e1e-文本、边框

Z-Order (Element Array Order)

Z轴层级（元素数组顺序）

Elements render in array order. First = back, last = front.
Correct order:
  1. Background shapes (containers, frames)
  2. Connection lines/arrows
  3. Foreground shapes (nodes, boxes)
  4. Text labels
  5. Icons/overlays
元素按数组顺序渲染。第一个元素在最底层，最后一个在最上层。
正确顺序:
  1. 背景形状（容器、框架）
  2. 连接线/箭头
  3. 前景形状（节点、方框）
  4. 文本标签
  5. 图标/覆盖层

Layout Patterns

布局模式

Horizontal Flow (Left to Right)

水平流（从左到右）

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
COL_GAP = 60  # 元素间间距

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

Vertical Flow (Top to Bottom)

垂直流（从上到下）

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
ROW_GAP = 50

元素1: x=100, y=50,  w=160, h=80
箭头1:   x=180, y=130, points=[[0,0],[0,50]]
元素2: x=100, y=180, w=160, h=80

Decision Branch (Diamond)

决策分支（菱形）

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]]
菱形:    x=300, y=200, w=100, h=100
中心:     (350, 250)

是分支（右上）:
  arrow_x=350, arrow_y=200
  points=[[0,0], [0,-50], [100,-50]]

否分支（右下）:
  arrow_x=350, arrow_y=300
  points=[[0,0], [0,50], [100,50]]

Feedback Loop (Return Arrow)

反馈循环（返回箭头）

From bottom-right back to left:
  Start: (800, 400)
  points=[
    [0, 0],        # Start
    [0, 80],       # Down
    [-400, 80],    # Left
    [-400, -150]   # Up to target
  ]
从右下角返回左侧:
  起点: (800, 400)
  points=[
    [0, 0],        # 起点
    [0, 80],       # 向下
    [-400, 80],    # 向左
    [-400, -150]   # 向上到目标
  ]

Complete Node Example

完整节点示例

json
[
  {
    "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
  }
]
json
[
  {
    "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": "流程步骤",
    "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
  }
]

Positioning Checklist

定位检查清单

Before generating:
  1. ☐ Define grid: START_X, START_Y, COLUMN_WIDTH, ROW_HEIGHT
  2. ☐ List all elements with row/column positions
  3. ☐ Calculate exact x,y using formulas
  4. ☐ Calculate text positions using centering formula
  5. ☐ Calculate arrow start points and relative endpoints
  6. ☐ Order elements correctly for z-order
  7. ☐ Assign unique IDs and incrementing seeds
生成前确认：
  1. ☐ 定义网格：START_X, START_Y, COLUMN_WIDTH, ROW_HEIGHT
  2. ☐ 列出所有元素的行/列位置
  3. ☐ 使用公式计算精确的x,y坐标
  4. ☐ 使用居中公式计算文本位置
  5. ☐ 计算箭头起点和相对终点
  6. ☐ 按Z轴层级正确排序元素
  7. ☐ 分配唯一ID和递增的seed值

Templates

模板

  • Basic flowchart: 
    assets/flowchart-template.excalidraw.json
  • Processing loop: 
    references/processing-loop-template.md
  • Element specs: 
    references/elements.md
  • 基础流程图: 
    assets/flowchart-template.excalidraw.json
  • 处理循环: 
    references/processing-loop-template.md
  • 元素规范: 
    references/elements.md

Output

输出

  1. Save as 
    .excalidraw.json
  2. Copy to 
    /mnt/user-data/outputs/
  3. Tell user: "Open at excalidraw.com → Menu → Open"
  1. 保存为
    .excalidraw.json
    格式
  2. 复制到
    /mnt/user-data/outputs/
    目录
  3. 告知用户："打开excalidraw.com → 菜单 → 打开文件"