Diagramming

Diagram Generator

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

Supported Formats

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

1. Determine format: Mermaid (default) or ASCII (if user explicitly requests)
2. Select diagram type based on what's being visualized
3. Choose layout: TB/TD (top-down), LR (left-right) for Mermaid
4. Keep readable: Max 15-20 nodes per diagram
5. 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

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