acc-mermaid-template

Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.

16 stars

Best use case

acc-mermaid-template is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.

Teams using acc-mermaid-template should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/acc-mermaid-template/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/data-ai/acc-mermaid-template/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/acc-mermaid-template/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How acc-mermaid-template Compares

Feature / Agentacc-mermaid-templateStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Mermaid Diagram Template Generator

Generate Mermaid diagrams for technical documentation.

## Diagram Templates

### Flowchart - Basic

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```

### Flowchart - Process

```mermaid
flowchart LR
    subgraph Input
        A[Request]
    end

    subgraph Processing
        B[Validate]
        C[Transform]
        D[Store]
    end

    subgraph Output
        E[Response]
    end

    A --> B --> C --> D --> E
```

### Flowchart - Architecture Layers

```mermaid
flowchart TB
    subgraph presentation[Presentation Layer]
        direction LR
        AC[Action]
        RS[Responder]
    end

    subgraph application[Application Layer]
        direction LR
        UC[UseCase]
        DTO[DTO]
    end

    subgraph domain[Domain Layer]
        direction LR
        EN[Entity]
        VO[ValueObject]
        EV[Event]
    end

    subgraph infrastructure[Infrastructure Layer]
        direction LR
        RP[Repository]
        AD[Adapter]
    end

    presentation --> application
    application --> domain
    infrastructure -.-> domain
```

### Sequence - Basic

```mermaid
sequenceDiagram
    participant C as Client
    participant S as Server
    participant D as Database

    C->>S: Request
    S->>D: Query
    D-->>S: Result
    S-->>C: Response
```

### Sequence - With Authentication

```mermaid
sequenceDiagram
    participant C as Client
    participant A as Auth
    participant S as Service
    participant D as Database

    C->>A: Login(credentials)
    A->>D: Verify user
    D-->>A: User data
    A-->>C: JWT Token

    C->>S: Request + Token
    S->>A: Validate token
    A-->>S: Token valid
    S->>D: Query
    D-->>S: Data
    S-->>C: Response
```

### Sequence - With Error Handling

```mermaid
sequenceDiagram
    participant C as Client
    participant S as Service
    participant D as Database

    C->>S: Create order

    alt Valid request
        S->>D: INSERT order
        D-->>S: order_id
        S-->>C: 201 Created
    else Validation error
        S-->>C: 400 Bad Request
    else Database error
        S->>D: INSERT order
        D-->>S: Error
        S-->>C: 500 Internal Error
    end
```

### Sequence - Async with Queue

```mermaid
sequenceDiagram
    participant C as Client
    participant A as API
    participant Q as Queue
    participant W as Worker
    participant D as Database

    C->>A: POST /jobs
    A->>D: Create job (pending)
    A->>Q: Publish job
    A-->>C: 202 Accepted {job_id}

    W->>Q: Consume job
    W->>D: Update job (processing)
    W->>W: Process
    W->>D: Update job (completed)
```

### Class - Domain Model

```mermaid
classDiagram
    class Order {
        <<aggregate root>>
        -OrderId id
        -CustomerId customerId
        -OrderStatus status
        -Money total
        +confirm() void
        +cancel() void
        +ship() void
    }

    class OrderItem {
        <<entity>>
        -OrderItemId id
        -ProductId productId
        -Quantity quantity
        -Money price
    }

    class OrderStatus {
        <<enumeration>>
        PENDING
        CONFIRMED
        SHIPPED
        CANCELLED
    }

    class Money {
        <<value object>>
        -int cents
        -string currency
        +add(Money) Money
        +equals(Money) bool
    }

    Order "1" *-- "*" OrderItem : contains
    Order --> OrderStatus : has
    Order --> Money : total
    OrderItem --> Money : price
