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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
17 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
name
excalidraw-diagram-generator
description
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.
Excalidraw Diagram Generator
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.
When to Use This Skill
Use this skill when users request:
"Create a diagram showing..."
"Make a flowchart for..."
"Visualize the process of..."
"Draw the system architecture of..."
"Generate a mind map about..."
"Create an Excalidraw file for..."
"Show the relationship between..."
"Diagram the workflow of..."
Supported diagram types:
📊 Flowcharts: Sequential processes, workflows, decision trees
🔗 Relationship Diagrams: Entity relationships, system components, dependencies
🧠 Mind Maps: Concept hierarchies, brainstorming results, topic organization
🏗️ Architecture Diagrams: System design, module interactions, data flow
📈 Data Flow Diagrams (DFD): Data flow visualization, data transformation processes
🏊 Business Flow (Swimlane): Cross-functional workflows, actor-based process flows
📦 Class Diagrams: Object-oriented design, class structures and relationships
🔄 Sequence Diagrams: Object interactions over time, message flows
🗃️ ER Diagrams: Database entity relationships, data models
Prerequisites
Clear description of what should be visualized
Identification of key entities, steps, or concepts
Understanding of relationships or flow between elements
Step-by-Step Workflow
Step 1: Understand the Request
Analyze the user's description to determine:
Diagram type (flowchart, relationship, mind map, architecture)
Relationships between entities (from → to, with label)
For Mind Maps:
Central topic
Main branches (3-6 recommended)
Sub-topics for each branch (optional)
For Data Flow Diagrams (DFD):
Data sources and destinations (external entities)
Processes (data transformations)
Data stores (databases, files)
Data flows (arrows showing data movement from left-to-right or from top-left to bottom-right)
Important: Do not represent process order, only data flow
For Business Flow (Swimlane):
Actors/roles (departments, systems, people) - displayed as header columns
Process lanes (vertical lanes under each actor)
Process boxes (activities within each lane)
Flow arrows (connecting process boxes, including cross-lane handoffs)
For Class Diagrams:
Classes with names
Attributes with visibility (+, -, #)
Methods with visibility and parameters
Relationships: inheritance (solid line + white triangle), implementation (dashed line + white triangle), association (solid line), dependency (dashed line), aggregation (solid line + white diamond), composition (solid line + filled diamond)
Activation boxes (rectangles on lifelines during execution)
Time flows from top to bottom
For ER Diagrams:
Entities (rectangles with entity names)
Attributes (listed inside entities)
Primary keys (underlined or marked with PK)
Foreign keys (marked with FK)
Relationships (lines connecting entities)
Cardinality: 1:1 (one-to-one), 1:N (one-to-many), N:M (many-to-many)
Junction/associative entities for many-to-many relationships (dashed rectangles)
Step 4: Generate the Excalidraw JSON
Create the .excalidraw file with appropriate elements:
Available element types:
rectangle: Boxes for entities, steps, concepts
ellipse: Alternative shapes for emphasis
diamond: Decision points
arrow: Directional connections
text: Labels and annotations
Key properties to set:
Position: x, y coordinates
Size: width, height
Style: strokeColor, backgroundColor, fillStyle
Font: fontFamily: 5 (Excalifont - required for all text elements)
Text: Embedded text for labels
Connections: points array for arrows
Important: All text elements must use fontFamily: 5 (Excalifont) for consistent visual appearance.
Step 5: Format the Output
Structure the complete Excalidraw file:
{"type":"excalidraw","version":2,"source":"https://excalidraw.com","elements":[// Array of diagram elements],"appState":{"viewBackgroundColor":"#ffffff","gridSize":20},"files":{}}
Start positions: Center important elements, use consistent spacing
Spacing:
Horizontal gap: 200-300px between elements
Vertical gap: 100-150px between rows
Colors: Use consistent color scheme
Primary elements: Light blue (#a5d8ff)
Secondary elements: Light green (#b2f2bb)
Important/Central: Yellow (#ffd43b)
Alerts/Warnings: Light red (#ffc9c9)
Text sizing: 16-24px for readability
Font: Always use fontFamily: 5 (Excalifont) for all text elements
Arrow style: Use straight arrows for simple flows, curved for complex relationships
Complexity Management
If user request has too many elements:
Suggest breaking into multiple diagrams
Focus on main elements first
Offer to create detailed sub-diagrams
Example response:
"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 id = Date.now().toString(36) + Math.random().toString(36).substr(2);
Output Format
Always provide:
✅ Complete .excalidraw JSON file
📊 Summary of what was created
📝 Element count
💡 Instructions for opening/editing
Example summary:
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
Validation Checklist
Before delivering the diagram:
All elements have unique IDs
Coordinates prevent overlapping
Text is readable (font size 16+)
All text elements use fontFamily: 5 (Excalifont)
Arrows connect logically
Colors follow consistent scheme
File is valid JSON
Element count is reasonable (<20 for clarity)
Icon Libraries (Optional Enhancement)
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.
When User Requests Icons
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:
To use [AWS/GCP/Azure/etc.] architecture icons, please follow these steps:
1. Visit https://libraries.excalidraw.com/
2. Search for "[AWS Architecture Icons/etc.]" and download the .excalidrawlib file
3. Create directory: skills/excalidraw-diagram-generator/libraries/[icon-set-name]/
4. Place the downloaded file in that directory
5. Run the splitter script:
python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/[icon-set-name]/
This will split the library into individual icon files for efficient use.
After setup is complete, I can create your diagram using the actual AWS/cloud icons.
Alternatively, I can create the diagram now using simple shapes (rectangles, ellipses)
which you can later replace with icons manually in Excalidraw.
List directory: skills/excalidraw-diagram-generator/libraries/
Look for subdirectories containing reference.md files
Read reference.md:
Open: libraries/<library-name>/reference.md
This is lightweight (typically <300 lines) and lists all available icons
Find relevant icons:
Search the reference.md table for icon names matching diagram needs
Example: For AWS diagram with EC2, S3, Lambda → Find "EC2", "S3", "Lambda" in table
Load specific icon data (WARNING: Large files):
Read ONLY the needed icon files:
- libraries/aws-architecture-icons/icons/EC2.json (200-300 lines)
- libraries/aws-architecture-icons/icons/S3.json (200-300 lines)
- libraries/aws-architecture-icons/icons/Lambda.json (200-300 lines)
Note: Each icon file is 200-1000 lines - this consumes significant tokens
Extract and transform elements:
Each icon JSON contains an "elements" array
Calculate bounding box (min_x, min_y, max_x, max_y)
Apply offset to all x/y coordinates
Generate new unique IDs for all elements
Update groupIds references
Copy transformed elements into your diagram
Position icons and add connections:
Adjust x/y coordinates to position icons correctly in the diagram
Update IDs to ensure uniqueness across diagram
Add connecting arrows and labels as needed
Manual Integration Challenges:
⚠️ High token consumption (200-1000 lines per icon × number of icons)
⚠️ Complex coordinate transformation calculations
⚠️ Risk of ID collision if not handled carefully
⚠️ Time-consuming for diagrams with many icons
Example: Creating AWS Diagram with Icons
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"
