excalidraw

Files (16)

• SKILL.md
• element-types.md · references/
• excalidraw-schema.md · references/
• .gitignore · scripts/
• README.md · scripts/
• add-arrow.py · scripts/
• add-icon-to-diagram.py · scripts/
• split-excalidraw-library.py · scripts/
• business-flow-swimlane-template.excalidraw · templates/
• class-diagram-template.excalidraw · templates/
• data-flow-diagram-template.excalidraw · templates/
• er-diagram-template.excalidraw · templates/
• flowchart-template.excalidraw · templates/
• mindmap-template.excalidraw · templates/
• relationship-template.excalidraw · templates/
• sequence-diagram-template.excalidraw · templates/

SKILL.md (first lines)

# 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 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)
- Lifelines (vertical lines from each object)
- Messages (horizontal arrows between lifelines)
- Synchronous messages (solid arrow), asynchronous messages (dashed arrow)
- Return values (dashed arrows)
- 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

From yamcodes/the-hat, MIT.

More from yamcodes/the-hat