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.
/plugin marketplace add wshobson/agents
/plugin install documentation-generation@claude-code-workflowsWhat 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-workflows2Manually: put the files in place
.claude/agents/mermaid-expert.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.codex/agents/mermaid-expert.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.cursor/agents/mermaid-expert.mdCursor also reads .claude/agents/
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