Mermaid Diagrams

This one makes Claude proactively suggest Mermaid diagrams when you're explaining systems, APIs, database schemas, or workflows. It includes a decision tree for picking the right diagram type (flowchart vs sequence vs ER vs class), syntax quick references for nodes and edges, and real examples like API request flows and state machines. The diagrams render natively in GitHub, GitLab, VS Code, and Obsidian, which is handy if you're already documenting there. It's opinionated about best practices like using meaningful labels and keeping diagrams focused. Good for architecture discussions or design docs where a visual would clarify things faster than another wall of text.

skills.sh installs: 473
GitHub stars: 62
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ccheney/robust-skills --skill mermaid-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

Mermaid Diagrams

Turn the supplied process, code, schema, or relationships into the requested Mermaid diagram. The user's explicit instructions take precedence over this skill's guidelines, including their choice of output format.

Choose the representation

Establish the facts to show and the destination renderer. If the request leaves the format open and a text-based system/process diagram fits, Mermaid is a reasonable choice. Preserve an explicitly requested drawing tool or artifact format.

Question	Diagram
What happens next or which path is taken?	`flowchart`
Who calls whom, in what order?	`sequenceDiagram`
What tables and cardinalities exist?	`erDiagram`
What states and transitions exist?	`stateDiagram-v2`
How are types or services related?	`classDiagram` or flowchart with subgraphs
What is scheduled or measured?	A matching planning/data type from the references

Use supplied evidence for nodes, edges, cardinalities, dates, and values. Mark conceptual assumptions; ask for missing facts that determine the diagram rather than inventing a system.