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 (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 C