From pm-skills
Guides creation of syntactically valid Mermaid diagrams for product docs like PRDs, specs, roadmaps, and presentations. Covers type selection for communication needs and syntax rules across 15 types.
npx claudepluginhub product-on-purpose/pm-skillsThis skill uses the workspace's default tool permissions.
<!-- PM-Skills | https://github.com/product-on-purpose/pm-skills | Apache 2.0 -->
Creates Mermaid diagrams including flowcharts, sequence diagrams, ERDs, state machines, Gantt charts, and architecture views for technical documentation.
Generates Mermaid diagrams from codebases, topics, files, conversations, or specs. Supports flowcharts, sequence, class, state, ER, C4, mindmaps, Gantt, timelines, gitGraphs, and more for system visualization.
Generates Mermaid diagrams for flowcharts, sequences, ERDs, architectures, Gantt charts, and more. Provides syntax mastery, styling, and best practices for visual documentation, system diagrams, process flows.
Share bugs, ideas, or general feedback.
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 |