Excalidraw Diagram Generator

Create Excalidraw diagrams from text content with multiple output formats.

Output Modes

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

Output Formats

Mode 1: Obsidian Format (Default)

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 完整数据}
\`\`\`
%%

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

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

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

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

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

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

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 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 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 Processing

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

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
}

Text-Specific Properties

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 Configuration

json

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

files Field

json

"files": {}

Implementation Notes

Auto-save & File Generation Workflow

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

1. Select Appropriate Diagram Type

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. Generate Meaningful Filename

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. Auto-save File Using Write Tool

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

4. Ensure Markdown Structure is Completely Correct

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 数据}
\`\`\`
%%

5. JSON Data Requirements

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. User Feedback and Confirmation

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 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

excalidraw-diagram

NPX Install

Tags

SKILL.md Content (Chinese)

Excalidraw Diagram Generator

Output Modes

Workflow

Output Formats

Mode 1: Obsidian Format (Default)

Mode 2: Standard Excalidraw Format

Mode 3: Animated Excalidraw Format

Diagram Types & Selection Guide

Design Rules

Text & Format

Layout & Design

Color Palette

JSON Structure

Element Template

Additional Technical Requirements

Text Elements Processing

Coordinate and Layout

Required Fields for All Elements

Text-Specific Properties

appState Configuration

files Field

Implementation Notes

Auto-save & File Generation Workflow

1. Select Appropriate Diagram Type

2. Generate Meaningful Filename

3. Auto-save File Using Write Tool

4. Ensure Markdown Structure is Completely Correct

5. JSON Data Requirements

6. User Feedback and Confirmation

Example Output Messages