Excalidraw Diagram Generator
Turn natural-language descriptions into downloadable .excalidraw JSON for flowcharts, architecture, mind maps, swimlanes, and DFDs.
Overview
Excalidraw Diagram Generator is an agent skill most often used in Build (also Validate scope, Idea research) that creates Excalidraw JSON diagrams from natural language.
Install
npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generatorWhat is this skill?
- Supports flowcharts, relationship diagrams, mind maps, architecture, DFD, and swimlane business flows
- Outputs native .excalidraw JSON openable directly in Excalidraw
- Triggered by create diagram, flowchart, visualize process, or system architecture requests
- Covers decision trees, dependencies, concept hierarchies, and module interaction views
- Natural-language in—no manual canvas placement required
- Supports 6+ diagram families including flowcharts, mind maps, architecture, DFD, and swimlanes
Adoption & trust: 22.6k installs on skills.sh; 34.6k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You can describe a process or architecture in chat but lack a fast path to an editable diagram file stakeholders can open in Excalidraw.
Who is it for?
Solo builders documenting systems, onboarding flows, or validation logic who already use or can open Excalidraw.
Skip if: Pixel-perfect brand slides, automated CI diagram drift checks, or teams that require Mermaid-only text diagrams in repo.
When should I use this skill?
User asks to create a diagram, flowchart, visualize a process, draw system architecture, mind map, or generate an Excalidraw file.
What do I get? / Deliverables
After the skill runs, you get a .excalidraw JSON file matching the requested diagram type ready to edit or embed in documentation.
- .excalidraw JSON diagram file
- Structured elements for chosen diagram type (flow, architecture, mind map, etc.)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Most solo builders first reach for diagram generation while documenting systems and plans inside the build phase. Docs is the canonical shelf for artifacts teammates and future-you open in Excalidraw alongside READMEs and specs.
Where it fits
Mind-map competitor positioning and feature themes before committing to a build scope.
Flowchart signup and payment paths to sanity-check MVP boundaries with a cofounder.
Architecture diagram of API, worker, and database modules for the README.
Swimlane diagram of deploy and rollback steps for a lightweight release checklist.
How it compares
Generator for editable Excalidraw assets—not a Figma UI kit or static screenshot tool.
Common Questions / FAQ
Who is excalidraw-diagram-generator for?
Indie developers and product-minded solos who want architecture, flow, or mind-map diagrams as Excalidraw files without manual drawing.
When should I use excalidraw-diagram-generator?
During Build docs for system maps; during Validate scope to visualize user flows; during Idea research for concept mind maps; whenever you ask to create a flowchart or Excalidraw diagram.
Is excalidraw-diagram-generator safe to install?
Review Security Audits on this Prism page; the skill writes local .excalidraw files from your prompts—inspect JSON before sharing externally.
SKILL.md
READMESKILL.md - Excalidraw Diagram Generator
# 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: 1. **Diagram type** (flowchart, relationship, mind map, architecture) 2. **Key elements** (entities, steps, concepts) 3. **Relationships** (flow, connections, hierarchy) 4. **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 (dat