MCPInstall

mermaid-diagrams

by hoodiniDocs & Writing

Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.

Installs
407
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/hoodini/ai-agents-skills --skill mermaid-diagrams
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads mermaid-diagrams automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Mermaid Diagrams

Create diagrams and visualizations using Mermaid markdown syntax.

Quick Reference

Mermaid diagrams are written in markdown code blocks with mermaid as the language identifier.

Flowchart

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 Syntax

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

Subgraphs

flowchart TB
    subgraph Frontend
        A[React App] --> B[Components]
        B --> C[Hooks]
    end
    
    subgraph Backend
        D[API Server] --> E[Database]
    end
    
    A -->|HTTP| D

Sequence Diagram

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

Sequence Diagram Syntax

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

Class Diagram

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

Class Diagram Syntax

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

Entity Relationship Diagram

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
    }

ER Diagram Cardinality

||--||   One to one
||--o{   One to zero or more
||--|{   One to one or more
}o--o{   Zero or more to zero or more

Gantt Chart

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

State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Submit
    Processing --> Success: Valid
    Processing --> Error: Invalid
    Success --> Idle: Reset
    Error --> Idle: Retry
    Success --> [*]

Pie Chart

pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2

Git Graph

gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
    branch hotfix
    checkout hotfix
    commit
    checkout main
    merge hotfix

User Journey

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

mindmap
    root((Project))
        Frontend
            React
            TypeScript
            Tailwind
        Backend
            Node.js
            PostgreSQL
            Redis
        DevOps
            Docker
            Kubernetes
            CI/CD

Styling

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

React Component

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 = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      mermaid.render(id, chart).then(({ svg }) => {
        if (ref.current) {
          ref.current.innerHTML = svg;
        }
      });
    }
  }, [chart, id]);

  return <div ref={ref} className="mermaid-container" />;
}

// Usage
<Mermaid
  chart={`
    flowchart LR
      A --> B --> C
  `}
/>

Tips

  1. Direction: Use TD (top-down), LR (left-right), BT (bottom-top), RL (right-left)
  2. Comments: Use %% for comments
  3. Quotes: Use quotes for labels with special characters: A["Label with (parentheses)"]
  4. Line breaks: Use <br/> for multi-line labels

Resources

FAQ

What does the mermaid-diagrams skill do?

Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.

How do I install mermaid-diagrams?

Run npx skills add https://github.com/hoodini/ai-agents-skills --skill mermaid-diagrams in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mermaid-diagrams/ (personal) or .claude/skills/mermaid-diagrams/ (project).

Which AI agents can use mermaid-diagrams?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is mermaid-diagrams safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains mermaid-diagrams?

It is published by hoodini in hoodini/ai-agents-skills. It has 407 recorded installs.

More from hoodini/ai-agents-skills

View all →

github-trending

hoodini/ai-agents-skills

Fetch and display GitHub trending repositories and developers. Use when building dashboards showing trending repos, discovering popular projects, or tracking GitHub trends. Triggers on GitHub trending, trending repos, popular repositories, GitHub discover.

AI & Agents3.2K installs

owasp-security

hoodini/ai-agents-skills

Implement secure coding practices following OWASP Top 10. Use when preventing security vulnerabilities, implementing authentication, securing APIs, or conducting security reviews. Triggers on OWASP, security, XSS, SQL injection, CSRF, authentication security, secure coding, vulnerability.

Security3K installs

mongodb

hoodini/ai-agents-skills

Work with MongoDB databases using best practices. Use when designing schemas, writing queries, building aggregation pipelines, or optimizing performance. Triggers on MongoDB, Mongoose, NoSQL, aggregation pipeline, document database, MongoDB Atlas.

Data & Databases1.7K installs

mobile-responsiveness

hoodini/ai-agents-skills

Build responsive, mobile-first web applications. Use when implementing responsive layouts, touch interactions, mobile navigation, or optimizing for various screen sizes. Triggers on responsive design, mobile-first, breakpoints, touch events, viewport.

Mobile1.4K installs

web-accessibility

hoodini/ai-agents-skills

Build accessible web applications following WCAG guidelines. Use when implementing ARIA patterns, keyboard navigation, screen reader support, or ensuring accessibility compliance. Triggers on accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation.

Frontend & Design455 installs

google-workspace-cli

hoodini/ai-agents-skills

Open the skill to read its SKILL.md instructions.

Productivity & Automation455 installs

Popular docs & writing skills

View category →

grill-with-docs

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs