Mermaid Diagrams

What it does

When your agent uses it

• Documenting a service's request flow as a sequence diagram
• Sketching a database schema as an ER diagram
• Drawing C4 architecture views of a system
• Showing a branching strategy as a git graph

Example prompts

• “Draw a sequence diagram of the login flow between the browser, API and auth service.”
• “Create an ER diagram for users, orders and line items in Mermaid.”
• “Show our release branching strategy as a Mermaid git graph.”

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

1. 1Class Diagrams - Domain modeling, OOP design, entity relationships
2. 2Sequence Diagrams - Temporal interactions, message flows
3. 3Flowcharts - Processes, algorithms, decision trees
4. 4Entity Relationship Diagrams (ERD) - Database schemas
5. 5C4 Diagrams - Software architecture at multiple levels
6. 6State Diagrams - State machines, lifecycle states
7. 7Git Graphs - Version control branching strategies
8. 8Gantt Charts - Project timelines, scheduling
9. 9Pie/Bar Charts - Data visualization

What it can do on your machine

Read from SKILL.md and the folder at commit 28dc323. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npm
  • docker

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • mermaid.live

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mermaid Diagrams loads about 1.9k tokens when it runs, and up to ~19k if it reads all its reference files. Until then it costs about 180 tokens; SKILL.md has 536 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~180

When it runs · the whole SKILL.md, loaded when a task matches

~1.9k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~19k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jjmartres/opencode at commit 28dc323, republished under its MIT licence (© jjmartres). 536 words, ~1,866 tokens.

name

mermaid-diagrams

description

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure.

diagramType
  definition content

classDiagram
    Title -- Genre
    Title *-- Season
    Title *-- Review
    User --> Review : creates

    class Title {
        +string name
        +int releaseYear
        +play()
    }

    class Genre {
        +string name
        +getTopTitles()
    }

sequenceDiagram
    participant User
    participant API
    participant Database

    User->>API: POST /login
    API->>Database: Query credentials
    Database-->>API: Return user data
    alt Valid credentials
        API-->>User: 200 OK + JWT token
    else Invalid credentials
        API-->>User: 401 Unauthorized
    end

flowchart TD
    Start([User visits site]) --> Auth{Authenticated?}
    Auth -->|No| Login[Show login page]
    Auth -->|Yes| Dashboard[Show dashboard]
    Login --> Creds[Enter credentials]
    Creds --> Validate{Valid?}
    Validate -->|Yes| Dashboard
    Validate -->|No| Error[Show error]
    Error --> Login

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : includes

    USER {
        int id PK
        string email UK
        string name
        datetime created_at
    }

    ORDER {
        int id PK
        int user_id FK
        decimal total
        datetime created_at
    }

---
config:
  theme: base
  themeVariables:
    primaryColor: "#ff6b6b"
---
flowchart LR
    A --> B

© jjmartres, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in opencode/skills/mermaid-diagrams of jjmartres/opencode.

• SKILL.md
• references/advanced-features.md
• references/architecture-diagrams.md
• references/c4-diagrams.md
• references/class-diagrams.md
• references/erd-diagrams.md
• references/flowcharts.md
• references/sequence-diagrams.md

Open the folder on GitHubat commit 28dc323

Used in 6 other repositories

We found 6 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 6 other GitHub owners. This page covers the copy in jjmartres/opencode, which our catalogue first saw on October 7, 2026.

• shep-ai/shep.claude/skills/mermaid-diagrams
• pedronauck/skillsskills/curated/mermaid-diagrams
• davila7/claude-code-templatescli-tool/components/skills/creative-design/mermaid-diagrams
• aiskillstore/marketplaceskills/softaworks/mermaid-diagrams
• softaworks/agent-toolkitskills/mermaid-diagrams
• compozy/compozy.agents/skills/mermaid-diagrams