```

### Class - Repository Pattern

```mermaid
classDiagram
    class OrderRepositoryInterface {
        <<interface>>
        +findById(OrderId id) Order
        +save(Order order) void
        +delete(OrderId id) void
    }

    class DoctrineOrderRepository {
        -EntityManager em
        +findById(OrderId id) Order
        +save(Order order) void
        +delete(OrderId id) void
    }

    class InMemoryOrderRepository {
        -array orders
        +findById(OrderId id) Order
        +save(Order order) void
        +delete(OrderId id) void
    }

    OrderRepositoryInterface <|.. DoctrineOrderRepository
    OrderRepositoryInterface <|.. InMemoryOrderRepository
```

### ER - Database Schema

```mermaid
erDiagram
    users ||--o{ orders : places
    orders ||--|{ order_items : contains
    order_items }o--|| products : references

    users {
        uuid id PK
        varchar email UK
        varchar name
        timestamp created_at
    }

    orders {
        uuid id PK
        uuid user_id FK
        varchar status
        int total_cents
        varchar currency
        timestamp created_at
    }

    order_items {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
        int price_cents
    }

    products {
        uuid id PK
        varchar name
        varchar sku UK
        int price_cents
        varchar currency
    }
```

### State - Entity Lifecycle

```mermaid
stateDiagram-v2
    [*] --> Draft : create()

    Draft --> Pending : submit()
    Draft --> [*] : delete()

    Pending --> Approved : approve()
    Pending --> Rejected : reject()
    Pending --> Draft : requestChanges()

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

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

    Published --> Archived : archive()
    Published --> Draft : unpublish()

    Archived --> [*]
```

### C4 - Context Diagram

```mermaid
flowchart TB
    subgraph boundary[System Boundary]
        S[("📦 Order Management System\n\nManages customer orders\nand inventory")]
    end

    C[("👤 Customer\n\nPlaces and tracks orders")]
    A[("👤 Admin\n\nManages products\nand orders")]
    P[("💳 Payment Gateway\n\nProcesses payments")]
    E[("📧 Email Service\n\nSends notifications")]
    W[("🚚 Warehouse\n\nFulfills orders")]

    C -->|"Browse, Order, Track"| S
    A -->|"Manage"| S
    S -->|"Process payment"| P
    S -->|"Send emails"| E
    S -->|"Ship orders"| W
```

### C4 - Container Diagram

```mermaid
flowchart TB
    subgraph boundary[Order Management System]
        WA[("🌐 Web App\nReact SPA")]
        API[("⚙️ API\nPHP/Symfony")]
        WRK[("⚡ Worker\nPHP")]
        DB[("🗄️ Database\nPostgreSQL")]
        CACHE[("💾 Cache\nRedis")]
        Q[("📬 Queue\nRabbitMQ")]
    end

    C[("👤 Customer")]
    P[("💳 Payment")]
    E[("📧 Email")]

    C -->|"HTTPS"| WA
    WA -->|"REST/JSON"| API
    API -->|"SQL"| DB
    API -->|"Cache"| CACHE
    API -->|"Publish"| Q
    WRK -->|"Consume"| Q
    WRK -->|"SQL"| DB
    API -->|"HTTPS"| P
    WRK -->|"SMTP"| E
```

### CQRS Flow

```mermaid
flowchart LR
    subgraph commands[Write Side]
        CMD[Command] --> CH[Handler]
        CH --> AG[Aggregate]
        AG --> ES[Event Store]
    end

    subgraph events[Event Bus]
        ES --> EB[Event Bus]
    end

    subgraph queries[Read Side]
        EB --> PR[Projector]
        PR --> RM[Read Model]
        Q[Query] --> QH[Handler]
        QH --> RM
    end
```

## Node Shapes Reference

```mermaid
flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D([Stadium])
    D --> E[(Database)]
    E --> F((Circle))
    F --> G>Asymmetric]
    G --> H{{Hexagon}}
```

## Arrow Reference

```mermaid
flowchart LR
    A1 --> B1
    A2 --- B2
    A3 -.-> B3
    A4 ==> B4
    A5 --o B5
    A6 --x B6
    A7 <--> B7
    A8 -->|label| B8
```

## Styling

```mermaid
flowchart LR
    A[Start]:::green --> B[Process]:::blue --> C[End]:::red

    classDef green fill:#9f6,stroke:#333,stroke-width:2px
    classDef blue fill:#69f,stroke:#333,stroke-width:2px
    classDef red fill:#f66,stroke:#333,stroke-width:2px
```

## Generation Instructions

When generating Mermaid diagrams:

1. **Choose appropriate type** based on what you're showing
2. **Limit to 7±2 elements** per diagram
3. **Use descriptive labels** (not A, B, C)
4. **Add subgraphs** for grouping
5. **Show direction** of flow/dependencies
6. **Include legend** if using custom styles
7. **Test rendering** before finalizing

Related Skills

beautiful-mermaid

16
from diegosouzapw/awesome-omni-skill

Render Mermaid diagrams as pure ASCII text (default) or themed SVGs using the beautiful-mermaid renderer. Use when the user asks for a Mermaid diagram (flowchart, sequence, class, state, or ER), wants a diagram file generated, or needs terminal-friendly ASCII output.

beautiful-mermaid-renderer

16
from diegosouzapw/awesome-omni-skill

Render Mermaid diagrams using beautiful-mermaid as Unicode/ASCII (terminal/chat) or SVG (rich UI). Use when you need a quick, good-looking diagram preview in plain text or want to generate an SVG from Mermaid source (Bun preferred).

beautiful-mermaid-diagrams

16
from diegosouzapw/awesome-omni-skill

Create beautiful diagrams using Mermaid syntax including flowcharts, sequence diagrams, class diagrams, ER diagrams, and state diagrams. Use when users ask to diagram, visualize, model, map out, or show the flow of systems, processes, architectures, or interactions.

aidf-task-templates

16
from diegosouzapw/awesome-omni-skill

Task template definitions for AIDF. Provides structured templates for component, refactor, test, docs, architecture, and bugfix task types.

template-skill

16
from diegosouzapw/awesome-omni-skill

Replace with description of the skill and when Claude should use it.

obsidian-clipper-template-creator

16
from diegosouzapw/awesome-omni-skill

Guide for creating templates for the Obsidian Web Clipper. Use when you want to create a new clipping template, understand available variables, or format clipped content.

railway-templates

16
from diegosouzapw/awesome-omni-skill

Search and deploy services from Railway's template marketplace. Use when user wants to add a service from a template, find templates for a specific use case, or deploy tools like Ghost, Strapi, n8n, Minio, Uptime Kuma, etc. For databases (Postgres, Redis, MySQL, MongoDB), prefer the railway-database skill.

mermaid-diagrams

16
from diegosouzapw/awesome-omni-skill

Mermaid diagram creation for flowcharts, sequences, ERDs, and more. Generate diagrams from text in markdown files. Use for documentation, architecture diagrams, and visual representations. Triggers on mermaid, flowchart, sequence diagram, ERD, entity relationship, gantt chart, pie chart, class diagram, state diagram, journey map.

mermaid-diagram-generator

16
from diegosouzapw/awesome-omni-skill

Creates Mermaid diagrams for flowcharts, sequence diagrams, ERDs, and architecture visualizations in markdown. Use when users request "Mermaid diagram", "flowchart", "sequence diagram", "ERD diagram", or "architecture diagram".

ln-751-command-templates

16
from diegosouzapw/awesome-omni-skill

Generates individual .claude/commands files from templates

fastapi-templates

16
from diegosouzapw/awesome-omni-skill

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

agent-card-templates

16
from diegosouzapw/awesome-omni-skill

A2A agent card JSON templates with schema validation and examples for different agent types. Use when creating agent cards, implementing A2A protocol discovery, setting up agent metadata, configuring authentication schemes, defining agent capabilities, or when user mentions agent card, agent discovery, A2A metadata, service endpoint configuration, or agent authentication setup.