excalidraw-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Excalidraw Diagram Generator

Create Excalidraw diagrams from text content with multiple output formats.

Output Modes

根据用户的触发词选择输出模式：

触发词	输出模式	文件格式	用途
`Excalidraw` 、 `画图` 、 `流程图` 、 `思维导图`	Obsidian（默认）	`.md`	在 Obsidian 中直接打开
`标准Excalidraw` 、 `standard excalidraw`	Standard	`.excalidraw`	在 excalidraw.com 打开/编辑/分享
`Excalidraw动画` 、 `动画图` 、 `animate`	Animated	`.excalidraw`	拖到 excalidraw-animate 生成动画

Select output mode based on user trigger words:

Trigger Words	Output Mode	File Format	Usage
`Excalidraw` , `画图` , `Flowchart` , `Mind Map`	Obsidian (Default)	`.md`	Open directly in Obsidian
`标准Excalidraw` , `standard excalidraw`	Standard	`.excalidraw`	Open/edit/share on excalidraw.com
`Excalidraw动画` , `Animated Diagram` , `animate`	Animated	`.excalidraw`	Drag to excalidraw-animate to generate animation

Workflow

Detect output mode from trigger words (see Output Modes table above)
Analyze content - identify concepts, relationships, hierarchy
Choose diagram type (see Diagram Types below)
Generate Excalidraw JSON (add animation order if Animated mode)
Output in correct format based on mode
Automatically save to current working directory
Notify user with file path and usage instructions

Detect output mode from trigger words (see Output Modes table above)
Analyze content - identify concepts, relationships, hierarchy
Choose diagram type (see Diagram Types below)
Generate Excalidraw JSON (add animation order if Animated mode)
Output in correct format based on mode
Automatically save to current working directory
Notify user with file path and usage instructions

Output Formats

Mode 1: Obsidian Format (Default)

严格按照以下结构输出，不得有任何修改：

markdown

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

Output strictly follows the structure below, no modifications allowed:

markdown

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

Excalidraw Data

Text Elements

Drawing

```json {JSON 完整数据} ``` %%


**关键要点：**
- Frontmatter 必须包含 `tags: [excalidraw]`
- 警告信息必须完整
- JSON 必须被 `%%` 标记包围
- 不能使用 `excalidraw-plugin: parsed` 以外的其他 frontmatter 设置
- **文件扩展名**：`.md`

```json {JSON 完整数据} ``` %%


**Key Points:**
- Frontmatter must include `tags: [excalidraw]`
- The warning message must be complete
- JSON must be enclosed in `%%` tags
- No other frontmatter settings except `excalidraw-plugin: parsed` are allowed
- **File Extension**: `.md`

Mode 2: Standard Excalidraw Format

直接输出纯 JSON 文件，可在 excalidraw.com 打开：

json

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

关键要点：

```
source
```
使用
```
https://excalidraw.com
```
（不是 Obsidian 插件）
纯 JSON，无 Markdown 包装
文件扩展名：
```
.excalidraw
```

Output pure JSON file directly, which can be opened on excalidraw.com:

json

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

Key Points:

```
source
```
uses
```
https://excalidraw.com
```
(not Obsidian plugin)
Pure JSON, no Markdown wrapping
File Extension:
```
.excalidraw
```

Mode 3: Animated Excalidraw Format

与 Standard 格式相同，但每个元素添加

customData.animate

字段控制动画顺序：

json

{
  "id": "element-1",
  "type": "rectangle",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他标准字段
}

动画顺序规则：

```
order
```
: 动画播放顺序（1, 2, 3...），数字越小越先出现
```
duration
```
: 该元素的绘制时长（毫秒），默认 500
相同
```
order
```
的元素同时出现
建议顺序：标题 → 主要框架 → 连接线 → 细节文字

使用方法：

生成
```
.excalidraw
```
文件
拖到 https://dai-shi.github.io/excalidraw-animate/
点击 Animate 预览，然后导出 SVG 或 WebM

文件扩展名：

.excalidraw

Same as Standard format, but add

customData.animate

field to each element to control animation order:

json

{
  "id": "element-1",
  "type": "rectangle",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他标准字段
}

Animation Order Rules:

```
order
```
: Animation play sequence (1, 2, 3...), smaller numbers appear first
```
duration
```
: Drawing duration of the element (in milliseconds), default 500
Elements with the same
```
order
```
appear simultaneously
Recommended sequence: Title → Main Framework → Connectors → Detailed Text

Usage:

Generate
```
.excalidraw
```
file
Drag to https://dai-shi.github.io/excalidraw-animate/
Click Animate to preview, then export as SVG or WebM

File Extension:

