npx skills add ...
npx skills add github/awesome-copilot --skill excalidraw-diagram-generator
npx skills add github/awesome-copilot --skill excalidraw-diagram-generator
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.
A skill for generating Excalidraw-format diagrams from natural language descriptions. This skill helps create visual representations of processes, systems, relationships, and ideas without manual drawing.
Use this skill when users request:
Supported diagram types:
Analyze the user's description to determine:
| User Intent | Diagram Type | Example Keywords |
|---|---|---|
| Process flow, steps, procedures | Flowchart | "workflow", "process", "steps", "procedure" |
| Connections, dependencies, associations | Relationship Diagram | "relationship", "connections", "dependencies", "structure" |
| Concept hierarchy, brainstorming | Mind Map | "mind map", "concepts", "ideas", "breakdown" |
| System design, components | Architecture Diagram | "architecture", "system", "components", "modules" |
| Data flow, transformation processes | Data Flow Diagram (DFD) | "data flow", "data processing", "data transformation" |
| Cross-functional processes, actor responsibilities | Business Flow (Swimlane) | "business process", "swimlane", "actors", "responsibilities" |
| Object-oriented design, class structures | Class Diagram | "class", "inheritance", "OOP", "object model" |
| Interaction sequences, message flows | Sequence Diagram | "sequence", "interaction", "messages", "timeline" |
| Database design, entity relationships | ER Diagram | "database", "entity", "relationship", "data model" |
For Flowcharts:
For Relationship Diagrams:
For Mind Maps:
For Data Flow Diagrams (DFD):
For Business Flow (Swimlane):
For Class Diagrams:
For Sequence Diagrams:
For ER Diagrams:
Create the .excalidraw file with appropriate elements:
Available element types:
rectangle: Boxes for entities, steps, conceptsellipse: Alternative shapes for emphasisdiamond: Decision pointsarrow: Directional connectionstext: Labels and annotationsKey properties to set:
x, y coordinateswidth, heightstrokeColor, backgroundColor, fillStylefontFamily: 5 (Excalifont - required for all text elements)points array for arrowsImportant: All text elements must use fontFamily: 5 (Excalifont) for consistent visual appearance.
Structure the complete Excalidraw file:
<descriptive-name>.excalidraw| Diagram Type | Recommended Count | Maximum |
|---|---|---|
| Flowchart steps | 3-10 | 15 |
| Relationship entities | 3-8 | 12 |
| Mind map branches | 4-6 | 8 |
| Mind map sub-topics per branch | 2-4 | 6 |
#a5d8ff)#b2f2bb)#ffd43b)#ffc9c9)fontFamily: 5 (Excalifont) for all text elementsIf user request has too many elements:
Example response:
User: "Create a flowchart for user registration"
Agent generates:
user-registration-flow.excalidrawUser: "Diagram the relationship between User, Post, and Comment entities"
Agent generates:
user-content-relationships.excalidrawUser: "Mind map about machine learning concepts"
Agent generates:
machine-learning-mindmap.excalidraw| Issue | Solution |
|---|---|
| Elements overlap | Increase spacing between coordinates |
| Text doesn't fit in boxes | Increase box width or reduce font size |
| Too many elements | Break into multiple diagrams |
| Unclear layout | Use grid layout (rows/columns) or radial layout (mind maps) |
| Colors inconsistent | Define color palette upfront based on element types |
Use timestamp + random string for unique IDs:
Always provide:
.excalidraw JSON fileExample summary:
Before delivering the diagram:
fontFamily: 5 (Excalifont)For specialized diagrams (e.g., AWS/GCP/Azure architecture diagrams), you can use pre-made icon libraries from Excalidraw. This provides professional, standardized icons instead of basic shapes.
If user asks for AWS/cloud architecture diagrams or mentions wanting to use specific icons:
Check if library exists: Look for libraries/<library-name>/reference.md
If library exists: Proceed to use icons (see AI Assistant Workflow below)
If library does NOT exist: Respond with setup instructions:
Step 1: Create Library Directory
Step 2: Download Library
.excalidrawlib fileStep 3: Place Library File
aws-architecture-icons.excalidrawlib)Step 4: Run Splitter Script
Step 5: Verify Setup After running the script, verify the following structure exists:
When icon libraries are available in libraries/:
RECOMMENDED APPROACH: Use Python Scripts (Efficient & Reliable)
The repository includes Python scripts that handle icon integration automatically:
Create base diagram structure:
.excalidraw file with basic layout (title, boxes, regions)Add icons using Python script:
.excalidraw.edit is enabled by default to avoid overwrite issues; pass --no-use-edit-suffix to disable.Examples:
Add connecting arrows:
.excalidraw.edit is enabled by default to avoid overwrite issues; pass --no-use-edit-suffix to disable.Examples:
Workflow summary:
Benefits of Python Script Approach:
ALTERNATIVE: Manual Icon Integration (Not Recommended)
Only use this if Python scripts are unavailable:
Check for libraries:
Read reference.md:
Find relevant icons:
Load specific icon data (WARNING: Large files):
Extract and transform elements:
Position icons and add connections:
Manual Integration Challenges:
Request: "Create an AWS architecture diagram with Internet Gateway, VPC, ELB, EC2, and RDS"
Recommended Workflow (using Python scripts): Request: "Create an AWS architecture diagram with Internet Gateway, VPC, ELB, EC2, and RDS"
Recommended Workflow (using Python scripts):
Benefits:
Alternative Workflow (manual, if scripts unavailable):
libraries/aws-architecture-icons/reference.md exists → Yesicons/Internet-gateway.json (298 lines)icons/VPC.json (550 lines)icons/ELB.json (363 lines)icons/EC2.json (231 lines)icons/RDS.json (similar size)
Total: ~2000+ lines of JSON to process.excalidraw fileChallenges with manual approach:
.excalidrawlib file you provide.If no icon libraries are set up:
See bundled references for:
references/excalidraw-schema.md - Complete Excalidraw JSON schemareferences/element-types.md - Detailed element type specificationstemplates/flowchart-template.json - Basic flowchart startertemplates/relationship-template.json - Relationship diagram startertemplates/mindmap-template.json - Mind map starterscripts/split-excalidraw-library.py - Tool to split .excalidrawlib filesscripts/README.md - Documentation for library toolsscripts/.gitignore - Prevents local Python artifacts from being committedPotential improvements:
"Your request includes 15 components. For clarity, I recommend:
1. High-level architecture diagram (6 main components)
2. Detailed diagram for each subsystem
Would you like me to start with the high-level view?"const columns = Math.ceil(Math.sqrt(entityCount));
const x = startX + (index % columns) * horizontalGap;
const y = startY + Math.floor(index / columns) * verticalGap;const angle = (2 * Math.PI * index) / branchCount;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);const id = Date.now().toString(36) + Math.random().toString(36).substr(2);Created: user-workflow.excalidraw
Type: Flowchart
Elements: 7 rectangles, 6 arrows, 1 title text
Total: 14 elements
To view:
1. Visit https://excalidraw.com
2. Drag and drop user-workflow.excalidraw
3. Or use File → Open in Excalidraw VS Code extension