cc-excalidraw-skill
🥈SilverCreate and edit hand-drawn style diagrams in Excalidraw JSON format. Use for flowcharts, architecture diagrams, wireframes, and visual drawings.
7020Updated 3mo ago
Intermediate30min to implementautomation
Saves ~20 min per use
Quick InstallView Source
git clone https://github.com/rnjn/cc-excalidraw-skill.gitWorks with:
Claude
Overview
About This Skill
The Excalidraw skill enables you to programmatically create and edit diagrams in Excalidraw JSON format (.excalidraw files). It supports a wide range of diagram types including flowcharts, sequence diagrams, architecture diagrams, mind maps, data flow diagrams, entity-relationship diagrams, and wireframes. The skill provides tools to create rectangles, ellipses, diamonds, text, arrows, lines, and other elements with full control over styling, colors, positioning, and connections. You can generate professional diagrams with consistent spacing, semantic color conventions, and hand-drawn aesthetics or formal technical styling.
How to Use
[{"step":"Define your diagram requirements. Open Excalidraw (https://excalidraw.com) and sketch a rough draft of what you need. Identify [DIAGRAM_DESCRIPTION], [KEY_ELEMENTS], and [CONNECTIONS] between them.","tip":"Use simple shapes like rectangles for processes, diamonds for decisions, and arrows for connections. Keep labels concise but descriptive."},{"step":"Copy the AI-generated Excalidraw JSON output and paste it into Excalidraw. The JSON will auto-render your diagram with hand-drawn styling.","tip":"If the diagram looks cluttered, adjust the 'roughness' parameter in the JSON (e.g., change from 1 to 0.5 for smoother lines) or tweak the positioning of elements."},{"step":"Customize the diagram in Excalidraw. Modify colors, fonts, or shapes to match your brand or workflow. Add notes or annotations if needed.","tip":"Use the 'backgroundColor' field in the JSON to change element colors. For example, use '#fab005' for highlights or '#86efac' for success states."},{"step":"Export the diagram. Save as PNG, SVG, or share the Excalidraw link with your team. For Sortd integration, embed the diagram in your shared inbox board for reference.","tip":"To embed in Sortd, upload the PNG/SVG to a shared drive (Google Drive, Dropbox) and link it in your Sortd board description or task comments."},{"step":"Iterate as needed. If your workflow changes, regenerate the JSON with updated [DIAGRAM_DESCRIPTION] or [CONNECTIONS] to keep the diagram current.","tip":"Save previous versions of the JSON in a folder labeled 'Diagram Backups' to track changes over time."}]
Use Cases
Create flowcharts and process diagrams for algorithms and workflows
Design system architecture and microservices diagrams
Build wireframes and UI mockups for application design
Generate entity-relationship diagrams for database schemas
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/rnjn/cc-excalidraw-skillRequirements
- 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 a hand-drawn style diagram in Excalidraw JSON format that visualizes [DIAGRAM_DESCRIPTION]. Include [KEY_ELEMENTS] and [CONNECTIONS] between them. Use a clean, professional style with labels. Example: 'Create a flowchart showing the customer onboarding process for Sortd's Gmail integration. Include stages like 'Email Received', 'Task Created', 'Follow-up Sent', and 'Deal Closed'. Show arrows connecting each stage with brief descriptions of actions taken.'
Example Output
```json
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [
{
"type": "rectangle",
"version": 1,
"versionNonce": 123456789,
"isDeleted": false,
"id": "sortd-onboarding-start",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 100,
"y": 100,
"strokeColor": "#000000",
"backgroundColor": "#fab005",
"width": 160,
"height": 80,
"seed": 987654321,
"groupIds": [],
"roundness": {
"type": 3
},
"boundElements": [
{
"id": "sortd-onboarding-arrow-1",
"type": "arrow"
}
],
"updated": 1699999999999,
"link": null,
"locked": false,
"fontSize": 20,
"fontFamily": 1,
"text": "New Lead\n([email protected])",
"rawText": "New Lead\n([email protected])",
"baseline": 60,
"textAlign": "center",
"verticalAlign": "middle"
},
{
"type": "arrow",
"version": 1,
"versionNonce": 987654321,
"isDeleted": false,
"id": "sortd-onboarding-arrow-1",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 260,
"y": 140,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"width": 0,
"height": 60,
"seed": 123456789,
"groupIds": [],
"roundness": {
"type": 2
},
"boundElements": [],
"updated": 1699999999999,
"link": null,
"locked": false,
"startBinding": {
"elementId": "sortd-onboarding-start",
"gap": 1,
"focus": 0
},
"endBinding": {
"elementId": "sortd-onboarding-task",
"gap": 1,
"focus": 0
},
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": "arrow",
"points": [
[0, 0],
[0, 60]
]
},
{
"type": "rectangle",
"version": 1,
"versionNonce": 555555555,
"isDeleted": false,
"id": "sortd-onboarding-task",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 300,
"y": 100,
"strokeColor": "#000000",
"backgroundColor": "#86efac",
"width": 160,
"height": 80,
"seed": 444444444,
"groupIds": [],
"roundness": {
"type": 3
},
"boundElements": [
{
"id": "sortd-onboarding-arrow-1",
"type": "arrow"
},
{
"id": "sortd-onboarding-arrow-2",
"type": "arrow"
}
],
"updated": 1699999999999,
"link": null,
"locked": false,
"fontSize": 20,
"fontFamily": 1,
"text": "Task Created\n(Sortd Board)",
"rawText": "Task Created\n(Sortd Board)",
"baseline": 60,
"textAlign": "center",
"verticalAlign": "middle"
},
{
"type": "arrow",
"version": 1,
"versionNonce": 777777777,
"isDeleted": false,
"id": "sortd-onboarding-arrow-2",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 460,
"y": 140,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"width": 0,
"height": 60,
"seed": 333333333,
"groupIds": [],
"roundness": {
"type": 2
},
"boundElements": [],
"updated": 1699999999999,
"link": null,
"locked": false,
"startBinding": {
"elementId": "sortd-onboarding-task",
"gap": 1,
"focus": 0
},
"endBinding": {
"elementId": "sortd-onboarding-followup",
"gap": 1,
"focus": 0
},
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": "arrow",
"points": [
[0, 0],
[0, 60]
]
},
{
"type": "rectangle",
"version": 1,
"versionNonce": 222222222,
"isDeleted": false,
"id": "sortd-onboarding-followup",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 500,
"y": 100,
"strokeColor": "#000000",
"backgroundColor": "#fde68a",
"width": 160,
"height": 80,
"seed": 666666666,
"groupIds": [],
"roundness": {
"type": 3
},
"boundElements": [
{
"id": "sortd-onboarding-arrow-2",
"type": "arrow"
},
{
"id": "sortd-onboarding-arrow-3",
"type": "arrow"
}
],
"updated": 1699999999999,
"link": null,
"locked": false,
"fontSize": 20,
"fontFamily": 1,
"text": "Follow-up Sent\n(Template Used)",
"rawText": "Follow-up Sent\n(Template Used)",
"baseline": 60,
"textAlign": "center",
"verticalAlign": "middle"
},
{
"type": "arrow",
"version": 1,
"versionNonce": 888888888,
"isDeleted": false,
"id": "sortd-onboarding-arrow-3",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 660,
"y": 140,
"strokeColor": "#000000",
"backgroundColor": "transparent",
"width": 0,
"height": 60,
"seed": 555555555,
"groupIds": [],
"roundness": {
"type": 2
},
"boundElements": [],
"updated": 1699999999999,
"link": null,
"locked": false,
"startBinding": {
"elementId": "sortd-onboarding-followup",
"gap": 1,
"focus": 0
},
"endBinding": {
"elementId": "sortd-onboarding-closed",
"gap": 1,
"focus": 0
},
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": "arrow",
"points": [
[0, 0],
[0, 60]
]
},
{
"type": "rectangle",
"version": 1,
"versionNonce": 333333333,
"isDeleted": false,
"id": "sortd-onboarding-closed",
"fillStyle": "hachure",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 700,
"y": 100,
"strokeColor": "#000000",
"backgroundColor": "#a5b4fc",
"width": 160,
"height": 80,
"seed": 777777777,
"groupIds": [],
"roundness": {
"type": 3
},
"boundElements": [
{
"id": "sortd-onboarding-arrow-3",
"type": "arrow"
}
],
"updated": 1699999999999,
"link": null,
"locked": false,
"fontSize": 20,
"fontFamily": 1,
"text": "Deal Closed\n(Updated in CRM)",
"rawText": "Deal Closed\n(Updated in CRM)",
"baseline": 60,
"textAlign": "center",
"verticalAlign": "middle"
}
],
"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