Excalidraw Diagram

Excalidraw Diagram Generator

Create Excalidraw diagrams from text content, outputting Obsidian-ready .md files.

Workflow

1. Analyze content - identify concepts, relationships, hierarchy
2. Choose diagram type (see below)
3. Generate Excalidraw JSON
4. Generate Obsidian-ready .md file with Excalidraw frontmatter
5. Automatically save to current working directory
6. Notify user with file path and confirm save successful

Output Format

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

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

Diagram Types & Selection Guide

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

Design Rules

Text & Format

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

Layout & Design

• 画布范围：建议所有元素在 0-1200 x 0-800 区域内
• 元素间距：确保元素间距适当，整体布局美观
• 层次清晰：使用不同颜色和形状区分不同层级的信息
• 图形元素：适当使用矩形框、圆形、箭头等元素来组织信息

Color Palette

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

参考：references/excalidraw-schema.md

JSON Structure

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

Element Template

Each element requires these fields:

{
  "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:

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

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

Additional Technical Requirements

Text Elements 处理

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

坐标与布局

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

Required Fields for All Elements

{
  "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") 需要额外属性：

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

appState 配置

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

files 字段

"files": {}

Implementation Notes

Auto-save & File Generation Workflow

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

1. 选择合适的图表类型

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

2. 生成有意义的文件名

• 格式：[主题].[类型].md
• 例如：内容创作流程.flowchart.md、Axton商业模式.relationship.md
• 优先使用中文以提高清晰度

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

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

4. 确保 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 数据要求

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

6. 用户反馈与确认

向用户报告：

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

Example Output Message

✅ Excalidraw 图已自动生成！

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

🎨 图表选择说明：
我选择了「关系图」来表现三大产品线之间的转化关系，用箭头展示用户的升级路径，以及它们如何共同构成完整的商业闭环。

📖 使用方法：
1. 在 Obsidian 中打开此文件
2. 点击右上角「MORE OPTIONS」菜单
3. 选择「Switch to EXCALIDRAW VIEW」
4. 即可看到可视化的商业模式全景

需要调整吗？比如改变布局、添加更多细节或调整配色，直接告诉我！