Excalidraw Studio
Generate Excalidraw diagrams from natural language descriptions.
Install
npx skills add tech-leads-club/agent-skills --skill excalidraw-studio -g -a claude-code -y- Repository
- tech-leads-club/agent-skills7.1k
- Category
- DevOps
- Updated
- 3d ago
- License
- CC-BY-4.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Generate Excalidraw diagrams from natural language descriptions. Outputs .excalidraw JSON files openable in Excalidraw. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", "generate an Excalidraw file", "draw an ER diagram", "create a sequence diagram", or "make a class diagram". Supports flowcharts, relationship diagrams, mind maps, architecture, DFD, swimlane, class, sequence, and ER diagrams. Can use icon libraries (AWS, GCP, etc.) when set up. Do NOT use for code architecture analysis (use the architecture skills), Mermaid diagram rendering (use mermaid-studio), or non-visual documentation (use docs-writer).
Excalidraw Studio
Generate Excalidraw-format diagrams from natural language descriptions. Outputs .excalidraw JSON files that can be opened directly in Excalidraw (web, VS Code extension, or Obsidian plugin).
Workflow
UNDERSTAND → CHOOSE TYPE → EXTRACT → GENERATE → SAVE
Step 1: Understand the Request
Analyze the user's description to determine:
- Diagram type, Use the decision matrix below
- Key elements, Entities, steps, concepts, actors
- Relationships, Flow direction, connections, hierarchy
- Complexity, Number of elements (target: under 20 for clarity)
Step 2: Choose the Diagram Type and Visual Mode
Diagram type:
| User Intent | Diagram Type | Keywords |
|---|---|---|
| Process flow, steps | Flowchart | "workflow", "process", "steps" |
| Connections, dependencies | Relationship | "relationship", "connections", "dependencies" |
| Concept hierarchy | Mind Map | "mind map", "concepts", "breakdown" |
| System design | Architecture | "architecture", "system", "components" |
| Data movement | Data Flow (DFD) | "data flow", "data processing" |
| Cross-functional processes | Swimlane | "business process", "swimlane", "actors" |
| Object-oriented design | Class Diagram | "class", "inheritance", "OOP" |
| Interaction sequences | Sequence Diagram | "sequence", "interaction", "messages" |
| Database design | ER Diagram | "database", "entity", "data model" |
Visual mode, decide upfront and apply consistently to all elements:
