Mermaid Skill for Claude Code

https://github.com/wh-2099/mermaid-skill
Admin
A Claude Code skill that enables generation of Mermaid diagrams, supporting 23 diagram types...
Tokens:4,089
Snippets:33
Trust Score:8.2
License:MIT
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Mermaid Skill using Git Clone

Source: https://github.com/wh-2099/mermaid-skill/blob/main/README.md

This snippet shows how to install the Mermaid Skill by cloning the repository and copying the skill folder to the project's .claude/skills directory. It's a straightforward method for adding the skill to your Claude Code environment.

```bash
git clone https://github.com/WH-2099/mermaid-skill.git
cp -r mermaid-skill/.claude/skills/mermaid /path/to/your/project/.claude/skills/
```

--------------------------------

### Mermaid Skill Usage Examples

Source: https://github.com/wh-2099/mermaid-skill/blob/main/README.md

These examples illustrate how to use the Mermaid Skill within Claude Code. The /mermaid command is followed by the type of diagram and a description of its content, allowing for quick generation of various Mermaid diagrams.

```bash
/mermaid create a flowchart for user login process
/mermaid draw a sequence diagram for API authentication
/mermaid ER diagram for an e-commerce database
```

--------------------------------

### Install Mermaid Skill using Git Submodule

Source: https://github.com/wh-2099/mermaid-skill/blob/main/README.md

This snippet demonstrates installing the Mermaid Skill as a git submodule. This approach is useful for managing dependencies and keeping the skill's code within your project's repository structure.

```bash
git submodule add https://github.com/WH-2099/mermaid-skill.git .claude/skills/mermaid-skill
ln -s mermaid-skill/.claude/skills/mermaid .claude/skills/mermaid
```

--------------------------------

### Generate Class Diagrams with Mermaid

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Define object-oriented structures showing classes, attributes, methods, relationships, and inheritance hierarchies. Supports UML notation with visibility modifiers and cardinality. This code snippet shows a class diagram example.

```mermaid
classDiagram
    class User {
        +int id
        +String username
        +String email
        -String passwordHash
        +login(password) bool
        +logout() void
        +updateProfile(data) User
    }

    class Order {
        +int orderId
        +Date createdAt
        +OrderStatus status
        +calculateTotal() decimal
        +addItem(product, qty) void
    }

    class Product {
        +int productId
        +String name
        +decimal price
        +int stock
        +isAvailable() bool
    }

    class OrderItem {
        +int quantity
        +decimal unitPrice
        +getSubtotal() decimal
    }

    User "1" --> "*" Order : places
    Order "1" *-- "*" OrderItem : contains
    OrderItem "*" --> "1" Product : references

    <<interface>> PaymentProcessor
    PaymentProcessor <|.. StripeProcessor
    PaymentProcessor <|.. PayPalProcessor
```

--------------------------------

