Diagram Generator Skill

Diagram Generator

Expert skill for creating clear, professional diagrams in Mermaid or ASCII format.

Supported Formats

| Format | Best For | Trigger Keywords | |--------|----------|------------------| | Mermaid | Web docs, GitHub, rich rendering | "diagram", "mermaid", "visualize" | | ASCII | Terminals, plain text, emails | "ASCII", "text diagram", "terminal" |

Diagram Types

graph/flowchart     - Flowcharts and decision trees
sequenceDiagram     - API interactions and workflows
classDiagram        - Object-oriented structures
stateDiagram-v2     - State machines and transitions
erDiagram           - Database relationships
C4Context/C4Container/C4Component - Architecture views (C4 model)
mindmap             - Brainstorming and idea organization
block-beta          - System block diagrams
gantt               - Project timelines
pie                 - Data distributions
gitGraph            - Git branching strategies
journey             - User experience flows
quadrantChart       - Priority matrices
timeline            - Historical events

Quick Start

Determine format: Mermaid (default) or ASCII (if user explicitly requests)
Select diagram type based on what's being visualized
Choose layout: TB/TD (top-down), LR (left-right) for Mermaid
Keep readable: Max 15-20 nodes per diagram
Apply meaningful styling: Colors/shapes with semantic meaning

Output Format

Mermaid (Default)

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]

    classDef success fill:#90EE90
    class C success
```

ASCII (When Explicitly Requested)

+-------+     +----------+
| Start | --> | Decision |
+-------+     +----+-----+
                   |
         +---------+---------+
         |                   |
         v                   v
    +----------+       +----------+
    | Action 1 |       | Action 2 |
    +----------+       +----------+

ASCII Conventions:

+---+ for boxes, | for vertical lines, --> or --- for connections
Use consistent spacing and alignment
Label arrows with [text] above the line when needed

Diagram Type Selection

| Use Case | Recommended Type | |----------|------------------| | Process/decision flow | graph (flowchart) | | API/service interactions | sequenceDiagram | | System architecture (high-level) | C4Context | | System architecture (detailed) | C4Container, block-beta | | Database schema | erDiagram | | Brainstorming/ideas | mindmap | | State transitions | stateDiagram-v2 | | Project timeline | gantt | | Feature prioritization | quadrantChart |

Resources

WORKFLOW.md - Detailed creation methodology
EXAMPLES.md - All diagram types with real-world examples
TROUBLESHOOTING.md - Common errors and fixes

Integration

Auto-invokes on trigger keywords (diagram, mermaid, ASCII, visualize, etc.)
Manual: Use /diagram command
With docs: Works alongside doc-coauthoring skill for documentation diagrams

Agent Skills: Diagram Generator

Install this agent skill to your local

Skill Files