playbooks

home / skills / axtonliu / axton-obsidian-visual-skills / excalidraw-diagram

excalidraw-diagram skill

/excalidraw-diagram

This skill generates Excalidraw diagrams from text for Obsidian, producing ready-to-use markdown with frontmatter and automatic file saving.

npx playbooks add skill axtonliu/axton-obsidian-visual-skills --skill excalidraw-diagram

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
9.0 KB
---
name: excalidraw-diagram
description: Generate Excalidraw diagrams from text content for Obsidian. Use when user asks to create diagrams, flowcharts, mind maps, or visual representations in Excalidraw format. Triggers on "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram".
metadata:
  version: 1.1.0
---

# 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

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

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

## Diagram Types & Selection Guide

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

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

## 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](references/excalidraw-schema.md)

## JSON Structure

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

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

See [references/excalidraw-schema.md](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
```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
}
```

### appState 配置
```json
"appState": {
  "gridSize": null,
  "viewBackgroundColor": "#ffffff"
}
```

### files 字段
```json
"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 结构完全正确
**必须按以下格式生成**（不能有任何修改）：

```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. 即可看到可视化的商业模式全景

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

Overview

This skill generates Obsidian-ready Excalidraw diagrams from plain text descriptions, producing a saved .md file with complete Excalidraw JSON and plugin frontmatter. It chooses an appropriate diagram type, applies consistent design rules, and auto-saves the file to the current working directory. The output is ready to open in Obsidian’s Excalidraw view.

How this skill works

The skill parses user text to identify concepts, relationships, hierarchy, and sequence, then selects a diagram type (flowchart, mind map, hierarchy, etc.). It composes a valid Excalidraw JSON payload following the design rules (fontFamily, color palette, layout constraints) and wraps it into the required Obsidian .md structure. Finally it writes the file to the detected current directory, returns the filepath, and explains the visualization choices.

When to use it

  • When you need a flowchart or step-by-step process visualized from text.
  • When you want a mind map or concept map generated from notes or brainstorming.
  • When you need an organizational chart, relationship diagram, timeline, matrix, or comparison layout.
  • When you want an Obsidian-ready Excalidraw file auto-saved for further editing.
  • When you prefer consistent styling rules applied automatically to diagram text and colors.

Best practices

  • Provide clear, structured input: list steps, nodes, or headings to improve layout accuracy.
  • State the preferred diagram type if you have one; otherwise let the skill choose based on content.
  • Keep text labels concise to fit recommended canvas bounds (0–1200 x 0–800).
  • Request revisions explicitly (layout, color emphasis, font size) after the initial file is created.
  • Use the generated filename convention ([topic].[type].md) to keep your vault organized.

Example use cases

  • Convert a product onboarding checklist into a stepwise flowchart and save as Onboarding.flowchart.md.
  • Turn a brainstorming note into a radial mind map saved as ProjectIdeas.mindmap.md for Obsidian editing.
  • Visualize team structure as a hierarchy chart like TeamStructure.hierarchy.md with color-coded levels.
  • Compare two solutions in a side-by-side comparison diagram saved as OptionsComparison.comparison.md.
  • Create a timeline of milestones from meeting notes and save as Roadmap.timeline.md.

FAQ

How do I open the generated file in Excalidraw view?

Open the .md file in Obsidian, click More Options (three dots) and choose Switch to EXCALIDRAW VIEW to load the drawing.

What naming convention does the skill use for files?

Files use the format [topic].[type].md (for example: ContentWorkflow.flowchart.md) to make identification and sorting straightforward.

Can I request layout or color changes after generation?

Yes. The skill reports the choices made and you can ask for adjustments like different layout, colors, or text sizing; it will regenerate and resave the file.