mermaid-diagram

mermaid-diagram is a skill for Claude Code, Codex from shiwenwen/hope-agent. It costs 55 tokens per session (1,743 once invoked), scanned A, original, MIT.

A way to create flowcharts and other diagrams using Mermaid, a text format for describing diagrams. It supports visuals such as architecture, sequence, database-relationship, state-machine, and project-schedule diagrams.

In plain words
What is it for?
Use it to show step-by-step workflows, messages between systems, changes of state, database relationships, schedules, or hierarchies.
Why use it?
It lets you describe a diagram in text and have it rendered in the chat, without drawing each shape manually. The diagram type can match the relationship or process being explained.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to show step-by-step workflows, messages between systems, changes of state, database relationships, schedules, or hierarchies.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/shiwenwen/hope-agent/mermaid-diagram
About the project

Hope Agent is a cross-device personal AI assistant that remembers context, uses tools, and continues working toward goals through dynamically organized workflows. Individuals use it from desktop, web, server, or messaging environments to manage projects, knowledge, designs, and long-running tasks. The catalogue add-ons extend its agent workflows and capabilities.

shiwenwen/hope-agent · 1,597 stars · on GitHub

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add shiwenwen/hope-agent --skill mermaid-diagram
Clone the repo
git clone --depth 1 https://github.com/shiwenwen/hope-agent

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for mermaid-diagram

README.md
[![agentmods](https://agentmods.dev/badge/skills/shiwenwen/hope-agent/mermaid-diagram/github.svg)](https://agentmods.dev/skills/shiwenwen/hope-agent/mermaid-diagram)
Your own site
<a href="https://agentmods.dev/skills/shiwenwen/hope-agent/mermaid-diagram"><img src="https://agentmods.dev/badge/skills/shiwenwen/hope-agent/mermaid-diagram/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for mermaid-diagram

Your own site · 80×15
<a href="https://agentmods.dev/skills/shiwenwen/hope-agent/mermaid-diagram"><img src="https://agentmods.dev/badge/skills/shiwenwen/hope-agent/mermaid-diagram.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 55 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,743 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00055 $0.01743
Opus 5 $0.00028 $0.00872
Sonnet 5 $0.00011 $0.00349
Haiku 4.5 $0.00006 $0.00174

Measured 13d ago against content hash 718f91e70f14, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

mermaid-diagram scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/mermaid-diagram/SKILL.md · 204 lines

How it starts

The opening of the file, as written. The whole thing — 204 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Mermaid Diagram

When to Use

Trigger phrases: "draw a diagram", "flowchart for …", "sequence diagram", "architecture diagram", "ER diagram", "state machine", "gantt chart", "画一个流程图", "画个架构图".

Mermaid is rendered natively in Hope Agent chat (via Streamdown). Just emit a fenced ```mermaid block — the user sees the rendered SVG, no setup.

For diagrams Mermaid can't express (organic shapes, custom illustrations, hand-drawn style) consider drawing-tool skills (e.g. excalidraw from Hermes Agent or drawio from Anthropic marketplace) — those need to be installed via Quick Import.

Pick the Right Diagram Type

Intent Mermaid type Use when
Step-by-step process flowchart Decisions, branching, "if X then Y"
Time-ordered messages between actors sequenceDiagram API call traces, distributed protocols
State transitions of a single entity stateDiagram-v2 UI state machines, workflow engines
Data model relationships erDiagram Database schema, entity relationships
Project schedule / timeline gantt Roadmaps, sprints
Pie / distribution pie Quick share-of-X visualization
Tree hierarchy (org chart, decomposition) flowchart TD with subgraphs Org / breakdown trees
Class hierarchy with methods classDiagram OO design, type relationships
User journey (steps + sentiment) journey UX flows

If unsure, default to flowchart. It's the most flexible.

Templates

Flowchart (top-down)

flowchart TD
    Start([Start]) --> Decision{Condition?}
    Decision -->|Yes| ActionA[Do A]
    Decision -->|No| ActionB[Do B]
    ActionA --> End([End])
    ActionB --> End

Sequence Diagram

sequenceDiagram
    participant U as User
    participant W as Web Server
    participant DB as Database

    U->>W: HTTP GET /api/items
    W->>DB: SELECT * FROM items
    DB-->>W: rows
    W-->>U: JSON response

    Note over U,DB: Round trip < 50ms

Read the full file on GitHub · 204 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 13d ago First seen · 204 lines · 55 tokens per session scan A 718f91e70f14

Subscribe to this mod's changes

mermaid-diagram is a skill published in the GitHub repository shiwenwen/hope-agent (1,597 stars, last pushed 3d ago), licensed MIT. It adds 55 tokens to every session and 1,743 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

skin-creator

Create and apply a two-asset LobsterAI visual skin from the user's style description. Use only when the AI Skin Designer kit supplies the structured skinpack workflow marker; do not use for ordinary theme or image requests.

netease-youdao/LobsterAI · 48 tokens

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

netease-youdao/LobsterAI · 59 tokens

genui

Render structured, glanceable, interactive UI in the chat instead of plain text — dashboards, stat cards, filterable tables, charts, mermaid diagrams, choice panels, forms, quizzes. Panels can carry an id so later turns update them in place, and most interaction resolves in the browser with no round-trip. Read this…

open-octo/octo-agent · 98 tokens

artifact-design

Design guidance for any HTML/Markdown file shown in octo's Artifacts panel — reports, dashboards, architecture/system diagrams, generated UIs, slide-style pages, 3D scenes. Read this BEFORE writing the file, not after — it calibrates how much design effort the request warrants and covers the panel's real constraints…

open-octo/octo-agent · 195 tokens

memory

Use this skill when Pioneer should proactively use durable memory or recalled context: decide whether memory can improve a turn, answer from remembered user/project facts, request memory tools, search/list/get stored memories, save durable preferences or project decisions, forget memories, audit or clean up memory, or…

pioneerdotai/pioneer · 64 tokens

subagents

Use this skill when Pioneer should delegate current-turn work to attached task-backed subagents, coordinate parallel child agents, wait for child results, review/revise/accept/cancel/detach attached work, or synthesize accepted child results into the parent answer.

pioneerdotai/pioneer · 54 tokens