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

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

joaquimscosta-diagramming

Diagram Generator

Supported Formats

Diagram Types