PlaygroundCatalog › Sequence Diagram
SD

Sequence Diagram

🔵 Stable🕐 updated 2026-06-29 🔷 SkillSpec L3 pm-visuals

Diagram an interaction as a sequence of messages between participants over time. Use when asked to show an API flow, request/response, auth handshake, integration, or 'what calls what in what order'. Produces a ready-to-render Mermaid sequence diagram (renders live, exportable as PNG/SVG) plus notes on edge cases and failure paths.

▶ Run it free — no key needed 📝 Grade your existing draft View SKILL.md ↗

What to give it

The participants — the actors/services/systems involved (client, API, DB, third party…).
The messages — what each one sends to the next, in order; what comes back.
Sync vs async — which calls block on a response vs fire-and-forget.
Edge cases — the failure, timeout, or alternative path worth showing.

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

Participants are declared and ordered to match the real call flow
Requests and responses are distinguished (solid vs dashed arrows)
At least one failure/edge path is shown or noted (not just the happy path)
Sync vs async messages are visually distinct
The Mermaid block renders without edits

⚠️ What it refuses to do

Do not show only the happy path when a failure path matters — note the 401/timeout/retry
Do not blur requests and returns — use `->>` vs `-->>`
Do not reorder messages for neatness — sequence order is the whole point
Do not put colons inside message text — it breaks parsing
Do not invent participants — model only the systems actually involved

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y pm-claude-skills-mcp

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="sequence-diagram"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Sequence Diagram is one of 750 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog