excalidraw-studio
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 skil
npx skills add tech-leads-club/agent-skills --skill excalidraw-studio --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: 1. **Diagram type** — Use the decision matrix below 2. **Key elements** — Entities, steps, concepts, actors 3. **Relationships** — Flow direction, connections, hierarchy 4. **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", "dat
- Workflow
- Step 1: Understand the Request
- Step 2: Choose the Diagram Type and Visual Mode
- Step 3: Extract Structured Information
- Step 4: Generate the Excalidraw JSON
- Step 5: Save and Present
- Templates
- Icon Libraries
- Best Practices
- Element Count
- Layout
- Common Mistakes to Avoid
- Validation Checklist
- Troubleshooting
What does the excalidraw-studio skill do?
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 skil
How do I install it?
Run `npx skills add tech-leads-club/agent-skills --skill excalidraw-studio --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From tech-leads-club/agent-skills, a repository with 4,983 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.