antigravity-claudekit/skills/ck-mermaidjs-v11/SKILL.md

name, description

name	description
ck-mermaidjs-v11	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)

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

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

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

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

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

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

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

8. Git Graph

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