Skip to main content
subagent CX Codex

mermaid-expert — Claude Code subagent: Mermaid diagrams from your code

A subagent that writes Mermaid diagrams: flowcharts, sequences, ERDs, architecture. Useful when docs or a README need a visual.

Install into Claude Code · Plugin marketplace All methods and platforms ↓
/plugin marketplace add wshobson/agents
/plugin install documentation-generation@claude-code-workflows
Open on GitHub

What mermaid-expert does

The subagent picks a diagram type that fits the data, keeps the result readable and adds labels. It works with the syntax of graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, gitGraph, journey, quadrantChart and timeline.

You get the diagram code, rendering instructions and a styled variant. The author asks for both versions, basic and styled, with comments on tricky syntax. The configured model is haiku.

In Claude it comes from the plugin marketplace; for Codex and Cursor you drop a file into the agents directory. If your project already has a diagram generator, this subagent will duplicate that work, so check what the team uses for schemas first.

What it helps with

  • turn a process description into a flowchart
  • draw a sequence diagram for an API
  • generate an ERD from database tables
  • document service architecture for a README
  • map a state machine or a user journey

Example prompts for the agent

  • Draw a sequence diagram for our auth API
  • Generate an ERD for the users, orders and payments tables
  • Build a flowchart of order processing and style it

How to install mermaid-expert

1Plugin marketplace

/plugin marketplace add wshobson/agents
/plugin install documentation-generation@claude-code-workflows

2Manually: put the files in place

.claude/agents/mermaid-expert.md

For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean

Questions about mermaid-expert

How do I install mermaid-expert in Claude?

Through the plugin marketplace: first /plugin marketplace add wshobson/agents, then /plugin install documentation-generation@claude-code-workflows. The agent file lands in .claude/agents/mermaid-expert.md.

What does mermaid-expert do?

It creates Mermaid diagrams: flowcharts, sequence diagrams, ERDs, state diagrams, Gantt charts and architecture schemas. Output includes the diagram code, rendering instructions and a styled version.

Which diagram types does it support?

graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, gitGraph, journey, quadrantChart and timeline.

Source text

mermaid-expert.md · MIT
---
name: mermaid-expert
description: Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
model: haiku
---

You are a Mermaid diagram expert specializing in clear, professional visualizations.

## Focus Areas

- Flowcharts and decision trees
- Sequence diagrams for APIs/interactions
- Entity Relationship Diagrams (ERD)
- State diagrams and user journeys
- Gantt charts for project timelines
- Architecture and network diagrams

## Diagram Types Expertise

```
graph (flowchart), sequenceDiagram, classDiagram,
stateDiagram-v2, erDiagram, gantt, pie,
gitGraph, journey, quadrantChart, timeline
```

## Approach

1. Choose the right diagram type for the data
2. Keep diagrams readable - avoid overcrowding
3. Use consistent styling and colors
4. Add meaningful labels and descriptions
5. Test rendering before delivery

## Output

- Complete Mermaid diagram code
- Rendering instructions/preview
- Alternative diagram options
- Styling customizations
- Accessibility considerations
- Export recommendations

Always provide both basic and styled versions. Include comments explaining complex syntax.

© Seth Hobson · MIT · wshobson/agents

Similar subagents

All subagents for Writing and docs →

From the same set371

The whole set →
frontend-security-coder A subagent for secure client-side code: stops XSS, wires up CSP, checks DOM handling. Useful when you write or review frontend code. CX Codex ★ 41,729repo stars frontend-mobile-development-mobile-developer A subagent for React Native, Flutter and native iOS/Android work: architecture, offline sync, build performance and store publishing. CX Codex ★ 41,729repo stars deps-upgrade Plans and runs incremental dependency upgrades: audits outdated packages, flags breaking changes and sketches a migration path. CX Codex ★ 41,729repo stars error-analysis A slash command that walks an error from stack trace to root cause. Useful when production breaks or a bug refuses to reproduce locally. CX Codex ★ 41,729repo stars smart-debug A slash command that reads error messages and stack traces, ranks hypotheses about the root cause, and proposes a fix. Useful when a bug only shows up sometimes. CX Codex ★ 41,729repo stars sql-migrations Turns a schema change into migration steps for PostgreSQL, MySQL and SQL Server, with rollback and data checks. Useful when the database is already live. CX Codex ★ 41,729repo stars database-cloud-optimization-database-optimizer A subagent that digs into slow queries, indexes and schema design. Useful when the database drags or needs to scale. CX Codex ★ 41,729repo stars data-pipeline A slash command for Claude, Claude and Cursor that walks through pipeline design, ingestion code, dbt models and data quality checks. CX Codex ★ 41,729repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor