SD
Sequence Diagram
🔵 Stable🕐 updated 2026-10-06
🔷 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
⬇ Add to Claude (works in Duet)
📱 Use as an app
View SKILL.md ↗
What changed
🗣 Say this to your agent
“Show this API flow as a diagram.”“Draw the auth handshake.”“What calls what in what order?”“Diagram this integration.”
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 -p pm-claude-skills pm-claude-skills-mcpRelated 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 1326 open-source professional AI agent skills — all SkillSpec L3.
Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog