excalidraw-diagrams
🥈SilverGenerate Excalidraw diagrams programmatically. Useful for operations teams to create flowcharts, architecture diagrams, and system designs. Integrates with Claude Code for automated diagram generation.
2410Updated 2mo ago
Intermediate30min to implementautomation
Saves ~20 min per use
Quick InstallView Source
git clone https://github.com/robtaylor/excalidraw-diagrams.gitWorks with:
Claude
Overview
About This Skill
This Claude Code skill enables you to generate Excalidraw diagrams programmatically, replacing ASCII art with professional hand-drawn style diagrams. It provides three specialized builders: a general-purpose Diagram class for custom layouts, a Flowchart builder with auto-positioning, and an ArchitectureDiagram class for system designs. Generated diagrams are fully editable in Excalidraw, VS Code, or Obsidian, and can be exported to PNG or SVG. Operations teams, engineers, and architects benefit from automating diagram creation within Claude Code workflows.
How to Use
Clone the repository to ~/.claude/skills/excalidraw-diagrams and restart Claude Code. Ask Claude to create a diagram (e.g., 'Create a flowchart showing user authentication flow'). The skill generates .excalidraw files you can open at excalidraw.com, edit in VS Code, or export to PNG/SVG.
Use Cases
Generate flowcharts for user authentication and business processes
Create microservices and system architecture diagrams
Visualize data flow between frontend, API, and database components
Auto-generate ER diagrams and technical documentation diagrams
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/robtaylor/excalidraw-diagramsRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Create an Excalidraw diagram for [COMPANY]'s [INDUSTRY] workflow. The diagram should illustrate [DATA] process. Include key elements like [ELEMENT1], [ELEMENT2], and [ELEMENT3]. Use appropriate shapes and connectors to represent the relationships between these elements. Provide the Excalidraw code for easy integration.
Example Output
```excalidraw
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [
{
"type": "rectangle",
"version": 123,
"versionNonce": 123456789,
"isDeleted": false,
"id": "user-created-rectangle",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 100,
"y": 100,
"strokeColor": "#000000",
"backgroundColor": "#ffffff",
"width": 200,
"height": 100,
"seed": 123456789,
"groupIds": [],
"roundness": {
"type": 3,
"value": 0.2
},
"boundElements": [],
"updated": 1670209304300,
"link": null,
"locked": false,
"startBindingMode": null,
"startBindingType": null,
"startBindingId": null,
"points": [],
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": null,
"startArrowheadType": "none",
"endArrowheadType": "none",
"startArrowheadStyle": "none",
"endArrowheadStyle": "none",
"startArrowheadSize": "small",
"endArrowheadSize": "small",
"text": "Start",
"fontSize": 20,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 18,
"textDecoration": 1,
"fontStyle": "normal",
"fontWeight": 400,
"color": "#000000",
"hasBackgroundColor": false,
"backgroundColor": "#ffffff",
"bindings": [],
"isBindEnabled": false,
"updatedExternally": false
},
{
"type": "arrow",
"version": 123,
"versionNonce": 123456789,
"isDeleted": false,
"id": "user-created-arrow",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 100,
"y": 200,
"strokeColor": "#000000",
"backgroundColor": "#ffffff",
"width": 200,
"height": 100,
"seed": 123456789,
"groupIds": [],
"roundness": {
"type": 3,
"value": 0.2
},
"boundElements": [],
"updated": 1670209304300,
"link": null,
"locked": false,
"startBindingMode": null,
"startBindingType": null,
"startBindingId": null,
"points": [
[0, 0],
[100, 100]
],
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": null,
"startArrowheadType": "none",
"endArrowheadType": "none",
"startArrowheadStyle": "none",
"endArrowheadStyle": "none",
"startArrowheadSize": "small",
"endArrowheadSize": "small",
"text": "Process Flow",
"fontSize": 20,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"baseline": 18,
"textDecoration": 1,
"fontStyle": "normal",
"fontWeight": 400,
"color": "#000000",
"hasBackgroundColor": false,
"backgroundColor": "#ffffff",
"bindings": [],
"isBindEnabled": false,
"updatedExternally": false
}
],
"appState": {
"gridSize": null,
"viewBackgroundColor": "#ffffff"
}
}
```Apply to these tools
Browse all toolsClaude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Drata
Automate security compliance and monitor real-time security posture seamlessly.
GPT for work
Automate your spreadsheet tasks with AI power
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan