pm7y-mermaid-diagram

# Mermaid Diagram Skill

Creates syntactically correct mermaid diagrams following official specifications and preventing common errors.

---

## Overview

This skill helps you create error-free mermaid diagrams by:

- Following official mermaid syntax specifications
- Avoiding common pitfalls (special characters, reserved words, wrong note syntax)
- Providing correct structure for each diagram type
- Based on real experience: 76 diagrams fixed, 20+ iterations avoided

**When to use:**

- Creating flowcharts, sequence diagrams, class diagrams, etc.
- Editing existing mermaid diagrams
- Converting design ideas into visual diagrams

---

## Quick Start

### Flowchart Basic Syntax

```mermaid
flowchart TD
    Start[Start Process]
    Process[Process Data]
    Decision{Is Valid?}
    End[End]

    Start --> Process
    Process --> Decision
    Decision -->|Yes| End
    Decision -->|No| Process
```

### Sequence Diagram Basic Syntax

```mermaid
sequenceDiagram
    participant A as Alice
    participant B as Bob

    A->>B: Hello Bob
    B->>A: Hi Alice

    Note right of B: Bob thinks
```

### Class Diagram Basic Syntax

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +bark()
    }

    Animal <|-- Dog
```

---

## Critical Rules (MUST FOLLOW)

### Rule 1: Special Characters in Labels

**Problem characters:** `:`, `()`, `[]`, `{}`, `@`, `;`, `,`

**Solutions:**

**Option A: Use double quotes**

```mermaid
flowchart LR
    A["Function: process()"]
    B["Array [1, 2, 3]"]
```

**Option B: Use HTML entities**

- `:` → `&#58;`
- `(` → `&#40;`
- `)` → `&#41;`
- `[` → `&#91;`
- `]` → `&#93;`
- `;` → `&#59;`

**WRONG:**

```mermaid
flowchart LR
    A[Function: process()]  ❌ Colon breaks syntax
```

---

### Rule 2: Reserved Words

**"end" (lowercase):**

```mermaid
flowchart TD
    Start --> End   ✅ Capitalized OK
    Start --> end   ❌ Breaks diagram
    Start --> END   ✅ All caps OK
```

**"o"