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.
Profile →npx skills add github/awesome-copilot --skill excalidraw-diagram-generator --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
A skill that creates Excalidraw diagrams from natural language requests. It handles several diagram types including flowcharts, relationship diagrams, mind maps, and architecture diagrams, producing outputs in the .excalidraw JSON format that can be opened directly in Excalidraw.
How it works
Follows a stepwise workflow to translate user descriptions into structured Excalidraw diagrams:
- Understand the request to determine the diagram type and key elements (entities, steps, concepts, relationships).
- Choose the appropriate diagram type based on user intent (Flowchart, Relationship Diagram, Mind Map, Architecture Diagram, Data Flow Diagram, Swimlane, Class Diagram, Sequence Diagram, ER Diagram).
- Extract structured information relevant to the chosen type (e.g., for flowcharts: steps, decisions, start/end; for relationship diagrams: entities and relationships; for mind maps: central topic, branches, sub-topics, etc.).
- Generate the Excalidraw JSON with elements such as rectangles, ellipses, diamonds, arrows, and text, ensuring properties like position, size, stroke/background color, font (fontFamily: 5) for all text.
- Save the output as an .excalidraw file and provide instructions to open it in Excalidraw.
The process emphasizes concrete extraction of diagram elements and their connections, then encodes them into the Excalidraw format.
When to use it
Use when users request to:
- "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..."
# 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*
- When to Use This Skill
- Prerequisites
- Step-by-Step Workflow
- Step 1: Understand the Request
- Step 2: Choose the Appropriate Diagram Type
- Step 3: Extract Structured Information
- Step 4: Generate the Excalidraw JSON
- Step 5: Format the Output
- Step 6: Save and Provide Instructions
- Best Practices
- Element Count Guidelines
- Layout Tips
- Complexity Management
- Example Prompts and Responses
mkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/ python skills/excalidraw-diagram-generator/scripts/add-icon-to-diagram.py \ python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Web Server" python scripts/add-icon-to-diagram.py diagram.excalidraw VPC 200 150 python scripts/add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \ python skills/excalidraw-diagram-generator/scripts/add-arrow.py \ python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS" python scripts/add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"
What does the excalidraw-diagram-generator skill do?
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.
How do I install it?
Run `npx skills add github/awesome-copilot --skill excalidraw-diagram-generator --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 github/awesome-copilot, a repository with 37,432 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.