mermaid-expert
Verifiedby sickn33 · Updated Apr 16, 2026
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling.
See It In Action
Let me explore the codebase first to understand the project context, then create the diagrams.
Now I have the full picture. Let me create the diagrams.
All four diagrams plus the export guide are ready in diagrams/.
What's in there
| File | What it is |
|---|---|
01-funnel-basic.mmd | Signup-to-paid funnel flowchart -- clean, no styling. All 9 stages with decision diamonds and conversion rates (19% signup through 80% payment). |
02-funnel-styled.mmd | Same funnel, executive-ready. Indigo theme, 4 color-coded subgraphs (Acquisition/Activation/Monetization/Retention), legend, and absolute metrics alongside rates. |
03-api-sequence-basic.mmd | Trial-upgrade API sequence -- all 6 participants (Browser, API Gateway, Auth, Billing, Stripe, Notifications), 7 steps, plus alt blocks for card decline / webhook failure / session expiry. |
04-api-sequence-styled.mmd | Same sequence, executive-ready. Themed actors, rect phase groupings with colored backgrounds, activation bars on services, critical block for error handling, and callout notes (PCI compliance, grace period). |
EXPORT-GUIDE.md | How to render and export for slides. |
Rendering for today's review
Fastest path: Paste any .mmd file into mermaid.live -- export as SVG (best quality) or PNG at 1920px width for slides.
Batch CLI: npx mmdc -i diagrams/02-funnel-styled.mmd -o exports/02-funnel-styled.svg
Which to present: Styled versions (02, 04) for the exec audience. Basic versions (01, 03) for the engineering handoff doc. The styled diagrams need Mermaid 10+ for full theme support; mermaid.live handles this natively.
SKILL.md
Use this skill when
- Working on mermaid expert tasks or workflows
- Needing guidance, best practices, or checklists for mermaid expert
Do not use this skill when
- The task is unrelated to mermaid expert
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open
resources/implementation-playbook.md.
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
- Choose the right diagram type for the data
- Keep diagrams readable - avoid overcrowding
- Use consistent styling and colors
- Add meaningful labels and descriptions
- 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.
FAQ
What does mermaid-expert do?
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling.
When should I use mermaid-expert?
Use it when you need a repeatable workflow that produces downloadable file, text report.
What does mermaid-expert output?
In the evaluated run it produced downloadable file, text report.
How do I install or invoke mermaid-expert?
Ask the agent to use this skill when the task matches its documented workflow.
Which agents does mermaid-expert support?
Agent support is inferred from the source, but not explicitly declared.
What tools, channels, or permissions does mermaid-expert need?
It uses no extra tools; channels commonly include file, text; permissions include no explicit permission scopes.
Is mermaid-expert safe to install?
Static analysis marked this skill as low risk; review side effects and permissions before enabling it.
How is mermaid-expert different from an MCP or plugin?
A skill packages instructions and workflow conventions; tools, MCP servers, and plugins are dependencies the skill may call during execution.
Does mermaid-expert outperform not using a skill?
About mermaid-expert
When to use mermaid-expert
You need Mermaid syntax for flowcharts, sequence diagrams, ERDs, or state diagrams. You want styled and readable diagrams for documentation or architecture discussions. You need guidance on choosing the right Mermaid diagram type and formatting it clearly.
When mermaid-expert is not the right choice
You need rendered graphics produced by an external diagramming service or browser automation. The task is unrelated to Mermaid diagrams or visual documentation.
What it produces
Produces downloadable file and text report.