---
name: ck-mermaidjs-v11
description: >
  Provides Mermaid.js v11 syntax reference for creating diagrams in markdown documents.
  Activate when user says 'create a mermaid diagram', 'draw a flowchart', 'sequence diagram',
  'ER diagram in mermaid', 'mermaid syntax', or 'diagram as code'. Accepts diagram type
  requests and data/relationship descriptions to visualize.
---

## Overview
Reference guide for Mermaid.js v11 diagram syntax. Antigravity IDE supports dot notation natively for diagrams; this skill is most useful when creating Mermaid blocks inside markdown documentation files.

## When to Use
- Writing architecture diagrams in markdown docs or plan files
- Creating flowcharts, sequence diagrams, or ER diagrams in README files
- Generating Mermaid syntax to embed in plan visuals (use with ck-markdown-novel-viewer)
- When dot notation is not sufficient and Mermaid's specific diagram types are needed

## Don't Use When
- Antigravity's native dot notation diagrams suffice for the task
- Creating interactive or animated visualizations (use a JS charting library)
- Diagram needs pixel-perfect layout control (use a GUI tool like draw.io)

## Steps / Instructions

### 1. Flowchart (flowchart / graph)

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E([End])
```

Node shapes:
```
[Rectangle]   (Rounded)   {Diamond}   ([Stadium])
((Circle))    >Asymmetric]   [[Subroutine]]   [(Database)]
```

Edge types:
```
-->    solid arrow
---    solid line (no arrow)
-.->   dotted arrow
==>    thick arrow
--text-->   labeled arrow
```

Direction: `TD` (top-down), `LR` (left-right), `BT`, `RL`

### 2. Sequence Diagram

```mermaid
sequenceDiagram
    autonumber
    actor User
    participant FE as Frontend
    participant API
    participant DB

    User->>FE: Click login
    FE->>API: POST /auth/login
    API->>DB: SELECT user
    DB-->>API: user row
    API-->>FE: 200 + JWT
    FE-->>User: Redirect to dashboard

    Note over API,DB: Transaction boundary
    rect rgb(200, 230, 255)
        API->>DB: Log audit event
    end
```

Arrow types:
```
->>     solid with arrow
-->>    dotted with arrow
-x      solid with X (async)
-)      open arrow (async)
```

### 3. Entity Relationship Diagram

```mermaid
erDiagram
    USER {
        int id PK
        string email UK
        string name
        datetime created_at
    }
    ORDER {
        int id PK
        int user_id FK
        decimal total
        string status
    }
    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
    }

    USER ||--o{ ORDER : "places"
    ORDER ||--|{ ORDER_ITEM : "contains"
```

Cardinality:
```
||--||    exactly one to exactly one
||--o{    exactly one to zero or more
}|--|{    one or more to one or more
```

### 4. Class Diagram

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }

    Animal <|-- Dog : extends
    Animal <|-- Cat : extends
    Dog --> Collar : has
```

### 5. State Diagram

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : complete
    Processing --> Error : fail
    Error --> Idle : retry
    Success --> [*]

    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }
```

### 6. Gantt Chart

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
        Research       :done,    p1, 2026-02-01, 7d
        Planning       :active,  p2, after p1, 5d
    section Phase 2
        Implementation :         p3, after p2, 14d
        Testing        :         p4, after p3, 7d
```

### 7. Pie Chart

```mermaid
pie title Browser Market Share
    "Chrome" : 65.3
    "Safari" : 18.7
    "Firefox" : 4.0
    "Edge" : 4.5
    "Other" : 7.5
```

### 8. Git Graph

```mermaid
gitGraph
    commit id: "initial"
    branch feature
    checkout feature
    commit id: "add feature"
    commit id: "fix bug"
    checkout main
    merge feature id: "merge feature"
    commit id: "release v1.0"
```

## Notes
- Mermaid v11 requires `flowchart` keyword (not `graph`) for new features
- Use `%%` for comments inside diagrams
- Theme can be set: `%%{init: {'theme': 'dark'}}%%`
- Node IDs cannot start with numbers; prefix with a letter
- Long labels: use `\n` for line breaks inside node text