Excalidraw Diagram

Excalidraw Diagram Generator

Create Excalidraw diagrams from text content with multiple output formats.

Output Modes

Select output mode based on the user's trigger words:

Workflow

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

Output Formats

Mode 1: Obsidian Format (Default)

Output strictly in the following structure, with no 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
{complete JSON data}
\`\`\`
%%

Key points:

• Frontmatter must include tags: [excalidraw]
• Warning message must be included in full
• JSON must be wrapped in %% markers
• No excalidraw-* plugin settings in frontmatter other than excalidraw-plugin: parsed (the tags: [excalidraw] entry above is separate and still required)
• File extension: .md

Mode 2: Standard Excalidraw Format

Output pure JSON file, openable on excalidraw.com:

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

Key points:

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

Mode 3: Animated Excalidraw Format

Same as Standard format, but each element adds a customData.animate field to control animation order:

{
  "id": "element-1",
  "type": "rectangle",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...other standard fields
}

Animation order rules:

• order: Playback order (1, 2, 3...) — lower numbers appear first
• duration: Drawing duration for the element (milliseconds), default 500
• Elements with the same order appear simultaneously
• Recommended order: title → main framework → connection lines → detail text

Usage:

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

File extension: .excalidraw

Diagram Types & Selection Guide

Choose the appropriate diagram type to maximize clarity and visual impact.

Design Rules

Text & Format

• All text elements must use fontFamily: 5 (Excalifont handwriting font)
• Double quote replacement: replace " with 『』
• Parentheses replacement: replace () with 「」
• Font size rules (hard minimums — below these values, text is unreadable at normal zoom):
  • Title: 20-28px (minimum 20px)
  • Subtitle: 18-20px
  • Body/labels: 16-18px (minimum 16px)
  • Minor annotations: 14px (only for unimportant auxiliary notes, use sparingly)
  • Never go below 14px
• Line height: all text uses lineHeight: 1.25
• Text centering: standalone text elements have no auto-centering — manually calculate x coordinate:
  • Estimate text width: estimatedWidth = text.length * fontSize * 0.5
  • Centering formula: x = centerX - estimatedWidth / 2
  • Example: text "Hello" (5 chars, fontSize 20) centered at x=300 → estimatedWidth = 5 * 20 * 0.5 = 50 → x = 300 - 25 = 275

Layout & Design

• Canvas range: keep all elements within 0-1200 x 0-800 area
• Minimum shape size: rectangles/ellipses with text must be at least 120x60px
• Element spacing: minimum 20-30px gap to prevent overlap
• Clear hierarchy: use different colors and shapes to distinguish information levels
• Graphic elements: use rectangles, circles, arrows etc. to organize information
• No Emoji: do not use any Emoji symbols in diagram text — use simple shapes (circles, squares, arrows) or color coding instead

Color Palette

Text colors (strokeColor for text):

Shape fill colors (backgroundColor, fillStyle: "solid"):

Region background colors (large rectangle + opacity: 30, for layered diagrams):

Contrast rules:

• Text on white background must be no lighter than #757575
• On light fills, use dark color variants (e.g., on light green use #15803d, not #22c55e)
• Avoid light gray text (#b0b0b0, #999) on white backgrounds

See references/excalidraw-schema.md for full reference.

JSON Structure

Obsidian mode:

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

Standard / Animated mode:

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