diagramming

# Mermaid Diagram Generator

Expert skill for creating clear, professional Mermaid diagrams for documentation and visualization.

## Supported 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
gantt               - Project timelines
pie                 - Data distributions
gitGraph            - Git branching strategies
journey             - User experience flows
quadrantChart       - Priority matrices
timeline            - Historical events
```

## Quick Start

### Creating a New Diagram

1. **Identify the right diagram type** based on what you're visualizing
2. **Choose appropriate layout** (TB=top-to-bottom, LR=left-to-right, etc.)
3. **Keep it readable** - avoid overcrowding nodes
4. **Use consistent styling** - colors and shapes should have meaning
5. **Add meaningful labels** - clear, concise descriptions

### Editing Existing Diagrams

1. **Preserve the structure** - maintain existing node IDs and relationships
2. **Match the style** - use the same syntax patterns and formatting
3. **Test incrementally** - verify changes render correctly
4. **Document changes** - add comments for complex modifications

## Core Approach

**Readability First**
- Maximum 15-20 nodes per diagram
- Use subgraphs to organize complex flows
- Consistent spacing and indentation

**Meaningful Styling**
- Colors indicate categories (success=green, error=red, etc.)
- Shapes indicate types (rectangle=process, diamond=decision, etc.)
- Line styles indicate relationships (solid=strong, dashed=weak, etc.)

**Professional Output**
- Complete, working Mermaid code
- Both basic and styled versions
- Inline comments explaining complex syntax
- Rendering preview instructions

## Output Format

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