.excalidraw

Diagram Types & Selection Guide

选择合适的图表形式，以提升理解力与视觉吸引力。

类型	英文	使用场景	做法
流程图	Flowchart	步骤说明、工作流程、任务执行顺序	用箭头连接各步骤，清晰表达流程走向
思维导图	Mind Map	概念发散、主题分类、灵感捕捉	以中心为核心向外发散，放射状结构
层级图	Hierarchy	组织结构、内容分级、系统拆解	自上而下或自左至右构建层级节点
关系图	Relationship	要素之间的影响、依赖、互动	图形间用连线表示关联，箭头与说明
对比图	Comparison	两种以上方案或观点的对照分析	左右两栏或表格形式，标明比较维度
时间线图	Timeline	事件发展、项目进度、模型演化	以时间为轴，标出关键时间点与事件
矩阵图	Matrix	双维度分类、任务优先级、定位	建立 X 与 Y 两个维度，坐标平面安置
自由布局	Freeform	内容零散、灵感记录、初步信息收集	无需结构限制，自由放置图块与箭头

Choose the appropriate diagram type to enhance understanding and visual appeal.

Type	English	Usage Scenario	Implementation
Flowchart	Flowchart	Step-by-step instructions, workflows, task execution sequences	Connect steps with arrows to clearly express process flow
Mind Map	Mind Map	Concept divergence, theme classification, inspiration capture	Radiate outward from a central core in a radial structure
Hierarchy Chart	Hierarchy	Organizational structures, content classification, system decomposition	Build hierarchical nodes from top to bottom or left to right
Relationship Diagram	Relationship	Influence, dependency, interaction between elements	Use connections between shapes to represent relationships, with arrows and explanations
Comparison Chart	Comparison	Comparative analysis of two or more solutions or viewpoints	Use two-column or table format, clearly marking comparison dimensions
Timeline	Timeline	Event development, project progress, model evolution	Use time as the axis, marking key time points and events
Matrix Chart	Matrix	Two-dimensional classification, task priority, positioning	Establish X and Y dimensions, place elements on the coordinate plane
Freeform Layout	Freeform	Dispersed content, inspiration recording, initial information collection	No structural restrictions, freely place blocks and arrows

Design Rules

Text & Format

所有文本元素必须使用
```
fontFamily: 5
```
（Excalifont 手写字体）
文本中的双引号替换规则：
```
"
```
替换为
```
『』
```
文本中的圆括号替换规则：
```
()
```
替换为
```
「」
```
字体大小规则：
- 标题：24-28px
- 副标题：18-20px
- 正文/说明：14-16px
行高：所有文本使用
```
lineHeight: 1.25
```

All text elements must use
```
fontFamily: 5
```
(Excalifont handwritten font)
Double quote replacement rule in text:
```
"
```
replaced with
```
『』
```
Parentheses replacement rule in text:
```
()
```
replaced with
```
「」
```
Font size rules:
- Title: 24-28px
- Subtitle: 18-20px
- Body text/Explanations: 14-16px
Line height: All text uses
```
lineHeight: 1.25
```

Layout & Design

画布范围：建议所有元素在 0-1200 x 0-800 区域内
元素间距：确保元素间距适当，整体布局美观
层次清晰：使用不同颜色和形状区分不同层级的信息
图形元素：适当使用矩形框、圆形、箭头等元素来组织信息
禁止 Emoji：不要在图表文本中使用任何 Emoji 符号，如需视觉标记请使用简单图形（圆形、方形、箭头）或颜色区分

Canvas Range: It is recommended that all elements be within the 0-1200 x 0-800 area
Element Spacing: Ensure appropriate spacing between elements for an aesthetic overall layout
Clear Hierarchy: Use different colors and shapes to distinguish different levels of information
Graphic Elements: Appropriately use rectangular boxes, circles, arrows and other elements to organize information
No Emojis: Do not use any emoji symbols in diagram text; for visual markers, use simple shapes (circles, squares, arrows) or color differentiation instead

Color Palette

标题颜色：
```
#1e40af
```
（深蓝）
副标题/连接线：
```
#3b82f6
```
（亮蓝）
正文文字：
```
#374151
```
（灰色）
强调/重点：
```
#f59e0b
```
（金色）
其他配色：建议使用和谐的配色方案，避免过多颜色

参考：references/excalidraw-schema.md

Title Color:
```
#1e40af
```
(Dark Blue)
Subtitle/Connector Color:
```
#3b82f6
```
(Bright Blue)
Body Text Color:
```
#374151
```
(Gray)
Emphasis/Key Points Color:
```
#f59e0b
```
(Gold)
Other Color Schemes: It is recommended to use harmonious color schemes, avoid excessive colors

