excalidraw-diagram-generator
Has your agent create visual diagrams from descriptions. It can generate flowcharts, mind maps, and system architectures in a format that can be opened in drawing software.
What it does
This agent creates visual diagrams, like flowcharts or mind maps, from your descriptions. It turns your ideas into drawings that show processes, systems, or relationships.
When to use it
- ✓When you want to draw a step-by-step process.
- ✓To visualize how different parts of a system connect.
- ✓When organizing ideas into a mind map.
Example of what to ask your AI
“Create a flowchart showing the steps to make coffee, starting with 'grind beans' and ending with 'serve'.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You describe what you want to see, and the agent identifies the elements and how they connect. Then, it generates a special file that the Excalidraw program understands to draw the diagram.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill excalidraw-diagram-generatorOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/excalidraw-diagram-generator/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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)
- Key elements (entities, steps, concepts)
- Relationships (flow, connections, hierarchy)
- Complexity (number of elements)
Step 2: Choose the Appropriate Diagram Type
| 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" |
Step 3: Extract Structured Information
For Flowcharts:
- List of sequential steps
- Decision points (if any)
- Start and end points
For Relationship Diagrams:
- Entities/nodes (name + optional description)
- 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)
- Multiplicity notations (1, 0..1, 1..*, *)
For Sequence Diagrams:
- Objects/actors (arranged horizontally at top)
…
FAQ
What types of diagrams can it create?
It can create flowcharts, relationship diagrams, mind maps, architecture diagrams, data flow diagrams, business flow (swimlane) diagrams, class diagrams, sequence diagrams, and ER diagrams.
Do I need to know how to draw?
No, you just need to describe what you want to visualize. The agent handles the drawing.
What is an .excalidraw file?
It's a file that the Excalidraw program uses to display the diagram the agent created. You can open this file in Excalidraw to view and edit the drawing.
Details
Original description by the author
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.
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5136
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC