Skill

Mermaid Diagrams

Create professional Mermaid diagrams with consistent theming, semantic colours, and layout rules.

// utility;

Behaviour

What it does

Picks the right diagram type for the content (flowchart, sequence, ER, state, C4, and more)
Applies themed init directives and semantic classDef colours, not default black lines
Keeps diagrams readable with sensible node counts and clear labels
Adds one-line captions when embedding in docs/technical/
Complements technical-documentation and refining-docs for polished visuals

When to use

Drawing architecture, process, or API flow diagrams for technical docs

Improving an existing Mermaid diagram that looks like a default export

When technical-documentation or refining-docs need a visual but not styling guidance

Any time a diagram should look professional in published documentation

Install

Uses Agent Kit via npx; no global install required.

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill mermaid-diagrams

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill mermaid-diagrams --global --agent cursor

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill mermaid-diagrams --global --agent claude

npx @levi-putna/agent-kit@latest add levi-putna/skills --skill mermaid-diagrams --project

npx @levi-putna/agent-kit@latest add levi-putna/skills

npx @levi-putna/agent-kit@latest remove mermaid-diagrams

Example

Mermaid Diagrams

Draw a sequence diagram for the checkout flow with proper styling and a caption.