Excalidraw
Keep architecture and flowchart work in Excalidraw without blowing the main agent’s context on 4k–22k-token JSON files by delegating every read and edit to a subagent.
Overview
excalidraw is a journey-wide agent skill that delegates all Excalidraw file operations to subagents so solo builders can visualize architecture without exhausting context on verbose diagram JSON.
Install
npx skills add https://github.com/davila7/claude-code-templates --skill excalidrawWhat is this skill?
- Hard rule: main agents never read .excalidraw or .excalidraw.json directly—always delegate to subagents
- Documents token cost: single diagrams ~4k–22k tokens; seven files can consume ~33% of a typical context budget
- Triggers on paths, user asks for flowcharts/architecture visualization, or mentions Excalidraw by name
- Explains low signal-to-noise JSON (20+ properties per shape) versus actual labels and relationships
- Example scale: 14-element diagram ~4k tokens; 79-element diagram ~22k tokens exceeding default read limits
- Single Excalidraw files: approximately 4k–22k tokens
- Seven diagram files can consume about 67k tokens (~33% of a typical budget)
- Example 14-element diagram: ~596 lines, ~4k tokens; 79-element: ~22k tokens
Adoption & trust: 650 installs on skills.sh; 27.8k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You asked the agent to open an architecture diagram but the Excalidraw JSON consumed thousands of tokens of styling metadata instead of actionable structure.
Who is it for?
Builders who store .excalidraw in git and use Claude Code or similar agents for system design, RFCs, and flow documentation.
Skip if: Quick ASCII-only sketches in chat or teams that never commit Excalidraw files and only need one-line mermaid in markdown.
When should I use this skill?
Working with *.excalidraw or *.excalidraw.json, user mentions diagrams/flowcharts, or requests architecture visualization—delegate all Excalidraw operations to subagents.
What do I get? / Deliverables
The main agent keeps a thin orchestration role while subagents handle diagram IO, returning condensed explanations or edits without dumping full JSON into the primary thread.
- Subagent-mediated summary of diagram structure and labels
- Updated Excalidraw file changes without main-thread JSON dumps
- Orchestration notes for multi-diagram sessions
Recommended Skills
Journey fit
Useful at every journey phase - explore requirements and options before committing to a direction.
Where it fits
Summarize a competitive landscape map stored as Excalidraw without loading JSON into the main thread.
Update user-journey shapes in a prototype diagram via a subagent while the main agent keeps writing the spec.
Refresh a system architecture .excalidraw.json after an API redesign.
Produce a deployment flowchart for a launch checklist from an existing Excalidraw file.
Adapt a marketing funnel diagram for a blog post without pasting 20k tokens of coordinates.
How it compares
Use as an agent orchestration pattern, not a diagram renderer MCP—subagents replace direct file reads.
Common Questions / FAQ
Who is excalidraw for?
Solo developers and indie teams using agentic IDEs who version Excalidraw diagrams and need reliable explain/update/create flows without context collapse.
When should I use excalidraw?
Use it in Validate when scoping flows on a whiteboard file, in Build/docs for architecture updates, in Ship when documenting release paths, and in Grow when visualizing funnels—whenever paths or requests mention Excalidraw or committed diagram JSON.
Is excalidraw safe to install?
It is procedural guidance only; review the Security Audits panel on this Prism page and ensure subagents you spawn follow your repo access policies.
SKILL.md
READMESKILL.md - Excalidraw
# Excalidraw Subagent Delegation ## Overview **Core principle:** Main agents NEVER read Excalidraw files directly. Always delegate to subagents to isolate context consumption. Excalidraw files are JSON with high token cost but low information density. Single files range from 4k-22k tokens (largest can exceed read tool limits). Reading multiple diagrams quickly exhausts context budget (7 files = 67k tokens = 33% of budget). ## The Problem Excalidraw JSON structure: - Each shape has 20+ properties (x, y, width, height, strokeColor, seed, version, etc.) - Most properties are visual metadata (positioning, styling, roughness) - Actual content: text labels and element relationships (<10% of file) - **Signal-to-noise ratio is extremely low** Example: 14-element diagram = 596 lines, 16K, ~4k tokens. 79-element diagram = 2,916 lines, 88K, ~22k tokens (exceeds read limit). ## When to Use **Trigger on ANY of these:** - File path contains `.excalidraw` or `.excalidraw.json` - User requests: "explain/update/create diagram", "show architecture", "visualize flow" - User mentions: "flowchart", "architecture diagram", "Excalidraw file" - Architecture/design documentation tasks involving visual artifacts **Use delegation even for:** - "Small" files (smallest is 4k tokens - still significant) - "Quick checks" (checking component names still loads full JSON) - Single file operations (isolation prevents context pollution) - Modifications (don't need full format understanding in main context) ## Delegation Pattern ### Main Agent Responsibilities **NEVER:** - ❌ Use Read tool on *.excalidraw files - ❌ Parse Excalidraw JSON in main context - ❌ Load multiple diagrams for comparison - ❌ Inspect file to "understand the format" **ALWAYS:** - ✅ Delegate ALL Excalidraw operations to subagents - ✅ Provide clear task description to subagent - ✅ Request text-only summaries (not raw JSON) - ✅ Keep diagram analysis isolated from main work ### Subagent Task Templates #### Read/Understand Operation ``` Task: Extract and explain the components in [file.excalidraw.json] Approach: 1. Read the Excalidraw JSON 2. Extract only text elements (ignore positioning/styling) 3. Identify relationships between components 4. Summarize architecture/flow Return: - List of components/services with descriptions - Connection/dependency relationships - Key insights about the architecture - DO NOT return raw JSON or verbose element details ``` #### Modify Operation ``` Task: Add [component] to [file.excalidraw.json], connected to [existing-component] Approach: 1. Read file to identify existing elements 2. Find [existing-component] and its position 3. Create new element JSON for [component] 4. Add arrow elements for connections 5. Write updated file Return: - Confirmation of changes made - Position of new element - IDs of created elements ``` #### Create Operation ``` Task: Create new Excalidraw diagram showing [description] Approach: 1. Design layout for [number] components 2. Create rectangle elements with text labels 3. Add arrows showing relationships 4. Use consistent styling (colors, fonts) 5. Write to [file.excalidraw.json] Return: - Confirmation of file created - Summary of components included - File location ``` #### Compare Operation ``` Task: Compare architecture approaches in [file1] vs [file2] Approach: 1. Read both files 2. Extract text labels from each 3. Identify structural differences 4. Compare component relationships Return: - Key differences in architecture - Components unique to each approach - Relationship/flow differences - DO NOT return full element details from both files ``` ## Common Rationalizations (STOP an