wbd-sequence-diagrams

Teaches learners to draw sequence diagrams showing interactions over time across actors and components.

2|Updated Jun 1, 2026
One-click install
npx skills add https://github.com/jay-steenbergen/MSSAMentorAgent --skill wbd-sequence-diagrams-jay-steenbergen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wbd-sequence-diagrams
Source: https://github.com/jay-steenbergen/MSSAMentorAgent/tree/main/.github/skills/tracks/whiteboarding/wbd-sequence-diagrams
Command: npx skills add https://github.com/jay-steenbergen/MSSAMentorAgent --skill wbd-sequence-diagrams-jay-steenbergen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Engineers often struggle to explain what happens over time in a system, reaching for architecture diagrams when the question is really about order of operations, timing, or async coordination. This Skill trains learners to draw sequence diagrams that answer "what happens when a user does X" clearly and quickly. ## Core Features & Use Cases - Anatomy drills: Covers lifelines, messages, synchronous vs asynchronous arrows, dashed returns, activation bars, and self-messages. - Three guided scenarios: Walks through drawing a user login flow, an event-driven place-order flow with a sync/async fence, and a failure path with retry and exponential backoff. - Diagram selection discipline: Provides a decision tree for choosing between sequence, architecture, state, ER, and flowchart diagrams based on the question being asked. - Use Case: A learner preparing for a system design discussion needs to explain how an order flows through an event-driven system, including what happens when payment fails, and uses this project to practice drawing that flow in under 5 minutes. ## Quick Start Ask the mentor to start the whiteboarding sequence diagrams project and walk you through drawing a login flow sequence diagram.

Frequently Asked Questions about wbd-sequence-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I draw a sequence diagram for a user login flow?

Place actors left to right starting with the initiator (USER, BROWSER, API, DB), draw vertical lifelines, then add horizontal labeled arrows for each message in time order. Use dashed arrows for returns like the token response and a self-message on the API lifeline for password hash verification.

What is the difference between synchronous and asynchronous arrows in sequence diagrams?

Synchronous calls use a solid arrow with a filled head, while asynchronous events use an open arrowhead or dashed line. Returns are always dashed. This visual distinction lets readers tell call-and-response from fire-and-forget messaging.

When should I use a sequence diagram instead of an architecture diagram?

Use a sequence diagram when the question is about what happens in what order, timing, or async coordination, such as walking through a request flow. Use an architecture diagram when the question is about what components exist and how they connect.

Should I always draw activation bars on sequence diagrams?

No, activation bars are optional. Most engineers skip them on whiteboards. Use them when timing or concurrency is the topic of discussion, since they show when a component is actively processing.

How do I show a failure path with retries in a sequence diagram?

Draw the failure path on a separate diagram or in a different color from the happy path. Show each retry as a repeated call with self-messages labeled with wait durations, and include the compensating action such as a PaymentFailed event after retries exhaust.