参考：references/excalidraw-schema.md

JSON Structure

Obsidian 模式：

json

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

Standard / Animated 模式：

json

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

Obsidian Mode:

json

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

Standard / Animated Mode:

json

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

Element Template

Each element requires these fields:

json

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "index": "a1",
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "versionNonce": 987654321,
  "isDeleted": false,
  "boundElements": [],
  "updated": 1751928342106,
  "link": null,
  "locked": false
}

Text elements add:

json

{
  "text": "显示文本",
  "rawText": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

Animated 模式额外添加

customData

字段：

json

{
  "id": "title-1",
  "type": "text",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他字段
}

See references/excalidraw-schema.md for all element types.

Each element requires these fields:

json

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "index": "a1",
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "versionNonce": 987654321,
  "isDeleted": false,
  "boundElements": [],
  "updated": 1751928342106,
  "link": null,
  "locked": false
}

Text elements add:

json

{
  "text": "显示文本",
  "rawText": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

Animated Mode adds additional

customData

field:

json

{
  "id": "title-1",
  "type": "text",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他字段
}

See references/excalidraw-schema.md for all element types.

Additional Technical Requirements

Text Elements 处理

Text Elements Processing

```
## Text Elements
```
部分在 Markdown 中必须留空，仅用
```
%%
```
作为分隔符
Obsidian ExcaliDraw 插件会根据 JSON 数据自动填充文本元素
不需要手动列出所有文本内容

The
```
## Text Elements
```
section in Markdown must be left blank, only use
```
%%
```
as separators
The Obsidian Excalidraw plugin will automatically populate text elements based on JSON data
No need to manually list all text content

坐标与布局

Coordinate and Layout

坐标系统：左上角为原点 (0,0)
推荐范围：所有元素在 0-1200 x 0-800 像素范围内
元素 ID：每个元素需要唯一的
```
id
```
（可以是字符串，如「title」「box1」等）
Index 字段：建议使用字母数字 (a1, a2, a3...)

Coordinate System: The top-left corner is the origin (0,0)
Recommended Range: All elements are within the 0-1200 x 0-800 pixel range
Element ID: Each element requires a unique
```
id
```
(can be a string, such as "title", "box1", etc.)
Index Field: It is recommended to use alphanumeric values (a1, a2, a3...)

Required Fields for All Elements

json

{
  "id": "unique-identifier",
  "type": "rectangle|text|arrow|ellipse|diamond",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#color-hex",
  "backgroundColor": "transparent|#color-hex",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid|dashed",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "index": "a1",
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "versionNonce": 987654321,
  "isDeleted": false,
  "boundElements": [],
  "updated": 1751928342106,
  "link": null,
  "locked": false
}

json

{
  "id": "unique-identifier",
  "type": "rectangle|text|arrow|ellipse|diamond",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#color-hex",
  "backgroundColor": "transparent|#color-hex",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid|dashed",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "index": "a1",
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "versionNonce": 987654321,
  "isDeleted": false,
  "boundElements": [],
  "updated": 1751928342106,
  "link": null,
  "locked": false
}

Text-Specific Properties

文本元素 (type: "text") 需要额外属性：

json

{
  "text": "显示文本",
  "rawText": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

Text elements (type: "text") require additional properties:

json

{
  "text": "显示文本",
  "rawText": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

appState 配置

appState Configuration

json

"appState": {
  "gridSize": null,
  "viewBackgroundColor": "#ffffff"
}

json

"appState": {
  "gridSize": null,
  "viewBackgroundColor": "#ffffff"
}

files 字段

files Field

json

"files": {}

json

"files": {}

Implementation Notes

Auto-save & File Generation Workflow

当生成 Excalidraw 图表时，必须自动执行以下步骤：

When generating an Excalidraw diagram, the following steps must be executed automatically:

1. 选择合适的图表类型

1. Select Appropriate Diagram Type

根据用户提供的内容特性，参考上方「Diagram Types & Selection Guide」表
分析内容的核心诉求，选择最合适的可视化形式

Refer to the "Diagram Types & Selection Guide" table above based on the characteristics of the user-provided content
Analyze the core needs of the content and select the most suitable visualization form

2. 生成有意义的文件名

2. Generate Meaningful Filename

根据输出模式选择文件扩展名：

模式文件名格式示例

Obsidian

模式	文件名格式	示例
Obsidian	`[主题].[类型].md`	`商业模式.relationship.md`
Standard	`[主题].[类型].excalidraw`	`商业模式.relationship.excalidraw`
Animated	`[主题].[类型].animate.excalidraw`	`商业模式.relationship.animate.excalidraw`

[主题].[类型].md

商业模式.relationship.md

Standard

[主题].[类型].excalidraw

商业模式.relationship.excalidraw

Animated

[主题].[类型].animate.excalidraw

商业模式.relationship.animate.excalidraw

优先使用中文以提高清晰度

Select file extension based on output mode:

Mode	Filename Format	Example
Obsidian	`[Theme].[Type].md`	`商业模式.relationship.md`
Standard	`[Theme].[Type].excalidraw`	`商业模式.relationship.excalidraw`
Animated	`[Theme].[Type].animate.excalidraw`	`商业模式.relationship.animate.excalidraw`

Priority is given to using Chinese to improve clarity

3. 使用 Write 工具自动保存文件

3. Auto-save File Using Write Tool

保存位置：当前工作目录（自动检测环境变量）
完整路径：
```
{current_directory}/[filename].md
```
这样可以实现灵活迁移，无需硬编码路径

Save Location: Current working directory (automatically detected via environment variables)
Full Path:
```
{current_directory}/[filename].md
```
This enables flexible migration without hardcoding paths

4. 确保 Markdown 结构完全正确

4. Ensure Markdown Structure is Completely Correct

必须按以下格式生成（不能有任何修改）：

markdown

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

Must be generated in the following format (no modifications allowed):

markdown

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

Excalidraw Data

Text Elements

Drawing

```json {完整的 JSON 数据} ``` %%

undefined

```json {完整的 JSON 数据} ``` %%

undefined

5. JSON 数据要求

5. JSON Data Requirements

包含完整的 Excalidraw JSON 结构
所有文本元素使用
```
fontFamily: 5
```
文本中的
```
"
```
替换为
```
『』
```
文本中的
```
()
```
替换为
```
「」
```
JSON 格式必须有效，通过语法检查
所有元素有唯一的
```
id
```
包含
```
appState
```
和
```
files: {}
```
字段

Contains complete Excalidraw JSON structure
All text elements use
```
fontFamily: 5
```
Replace
```
"
```
in text with
```
『』
```
Replace
```
()
```
in text with
```
「」
```
JSON format must be valid and pass syntax checks
All elements have unique
```
id
```
Includes
```
appState
```
and
```
files: {}
```
fields

6. 用户反馈与确认

6. User Feedback and Confirmation

向用户报告：

图表已生成
精确的保存位置
如何在 Obsidian 中查看
图表的设计选择说明（选择了什么类型的图表、为什么）
是否需要调整或修改

Report to the user:

Diagram has been generated
Exact save location
How to view in Obsidian
Explanation of diagram design choices (which type of diagram was selected and why)
Whether adjustments or modifications are needed

Example Output Messages

Obsidian 模式：

Excalidraw 图已生成！

保存位置：商业模式.relationship.md

使用方法：
1. 在 Obsidian 中打开此文件
2. 点击右上角 MORE OPTIONS 菜单
3. 选择 Switch to EXCALIDRAW VIEW

Standard 模式：

Excalidraw 图已生成！

保存位置：商业模式.relationship.excalidraw

使用方法：
1. 打开 https://excalidraw.com
2. 点击左上角菜单 → Open → 选择此文件
3. 或直接拖拽文件到 excalidraw.com 页面

Animated 模式：

Excalidraw 动画图已生成！

保存位置：商业模式.relationship.animate.excalidraw

动画顺序：标题(1) → 主框架(2-4) → 连接线(5-7) → 说明文字(8-10)

生成动画：
1. 打开 https://dai-shi.github.io/excalidraw-animate/
2. 点击 Load File 选择此文件
3. 预览动画效果
4. 点击 Export 导出 SVG 或 WebM

Obsidian Mode:

Excalidraw diagram generated!

Save Location: 商业模式.relationship.md

Usage:
1. Open this file in Obsidian
2. Click the MORE OPTIONS menu in the top right corner
3. Select Switch to EXCALIDRAW VIEW

Standard Mode:

Excalidraw diagram generated!

Save Location: 商业模式.relationship.excalidraw

Usage:
1. Open https://excalidraw.com
2. Click the top-left menu → Open → Select this file
3. Or directly drag and drop the file onto the excalidraw.com page

Animated Mode:

Excalidraw animated diagram generated!

Save Location: 商业模式.relationship.animate.excalidraw

Animation Sequence: Title(1) → Main Framework(2-4) → Connectors(5-7) → Explanatory Text(8-10)

Generate Animation:
1. Open https://dai-shi.github.io/excalidraw-animate/
2. Click Load File to select this file
3. Preview animation effect
4. Click Export to export as SVG or WebM