### Generate Entity Relationship Diagrams with Mermaid

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Design database schemas showing entities, attributes, and relationships with cardinality notation. Perfect for data modeling and database documentation. This code snippet provides an example ER diagram.

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        int customer_id PK
        string name
        string email UK
        string phone
        date created_at
    }

    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int order_id PK
        int customer_id FK
        date order_date
        string status
        decimal total_amount
    }

    ORDER_ITEM }|--|| PRODUCT : references
    ORDER_ITEM {
        int item_id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal unit_price
    }

    PRODUCT {
        int product_id PK
        string name
        string description
        decimal price
        int stock_qty
    }

    PRODUCT }o--o{ CATEGORY : "belongs to"
    CATEGORY {
        int category_id PK
        string name
        int parent_id FK "self-referencing"
    }
```

--------------------------------

### Create Gantt Charts for Project Schedules

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Plan and visualize project schedules with tasks, dependencies, milestones, and sections. Supports date formatting, exclusions, and critical path highlighting.

```mermaid
gantt
    title Project Development Timeline
    dateFormat YYYY-MM-DD
    excludes weekends

    section Planning
    Requirements gathering    :done, req, 2024-01-01, 7d
    Technical specification   :done, spec, after req, 5d
    Architecture design       :active, arch, after spec, 10d

    section Development
    Backend API development   :dev1, after arch, 20d
    Frontend implementation   :dev2, after arch, 25d
    Database setup            :dev3, after arch, 5d
    Integration               :dev4, after dev1, 10d

    section Testing
    Unit tests                :test1, after dev3, 15d
    Integration tests         :crit, test2, after dev4, 10d
    User acceptance testing   :test3, after test2, 7d

    section Deployment
    Staging deployment        :milestone, m1, after test2, 0d
    Production release        :milestone, m2, after test3, 0d
```

--------------------------------

### Visualize Git Branching Strategies with Git Graph

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Visualize Git branching strategies, commits, merges, and cherry-picks. Perfect for documenting Git workflows and release processes.

```mermaid
gitGraph
    commit id: "Initial commit"
    commit id: "Add base structure"
    branch develop
    checkout develop
    commit id: "Setup dev environment"
    branch feature/auth
    checkout feature/auth
    commit id: "Add login page"
    commit id: "Add JWT handling"
    checkout develop
    merge feature/auth id: "Merge auth feature"
    branch feature/dashboard
    checkout feature/dashboard
    commit id: "Dashboard layout"
    commit id: "Add charts"
    checkout develop
    merge feature/dashboard id: "Merge dashboard"
    checkout main
    merge develop id: "Release v1.0" tag: "v1.0.0"
    checkout develop
    commit id: "Post-release fixes"
```

--------------------------------

### Model Finite State Machines with State Diagrams

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Model finite state machines showing states, transitions, and composite states. Useful for documenting application state management and workflow logic.

```mermaid
stateDiagram-v2
    [*] --> Draft

    Draft --> PendingReview : submit
    Draft --> Draft : save

    PendingReview --> Approved : approve
    PendingReview --> Rejected : reject
    PendingReview --> Draft : requestChanges

    Approved --> Published : publish
    Approved --> Draft : unpublish

    Published --> Archived : archive
    Published --> Draft : revert

    Rejected --> Draft : revise
    Rejected --> [*] : delete

    Archived --> [*]

    state PendingReview {
        [*] --> ManagerReview
        ManagerReview --> LegalReview : managerApproved
        LegalReview --> [*] : legalApproved
    }

    note right of Published
        Content is visible
        to all users
    end note
```

--------------------------------

### Display Proportional Data with Pie Charts

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Display proportional data with labeled slices. Simple syntax for quick data visualization with optional value display.

```mermaid
pie showData
    title Technology Stack Distribution
    "JavaScript/TypeScript" : 35
    "Python" : 25
    "Go" : 15
    "Rust" : 10
    "Java" : 10
    "Other" : 5
```

--------------------------------

### Generate User Journey Diagram using Mermaid

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Maps user experiences, including tasks, emotions, and touchpoints across a process. Input defines the journey's title, sections, and steps with associated user actions and emotions.

```mermaid
journey
    title User Onboarding Experience
    section Discovery
      Find website: 3: User
      Read features: 4: User
      View pricing: 3: User
    section Signup
      Create account: 5: User
      Verify email: 4: User
      Complete profile: 3: User
    section First Use
      Dashboard tour: 4: User, System
      Create first project: 5: User
      Invite team members: 4: User
    section Adoption
      Daily usage: 5: User
      Explore features: 4: User
      Provide feedback: 3: User
```

--------------------------------

### Configure Theming for Mermaid Diagrams

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Customizes the appearance of Mermaid diagrams using built-in themes or custom theme variables. The configuration is applied using a YAML front matter block before the diagram definition.

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: '#4A90D9'
    primaryTextColor: '#ffffff'
    primaryBorderColor: '#2E5A8B'
    lineColor: '#6B7280'
    secondaryColor: '#10B981'
    tertiaryColor: '#F3F4F6'
    noteBkgColor: '#FEF3C7'
    noteTextColor: '#92400E'
---
flowchart LR
    A[Themed Node] --> B{Decision}
    B -->|Yes| C[Success]
    B -->|No| D[Retry]
    C --> E[Complete]
    D --> A

    style A fill:#4A90D9,stroke:#2E5A8B,color:#fff
    style C fill:#10B981,stroke:#059669,color:#fff
```

--------------------------------

### Visualize Chronological Events with Timeline Diagrams

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Visualize chronological events with time periods and sections. Ideal for historical timelines, roadmaps, and release planning.

```mermaid
timeline
    title Product Roadmap 2024
    section Q1
        January : Feature A Release
                : Performance Optimization
        February : Mobile App Beta
        March : Security Audit
    section Q2
        April : API v2 Launch
        May : Enterprise Features
        June : Global Expansion
    section Q3
        July : AI Integration
        August : Analytics Dashboard
        September : Partner Portal
    section Q4
        October : Platform Redesign
        November : Multi-tenant Support
        December : Year-end Release
```

--------------------------------

### Generate Flowchart Diagrams with Mermaid

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Create process flows, decision trees, and workflow diagrams with customizable nodes, edges, and subgraphs. Supports multiple orientations (TB, BT, LR, RL), various node shapes, and link styles. This code snippet demonstrates a basic flowchart structure.

```mermaid
flowchart TD
    A[Start] --> B{Is authenticated?}
    B -->|Yes| C[Load Dashboard]
    B -->|No| D[Show Login]
    D --> E[Enter Credentials]
    E --> F{Valid?}
    F -->|Yes| C
    F -->|No| G[Show Error]
    G --> D
    C --> H[User Actions]

    subgraph Authentication Flow
        D
        E
        F
        G
    end

    style A fill:#90EE90
    style H fill:#87CEEB
    classDef error fill:#FF6B6B,color:white
    class G error
```

--------------------------------

### Generate Sequence Diagrams with Mermaid

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Model interactions between participants over time, showing message flows, activations, loops, and conditional logic. Ideal for API documentation and system communication flows. This code snippet illustrates a typical sequence diagram.

```mermaid
sequenceDiagram
    autonumber
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant DB as Database

    Client->>+API: POST /login {username, password}
    API->>+Auth: validateCredentials()
    Auth->>+DB: SELECT user WHERE username=?
    DB-->>-Auth: User record

    alt Valid credentials
        Auth-->>API: JWT Token
        API-->>Client: 200 OK {token}
    else Invalid credentials
        Auth-->>API: null
        API-->>Client: 401 Unauthorized
    end
    deactivate Auth
    deactivate API

    Note over Client,DB: Token expires in 24 hours

    loop Every request
        Client->>API: Request + Bearer Token
        API->>Auth: verifyToken()
    end
```

--------------------------------

### Generate Quadrant Chart using Mermaid

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Creates a four-quadrant grid for comparative analysis, useful for priority matrices and strategic planning. Input is a description of the chart's title, axes, and data points.

```mermaid
quadrantChart
    title Feature Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan for future
    quadrant-2 Do immediately
    quadrant-3 Delegate or drop
    quadrant-4 Schedule carefully
    User Authentication: [0.2, 0.9]
    Dark Mode: [0.1, 0.3]
    API Caching: [0.4, 0.8]
    Mobile App: [0.9, 0.85]
    Analytics: [0.6, 0.7]
    Social Login: [0.3, 0.4]
    Export Feature: [0.5, 0.5]
```

--------------------------------

### Create Hierarchical Mindmaps

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Create hierarchical thought maps with various node shapes and icons. Uses indentation-based syntax for intuitive structure definition.

```mermaid
mindmap
  root((Project Architecture))
    Frontend
      React Components
        Pages
        Shared UI
      State Management
        Redux Toolkit
        React Query
      Styling
        Tailwind CSS
        CSS Modules
    Backend
      API Layer
        REST Endpoints
        GraphQL
      Business Logic
        Services
        Validators
      Data Access
        Repositories
        ORM Models
    Infrastructure
      Cloud Services
        AWS Lambda
        S3 Storage
      DevOps
        CI/CD Pipeline
        Docker
        Kubernetes
```

--------------------------------

### Generate Advanced Flowchart Shapes using Mermaid (v11.3.0+)

Source: https://context7.com/wh-2099/mermaid-skill/llms.txt

Utilizes expanded shape syntax for specialized flowchart nodes like databases, documents, and processes. Requires Mermaid version 11.3.0 or later. The code defines nodes with specific shapes and labels, then connects them.

```mermaid
flowchart TD
    A@{ shape: stadium, label: "Start Process" }
    B@{ shape: cyl, label: "Database" }
    C@{ shape: docs, label: "Documents" }
    D@{ shape: diamond, label: "Decision" }
    E@{ shape: delay, label: "Wait State" }
    F@{ shape: manual, label: "Manual Step" }
    G@{ shape: subproc, label: "Subprocess" }
    H@{ shape: dbl-circ, label: "End" }

    A --> B
    B --> C
    C --> D
    D -->|Approve| E
    D -->|Reject| F
    E --> G
    F --> A
    G --> H
```
Tokens:
Raw