Generate Excalidraw diagrams from text content. Three output modes: Obsidian (.md for plugin), Standard (.excalidraw for excalidraw.com), Animated (.excalidraw with animation order). INVOKE when user wants to create a visual diagram. Triggers: "Excalidraw", "draw diagram", "flowchart", "mind map", "visualize", "diagram", "standard excalidraw", "animated excalidraw", "animate", "нарисуй диаграмму", "визуализируй", "создай схему", "майнд мап", "блок-схема".
Create Excalidraw diagrams from text content with multiple output formats.
Diagrams should ARGUE, not DISPLAY.
A diagram is not formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.
Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.
Education Test: Could someone learn something concrete from this diagram, or does it just label boxes?
Before designing, determine what the diagram needs:
Simple/Conceptual — use when:
Comprehensive/Technical — use when:
For technical diagrams: look up actual specs, real event names, API formats — then use them. Real terminology > generic placeholders.
Step 1: Understand Deeply For each concept ask: What does it DO? What relationships exist? What's the core transformation?
Step 2: Map Concepts to Patterns
| If the concept... | Use this pattern |
|---|---|
| Spawns multiple outputs | Fan-out (arrows radiating from center) |
| Combines inputs into one | Convergence (funnel, arrows merging) |
| Has hierarchy/nesting | Tree (lines + free-floating text, no boxes) |
| Is a sequence of steps | Timeline (line + dots + free-floating labels) |
| Loops or improves | Spiral/Cycle (arrow returning to start) |
| Is abstract state/context | Cloud (overlapping ellipses) |
| Transforms input to output | Assembly Line (before → process → after) |
| Compares two things | Side-by-side (parallel with contrast) |
| Separates into phases | Gap/Break (visual separation between sections) |
Step 3: Ensure Variety Each major concept must use a different visual pattern. No uniform card grids.
Step 4: Sketch the Flow Mentally trace how the eye moves. There should be a clear visual story.
Step 5: Generate JSON Only now create the Excalidraw elements. For large diagrams — see Large Diagram Strategy.
Central element with arrows radiating to multiple targets. For: sources, root causes, hubs.
Multiple inputs merging to single output. For: aggregation, funnels, synthesis.
Use line elements for trunk and branches + free-floating text labels. No boxes needed.
label
├── label
│ └── label
└── label
Vertical/horizontal line + small dots (10-20px ellipses) at intervals + free-floating labels beside each dot.
Elements in sequence with arrow returning to start. For: feedback loops, iteration.
Overlapping ellipses with varied sizes. For: context, memory, mental states.
Input → Process → Output with clear before/after. For: transformations, conversion.
Two parallel structures with visual contrast. For: before/after, options, trade-offs.
Default to free-floating text. Add a container only when it serves a purpose.
| Use a Container When... | Use Free-Floating Text When... |
|---|---|
| It's the focal point of a section | It's a label or description |
| Arrows need to connect to it | It describes something nearby |
| The shape carries meaning (decision diamond, etc.) | It's a title, subtitle, or annotation |
| It represents a distinct "thing" in the system | Typography alone creates hierarchy |
Target: <30% of text elements inside containers.
Use font size and color to create visual hierarchy without boxes — a 24px title doesn't need a rectangle around it.
For complex diagrams, build JSON one section at a time — never generate everything in one pass.
"trigger_rect", "arrow_fan_left")Select based on trigger words:
| Trigger Words | Output Mode | File Format | Purpose |
|---|---|---|---|
Excalidraw, draw diagram, flowchart, mind map | Obsidian (default) | .md | Open directly in Obsidian |
standard excalidraw | Standard | .excalidraw | Open/edit/share on excalidraw.com |
animated excalidraw, animate | Animated | .excalidraw | Drag to excalidraw-animate |
files/ directory---
excalidraw-plugin: parsed