Excalidraw Diagram Skill
Create professional diagrams in Excalidraw JSON format.
Critical: Subagent Delegation
Main agents must NEVER read .excalidraw files directly.
Excalidraw JSON is extremely verbose (4,000 - 22,000+ tokens per file). Always delegate to subagent and request text summaries, never raw JSON.
Main Agent Subagent │ │ ├── Provide task description ──────►│ │ ├── Read/parse files │ ├── Execute operations │◄── Receive text summary ──────────┤
Component Libraries
Use pre-built components from libraries/ folder first.
Library Selection
Diagram Type Libraries
AWS aws-architecture-icons
Azure azure-cloud-services
GCP gcp-icons , google-icons
System Design software-architecture , system-design
Microservices software-architecture , kubernetes-icons
Database/ER database , uml-er-library
Flowchart flow-chart-symbols
Network network-topology-icons
DevOps/CI/CD devops-icons , technology-logos
Wireframe basic-ux-wireframing , web-kit
Priority Order
-
Pre-downloaded → Check libraries/ folder
-
Online → Fetch from libraries.excalidraw.com
-
Custom → Build from basic shapes (last resort)
See LIBRARIES.md for usage details.
Workflow
Create Diagram
-
Identify diagram type from user request
-
Select appropriate library and palette
-
Generate JSON with all required properties (see JSON-SCHEMA.md)
-
Verify against Quality Checklist
Modify Diagram
-
Read and parse existing file (via subagent)
-
Apply requested changes
-
Maintain style consistency
-
Return summary of changes
Defaults
Setting Default Notes
Style hand-drawn
Excalidraw signature look
Font fontFamily: 1 (Virgil) Authentic hand-drawn feel
Roughness 1
Hand-drawn effect
Grid 20px
Alignment base
Quality Checklist
Before delivering:
-
Visual hierarchy clear
-
Color follows 60-30-10 rule
-
Text contrast ≥4.5:1 (WCAG AA)
-
Elements aligned to 20px grid
-
Spacing ≥40px between elements
-
All connections clearly directed
-
Key elements labeled
-
Style consistent throughout
Reference Documentation
Document Content
JSON-SCHEMA.md Required - Complete JSON specification
ELEMENTS.md Element types and properties
PALETTES.md Color palette definitions
STYLES.md Visual style configurations
ICONS.md Hand-drawn icon patterns (fallback)
LIBRARIES.md Component library reference
IT-DIAGRAMS.md IT architecture templates
TEMPLATES.md General diagram templates