Utility Mermaid Diagrams

This teaches you to pick the right mermaid diagram type for what you're actually trying to communicate, then write syntactically valid code that renders on the first try. Covers all 15 diagram types with a selection guide organized by PM tasks like showing decision flows, system interactions, or feature lifecycles. The cardinal rule is solid: don't diagram what a list can say. Diagrams earn their place when they show branching, relationships, or flow that prose would flatten. Includes syntax validity rules, a quality checklist, and worked examples. Most useful when you're tired of mermaid code failing silently or producing unreadable spaghetti because you picked flowchart when you needed sequence.

skills.sh installs: 786
GitHub stars: 794
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add product-on-purpose/pm-skills --skill utility-mermaid-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

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