From pm-skills
Guides creating syntactically valid mermaid diagrams for product docs, with a selection guide for 15 diagram types and syntax rules.
How this skill is triggered — by the user, by Claude, or both
Slash command
/pm-skills:utility-mermaid-diagramsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<!-- PM-Skills | https://github.com/product-on-purpose/pm-skills | Apache 2.0 -->
Create effective, syntactically valid mermaid diagrams for product documents.
Don't diagram what a list can say.
Diagrams earn their place when they reveal relationships, branching, or flow that prose flattens. Before creating any diagram, ask:
Does this show branching, relationships, or flow that a list or table would flatten?
A 5-step linear process is a list. A 5-step process with two decision points and a retry loop is a diagram.
| I need to show... | Use | Also consider |
|---|---|---|
| A decision or approval process | Flowchart | State |
| Multi-service or multi-party interactions | Sequence | Flowchart |
| Feature lifecycle or status transitions | State | Flowchart |
| Work stages or pipeline status | Kanban | State |
| Release or sprint timeline with dependencies | Gantt | Timeline |
| Version history or chronological milestones | Timeline | Gantt |
| 2D prioritization (effort/impact, risk/value) | Quadrant | - |
| Allocation breakdown or composition | Pie | Treemap |
| Problem decomposition or brainstorming | Mindmap | - |
| Domain models or data relationships | ER | Class |
| API or object contracts | Class | ER |
| System topology or infrastructure | Architecture | Flowchart |
| Flow quantities or budget allocation | Sankey | Pie |
| Hierarchical proportional data | Treemap | Pie |
| Trends or time-series metrics | XY-Chart | - |
For worked examples organized by PM task, see references/pm-use-cases.md.
For full syntax and options per type, see references/diagram-catalog.md.
Six rules that prevent most rendering failures:
>, <, - at line start, #) need escaping or quotingreferences/diagram-catalog.md for per-type limits)%% comments to document non-obvious choices (why this layout direction, why this grouping)For the complete syntax reference, see references/syntax-guide.md.
references/pm-use-cases.md by task, or browse references/diagram-catalog.md by typereferences/TEMPLATE.md: purpose, audience, node inventory, type rationalereferences/syntax-guide.md rules; start with the minimal syntax example from references/diagram-catalog.md and expandreferences/TEMPLATE.md)%% comments document any non-obvious layout or grouping choices| File | Purpose |
|---|---|
references/TEMPLATE.md | Diagram planning worksheet - fill out before writing mermaid code |
references/EXAMPLE.md | Worked example: PM creating 4 diagrams for a product launch |
references/diagram-catalog.md | All 15 diagram types: syntax, PM examples, limits, pitfalls |
references/pm-use-cases.md | PM task → diagram type mapping with mini worked examples |
references/syntax-guide.md | Complete syntax validity rules, escaping, styling, and validation checklist |
npx claudepluginhub product-on-purpose/pm-skills --plugin pm-skillsReferences Mermaid syntax for all diagram types including flowcharts, sequences, classes, states, ER, gantt, git graphs, mindmaps, timelines, pie charts, quadrant, XY, sankey, C4, and kanban. Use to construct or debug Mermaid diagrams.
Creates Mermaid diagrams for flowcharts, sequences, ERDs, architectures, Gantt charts, and more. Masters syntax for all types with styling, best practices, and rendering guidance.
Guides selection of diagram types (sequence, C4, ER, flowchart, etc.) and tools (Mermaid vs PlantUML) based on purpose like architecture, workflows, data. Use for visualization decisions.