SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsexcalidraw-diagram

excalidraw-diagram

Design & creation

View repository

Updated 10-16 09:48

About this skill

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

Output strictly according to the following structure, without any modifications:

---
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 wrapped by %% markers
  • Do not use excalidraw-plugin: parsed frontmatter settings other than

Diagram Types & Selection Guide

Choose an appropriate chart type to improve comprehension and visual appeal.

Type English Use case Approach
Flowchart Flowchart Step descriptions, workflows, task execution order Connect the steps with arrows to clearly express the flow direction
Mind map Mind Map Concept divergence, topic classification, inspiration capture Radiate outward from the center as the core, with a radial structure
Hierarchy diagram Hierarchy Organizational structure, content hierarchy, system decomposition Build hierarchical nodes from top to bottom or from left to right
Relationship diagram Relationship Influence, dependency, and interaction among elements Use connecting lines between shapes to indicate associations, with arrows and explanations
Comparison chart Comparison Comparative analysis of two or more options or viewpoints Use two columns on the left and right or a table format, and indicate the comparison dimensions
Timeline diagram Timeline Event development, project progress, model evolution Use time as the axis and mark key time points and events
Matrix diagram Matrix Two-dimensional classification, task priority, positioning Establish two dimensions, X and Y, and place items on the coordinate plane
Free layout Freeform Scattered content, inspiration notes, preliminary information collection No structural restrictions; freely place blocks and arrows

Design Rules

Text & Format

  • All text elements must use fontFamily: 5(Excalifont handwriting font)
  • Replacement rule for double quotes in text：" replace with 『』
  • Replacement rule for parentheses in text：() replace with 「」
  • Font size rules：
    • Title: 24-28px
    • Subtitle: 18-20px
    • Body/description: 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 and an aesthetically pleasing overall layout
  • Clear hierarchy: use different colors and shapes to distinguish information at different levels
  • Graphic elements: appropriately use rectangles, circles, arrows, and other elements to organize information

Color Palette

  • Title color：#1e40af(dark blue)
  • Subtitle/connector lines：#3b82f6(bright blue)
  • Body text：#374151(gray)
  • Emphasis/key points：#f59e0b(gold)
  • Other color schemes: it is recommended to use a harmonious color scheme and avoid too many colors

Reference: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 processing

  • ## Text Elements The part in Markdownmust be left blank, using only %% as the separator
  • The Obsidian ExcaliDraw plugin will, based on the JSON data,automatically populate text elements
  • No need to manually list all text content

Coordinates and Layout

  • Coordinate System: The top-left corner is the origin (0,0)
  • Recommended Range: All elements within the range of 0-1200 x 0-800 pixels
  • 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 (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

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

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

appState Configuration

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

files Field

"files": {}

Implementation Notes

Auto-save & File Generation Workflow

When generating an Excalidraw diagram,the following steps must be automatically performed：

1. Choose an appropriate diagram type

  • Based on the characteristics of the content provided by the user, refer to the "Diagram Types & Selection Guide" table above
  • Analyze the core requirements of the content and choose the most appropriate visualization form

2. Generate a meaningful file name

  • Format:[主题].[类型].md
  • For example:内容创作流程.flowchart.md、Axton商业模式.relationship.md
  • Prefer using Chinese to improve clarity

3. Use the Write tool to automatically save the file

  • Save location: Current working directory (automatically detect environment variables)
  • Full path：{current_directory}/[filename].md
  • This allows for flexible migration without hardcoding paths

4. Ensure the Markdown structure is completely correct

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

---
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 the complete Excalidraw JSON structure
  • ✅ All text elements use fontFamily: 5
  • ✅ In the text, " is replaced with 『』
  • ✅ In the text, () is replaced with 「」
  • ✅ The JSON format must be valid and pass syntax checking
  • ✅ All elements have a unique id
  • ✅ Contains appState and files: {} fields

6. User Feedback and Confirmation

Report to the user:

  • ✅ The diagram has been generated
  • 📍 The exact save location
  • 📖 How to view it in Obsidian
  • 🎨 Explanation of the diagram's design choices (what type of diagram was chosen and why)
  • ❓ Whether adjustments or modifications are needed

Example Output Message

✅ Excalidraw 图已自动生成！

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

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

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

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