205 lines
4.5 KiB
Markdown
205 lines
4.5 KiB
Markdown
---
|
|
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
|