Initial commit: antigravity-claudekit

skills/ck-mermaidjs-v11/SKILL.md

@@ -0,0 +1,204 @@
+---
+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