Utility Mermaid Diagrams
Teaches PMs to create syntactically valid mermaid diagrams by selecting the right...
Install
npx skills add product-on-purpose/pm-skills --skill utility-mermaid-diagrams -g -a claude-code -y- Repository
- product-on-purpose/pm-skills780
- Category
- Engineering
- Updated
- 5d ago
- License
- Apache-2.0
- Context cost
- Lightabout 1,493 tokens
- Runs scripts
- No, instructions only
What it does
Teaches PMs to create syntactically valid mermaid diagrams by selecting the right diagram type for their communication need, following syntax validity rules, and validating before shipping. Covers all 15 mermaid diagram types with PM-relevant examples and a dual-lens navigation system.
Mermaid Diagrams
Create effective, syntactically valid mermaid diagrams for product documents.
When to Use
- Creating mermaid diagrams for PRDs, specs, roadmaps, or stakeholder presentations
- Choosing which of 15 diagram types fits a specific communication need
- Debugging mermaid code that won't render or renders incorrectly
- Reviewing diagrams for clarity, accuracy, and accessibility
When NOT to Use
- Exporting diagrams to image files (PNG/SVG) - that's a rendering tool concern
- Using non-mermaid diagramming tools (Figma, Lucidchart, draw.io)
- Creating purely decorative visuals with no informational purpose
- Producing a full customer-journey artifact (stages, touchpoints, emotional curve, pain points) rather than a standalone diagram - use
discover-journey-map, which composes this skill for its timeline or flowchart section
The Cardinal Rule
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?
- Yes → proceed with a diagram
- No → use a numbered list, bullet list, or table instead
A 5-step linear process is a list. A 5-step process with two decision points and a retry loop is a diagram.
