New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Mermaid

by bex-co in bex-co/beancount-io

Create concise, syntax-verified Mermaid architecture diagrams.

MITAuto-check passedDevelopment

Install Mermaid

skills CLI
$ npx skills add bex-co/beancount-io --skill mermaid -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install bex-co/beancount-io mermaid --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/bex-co/beancount-io.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/mermaid .claude/skills/mermaid && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mermaid
GitHub stars
296
Token cost
~785 tokens
SKILL.md length
407 words
Files
1
Skills in repo
27
Repo updated
First seen
Licence
MIT

At a glance

Create concise, syntax-verified Mermaid architecture diagrams.

  • Works in 3 steps: Write the diagram body (no mermaid… → Run: npx -y… → On failure, read the parse error, fix…
  • The user asks to diagram a repository component
  • SKILL.md covers Conventions, Verify (mandatory, before… and Output
  • Calls npx

What it does

Mermaid is an agent skill from bex-co/beancount-io. Create concise, syntax-verified Mermaid architecture diagrams. Use when the user asks to diagram a repository component, document, system, dependency flow, or supplied description in Mermaid.

Its SKILL.md is about 790 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: 💰 Double-entry bookkeeping made easy — plain-text accounting for humans and AI agents. Polished iOS & Android app built with React Native + Expo. The licence is MIT.

When your agent uses it

  • The user asks to diagram a repository component
  • Dependency flow
  • Supplied description in Mermaid

Example prompts

  • “/mermaid”

Requirements

  • Node.js
  • Docker
  • Pre-approved tools (allowed-tools): Bash(npx -y @mermaid-js/mermaid-cli@11.16.0:*), Write, Read

Workflow steps

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

  1. Write the diagram body (no mermaid fence) to a unique .mmd file under a gitignored scratch directory — .agents/tmp/ at the repository…
  2. Run: npx -y @mermaid-js/mermaid-cli@11.16.0 -i .mmd -o .svg — exit 0 means the syntax is valid. (First run downloads a headless browser…
  3. On failure, read the parse error, fix the diagram, and re-verify. Never output a diagram that hasn't passed.

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash(npx -y @mermaid-js/mermaid-cli@11.16.0:*)
    • Write
    • Read

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    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 loads about 785 tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 407 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~50
When it runs · the whole SKILL.md, loaded when a task matches
~785

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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 bex-co/beancount-io at commit 2e520db, republished under its MIT licence (© bex-co). 407 words, ~785 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid/SKILL.md (or your agent's skills folder).
name
mermaid
description
Create concise, syntax-verified Mermaid architecture diagrams. Use when the user asks to diagram a repository component, document, system, dependency flow, or supplied description in Mermaid.
allowed-tools
Bash(npx -y @mermaid-js/mermaid-cli@11.16.0:*), Write, Read

Draw a mermaid architecture diagram in markdown for: $ARGUMENTS

Conventions

  • Boxes are services/components: svc[bex-api]. Use [(...)] for datastores. Humans (user, developer, operator) are triangles: user@{ shape: tri, label: "user" }.
  • A box that is not a long-running service must say so in its label — readers assume boxes are services and ask "where is this running?". Mark scheduled/ephemeral work (cron["backup pod (spawned nightly, exits when done)"]) and inert config objects (secret["Secret foo (k8s object, created once)"]). Draw humans as triangles: operator@{ shape: tri, label: "operator" }. Never draw a manual procedure as a peer box of running infrastructure: give runbook/recovery flows their own subgraph whose title says it's manual and where it runs (subgraph "disaster recovery — manual runbook, any docker host"), with the human actor inside.
  • Arrows are dependency direction: A --> B means A depends on (calls, reads, deploys to) B — never the reverse.
  • Concise but to the point: only load-bearing services and edges. No styling, no colors, no legend. Label an edge (A -->|gRPC| B) only when the relationship isn't obvious. Default to flowchart TB; use LR only if the graph is much wider than deep. Use subgraph only for real boundaries (cluster, node, network, trust zone, automated vs. manual) — subgraphs are how the diagram answers "where does this run?". An edge may target a whole subgraph by id (subgraph cluster["app cluster"] … op --> cluster).
  • If $ARGUMENTS refers to this repo, read the relevant docs/code first — start with the root AGENTS.md for the package map, the scoped <package>/AGENTS.md for the package's architecture, and docs/adrs/ for recorded decisions. Don't diagram from guesswork.

Syntax gotchas that break rendering: quote labels containing (, ), [, {, or -->-like text (a["Queue (SQS)"]); never name a node bare end or graph; subgraph titles with spaces need quotes.

Show full SKILL.md (123 more words)Show less

Verify (mandatory, before answering)

  1. Write the diagram body (no ```mermaid fence) to a unique .mmd file under a gitignored scratch directory — .agents/tmp/ at the repository root, or the current package's tmp/.
  2. Run: npx -y @mermaid-js/mermaid-cli@11.16.0 -i <file>.mmd -o <file>.svg — exit 0 means the syntax is valid. (First run downloads a headless browser; that's expected.) The version is pinned deliberately (supply-chain: codex-security #17) — bump it consciously, don't revert to floating.
  3. On failure, read the parse error, fix the diagram, and re-verify. Never output a diagram that hasn't passed.

Output

A single ```mermaid fenced block, followed by a short explanation of the key dependency flow. If the user asked to put the diagram into a file, insert the verified block there instead.

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

Files

Just SKILL.md in .agents/skills/mermaid of bex-co/beancount-io.

Open the folder on GitHubat commit 2e520db

Compare with similar skills

Mermaid next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mermaid compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mermaid this skillbex-co/beancount-io296—~785Automated safety check: PassMIT
Archify Diagramstt-a1i/archify81k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design48k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    81k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    48k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 7 days ago
    DevelopmentAuto-check: notes

  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from bex-co/beancount-io

All 27 skills in this repo

  • Beancount Close

    bex-co/beancount-io

    Close an accounting period in a Beancount ledger by reconciling each active account through beancount-reconcile, checking assertions and recurring gaps, reviewing flags, then proposing a commit with…

    296 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Beancount Import

    bex-co/beancount-io

    Import a bank or card CSV, OFX/QFX, or QIF export into an existing Beancount ledger.

    296 GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Beancount Importer Author

    bex-co/beancount-io

    Write or repair a reusable Beangulp importer from a sample bank export, with reviewed golden files and a passing test harness.

    296 GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Beancount Init

    bex-co/beancount-io

    Scaffold a new Beancount ledger with bea init and validation, with optional Fava browser setup when requested.

    296 GitHub stars~1.2k tokensUpdated today
    Auto-check: notes

  • Beancount Options

    bex-co/beancount-io

    Record a described options trade or lifecycle event as validated Beancount transactions through bea, after review and confirmation.

    296 GitHub stars~3.7k tokensUpdated today
    Auto-check passed

  • Beancount Reconcile

    bex-co/beancount-io

    Reconcile one Beancount account against a CSV statement or pasted PDF text.

    296 GitHub stars~4.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Mermaid

What does Mermaid do?

Create concise, syntax-verified Mermaid architecture diagrams. Mermaid is an agent skill from bex-co/beancount-io. Create concise, syntax-verified Mermaid architecture diagrams.

When should I use Mermaid?

Mermaid fits situations like: the user asks to diagram a repository component; dependency flow; supplied description in Mermaid.

How do I install Mermaid in Claude Code?

Run `npx skills add bex-co/beancount-io --skill mermaid -a claude-code`. Or copy the skill folder (.agents/skills/mermaid in bex-co/beancount-io) into .claude/skills/mermaid in your project. Claude Code loads it when a task matches its description.

How do I install Mermaid in Codex?

Run `npx skills add bex-co/beancount-io --skill mermaid -a codex`. Or copy the skill folder (.agents/skills/mermaid in bex-co/beancount-io) into .agents/skills/mermaid in your project. Codex loads it when a task matches its description.

Can I use Mermaid in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bex-co/beancount-io --skill mermaid -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mermaid, .gemini/skills/mermaid, .github/skills/mermaid and .opencode/skills/mermaid in your project.

What does Mermaid need to run?

Going by SKILL.md and its folder, Mermaid needs the command-line tools its instructions call (npx). Our summary lists: Node.js; Docker. Its frontmatter pre-approves these tools: Bash(npx -y @mermaid-js/mermaid-cli@11.16.0:*), Write, Read.

Does Mermaid access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Mermaid safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Mermaid use?

Mermaid is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mermaid use?

About 785 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mermaid?

Skills that share tags, products or a category with Mermaid: Archify Diagrams (tt-a1i/archify, 81k stars), Diagram Design (cathrynlavery/diagram-design, 48k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mermaid?

bex-co (a GitHub organization) maintains it in bex-co/beancount-io, which has 296 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on October 10, 2026.

Source: bex-co/beancount-io on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.