Create diagrams and visualizations using Mermaid markdown syntax.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionmermaid-diagramsExecute the skills CLI command in your project's root directory to begin installation:
Fetches mermaid-diagrams from hoodini/ai-agents-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate mermaid-diagrams. Access via /mermaid-diagrams in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
1
total installs
1
this week
151
GitHub stars
0
upvotes
Run in your terminal
1
installs
1
this week
151
stars
Create diagrams and visualizations using Mermaid markdown syntax.
Mermaid diagrams are written in markdown code blocks with mermaid as the language identifier.
flowchart TD
A[Start] --> B{Is it valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Save to database]
D --> F[Return to input]
E --> G[End]
F --> A
flowchart TD %% TD = top-down, LR = left-right, RL, BT
A[Rectangle] %% Square brackets = rectangle
B(Rounded) %% Parentheses = rounded rectangle
C{Diamond} %% Curly braces = diamond/decision
D[[Subroutine]] %% Double brackets = subroutine
E[(Database)] %% Cylinder shape
F((Circle)) %% Double parentheses = circle
G>Asymmetric] %% Flag shape
A --> B %% Arrow
B --- C %% Line without arrow
C -.-> D %% Dotted arrow
D ==> E %% Thick arrow
E --text--> F %% Arrow with label
F -->|label| G %% Alternative label syntax
flowchart TB
subgraph Frontend
A[React App] --> B[Components]
B --> C[Hooks]
end
subgraph Backend
D[API Server] --> E[Database]
end
A -->|HTTP| D
sequenceDiagram
participant U as User
participant C as Client
participant S as Server
participant D as Database
U->>C: Click submit
C->>S: POST /api/data
activate S
S->>D: INSERT query
D-->>S: Success
S-->>C: 200 OK
deactivate S
C-->>U: Show success message
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Solid line with arrow
A-->>B: Dotted line with arrow
A-)B: Solid line with open arrow
A--)B: Dotted line with open arrow
activate B %% Activation box
B->>A: Response
deactivate B
Note over A,B: This is a note
Note right of A: Note on right
alt Condition true
A->>B: Do this
else Condition false
A->>B: Do that
end
loop Every minute
A->>B: Ping
end
opt Optional action
A->>B: Maybe do this
end
classDiagram
class User {
+String id
+String name
+String email
+login()
+logout()
}
class Order {
+String id
+Date createdAt
+calculateTotal()
}
class Product {
+String id
+String name
+Number price
}
User "1" --> "*" Order : places
Order "*" --> "*" Product : contains
classDiagram
class ClassName {
+publicField
-privateField
#protectedField
~packageField
+publicMethod()
-privateMethod()
}
ClassA <|-- ClassB : Inheritance
ClassC *-- ClassD : Composition
ClassE o-- ClassF : Aggregation
ClassG --> ClassH : Association
ClassI ..> ClassJ : Dependency
ClassK ..|> ClassL : Realization
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
USER {
string id PK
string email UK
string name
datetime created_at
}
ORDER {
string id PK
string user_id FK
datetime created_at
string status
}
PRODUCT {
string id PK
string name
decimal price
}
LINE_ITEM {
string id PK
string order_id FK
string product_id FK
int quantity
}
||--|| One to one
||--o{ One to zero or more
||--|{ One to one or more
}o--o{ Zero or more to zero or more
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 14d
section Development
Backend API :b1, after a2, 21d
Frontend :b2, after a2, 28d
Integration :b3, after b1, 7d
section Testing
QA Testing :c1, after b3, 14d
Bug Fixes :c2, after c1, 7d
section Launch
Deployment :milestone, after c2, 0d
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Submit
Processing --> Success: Valid
Processing --> Error: Invalid
Success --> Idle: Reset
Error --> Idle: Retry
Success --> [*]
pie title Browser Market Share
"Chrome" : 65
"Safari" : 19
"Firefox" : 10
"Edge" : 4
"Other" : 2
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
branch hotfix
checkout hotfix
commit
checkout main
merge hotfix
journey
title User Checkout Experience
section Browse
View products: 5: User
Add to cart: 4: User
section Checkout
Enter shipping: 3: User
Enter payment: 2: User
Confirm order: 5: User
section Post-Purchase
Receive confirmation: 5: User, System
Track shipment: 4: User
mindmap
root((Project))
Frontend
React
TypeScript
Tailwind
Backend
Node.js
PostgreSQL
Redis
DevOps
Docker
Kubernetes
CI/CD
flowchart LR
A[Start]:::green --> B[Process]:::blue --> C[End]:::red
classDef green fill:#22c55e,color:#fff
classDef blue fill:#3b82f6,color:#fff
classDef red fill:#ef4444,color:#fff
import mermaid from 'mermaid';
import { useEffect, useRef } from 'react';
mermaid.initialize({
startOnLoad: true,
theme: 'neutral', // default, dark, forest, neutral
securityLevel: 'loose',
});
interface MermaidProps {
chart: string;
id?: string;
}
export function Mermaid({ chart, id = 'mermaid-diagram' }: MermaidProps) {
const ref =Prerequisites
Time Estimate
15-45 minutes depending on use case complexity
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
intellectronica/agent-skills
imxv/pretty-mermaid-skills
davila7/claude-code-templates
am-will/codex-skills
sickn33/antigravity-awesome-skills
myzy-ai/dokie-ai-ppt
mermaid-diagrams reduced setup friction for our internal harness; good balance of opinion and flexibility.
I recommend mermaid-diagrams for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Solid pick for teams standardizing on skills: mermaid-diagrams is focused, and the summary matches what you get after install.
mermaid-diagrams has been reliable in day-to-day use. Documentation quality is above average for community skills.
Useful defaults in mermaid-diagrams — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Registry listing for mermaid-diagrams matched our evaluation — installs cleanly and behaves as described in the markdown.
mermaid-diagrams is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
mermaid-diagrams fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
mermaid-diagrams fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
I recommend mermaid-diagrams for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
showing 1-10 of 33