mermaid-sequence-diagrams
npx machina-cli add skill msewell/agent-stuff/mermaid-sequence-diagrams --openclawMermaid Sequence Diagrams
Generate, review, and fix Mermaid sequence diagrams that are syntactically correct, visually clear, and follow established best practices.
Generating a New Diagram
- Identify participants. List every system, service, or actor involved. Assign short IDs with descriptive aliases:
participant OMS as Order Management Service. - Use
actorfor human users (renders stick figure),participantfor services,databasefor data stores,queuefor message brokers. - Determine the flow type:
- Synchronous request/response →
->>/-->>arrows. - Async fire-and-forget →
-)/--)arrows. - Failed/rejected →
-x/--xarrows. - Bidirectional (v11+) →
<<->>/<<-->>arrows.
- Synchronous request/response →
- Declare all participants explicitly at the top to control left-to-right ordering. Place the initiator on the far left.
- Write messages one per line. Keep message labels concise (e.g.,
POST /orders,201 Created). Move payload details toNoteblocks. - Add
autonumberwhen the diagram has 5+ messages. - Use
+/-shorthand for activations on arrows (e.g.,->>+Serverto activate,-->>-Clientto deactivate). - Model error paths with
alt/else. Never produce a happy-path-only diagram — always include at least one failure branch. - Use control flow blocks as needed — read
references/02-control-flow-and-notes.mdforalt,opt,loop,par,critical,break, andrect. - Group related participants with
boxwhen there are 4+ participants across distinct layers. - Add
Note overblocks sparingly for protocol details, SLA info, or phase labels. - Verify the output against the syntax rules below before presenting.
- For styling, themes, or configuration directives, read
references/03-styling-and-best-practices.md. - For real-world pattern inspiration (OAuth, webhooks, sagas, circuit breakers, retries), read
references/04-real-world-examples.md.
Reviewing / Fixing an Existing Diagram
- Check for syntax errors using the table below. Fix any found.
- Verify every
activatehas a matchingdeactivate(or use+/-shorthand consistently). - Verify every
alt,opt,loop,par,critical,break, andrectblock has a matchingend. - Check for design anti-patterns — read
references/03-styling-and-best-practices.mdfor the full list. - If the diagram exceeds 20 messages or 7 participants, recommend splitting into focused sub-diagrams.
- Ensure arrow style usage is consistent (don't mix sync and async arrows without clear intent).
- Confirm participants are declared explicitly with aliases if any name exceeds ~15 characters.
Refactoring Large Diagrams
- Identify logical phases (e.g., authentication, data processing, notification).
- Split into one diagram per phase, with a brief prose description connecting them.
- Keep shared participant declarations consistent across sub-diagrams.
- Each sub-diagram should have ≤ 15-20 messages and ≤ 6-7 participants.
Syntax Rules — Common Errors
| Mistake | Fix |
|---|---|
Smart quotes " " | Use straight quotes " |
Unicode arrows → ⇒ | Use ASCII arrows ->> --> |
Em/en dashes — – | Use plain hyphens - |
The word end in labels | Wrap in quotes: "end", brackets: [end], or parens: (end) |
| Multiple statements on one line | One statement per line |
| Spaces in participant IDs | Use CamelCase or snake_case IDs with alias for display name |
| Semicolons in text | Escape as #59; |
| Unbalanced brackets | Ensure every [ has ], every ( has ) |
Output Template
Use this skeleton as the starting point for every diagram:
sequenceDiagram
autonumber
participant A as Service A
participant B as Service B
A->>+B: Request
B-->>-A: Response
References
references/01-syntax-fundamentals.md— Participants, actors, specialized types, arrow reference, activation syntax.references/02-control-flow-and-notes.md— alt/opt/loop/par/critical/break/rect blocks, notes, sequence numbers, boxes, create/destroy.references/03-styling-and-best-practices.md— Themes, configuration, design principles, message labeling, anti-patterns, version compatibility.references/04-real-world-examples.md— JWT auth, OAuth 2.0, webhooks, saga pattern, event-driven microservices, retry backoff, circuit breaker.references/05-cheat-sheet.md— Arrow quick reference, control flow quick reference, participant types, escape sequences, CLI validation commands.
Source
git clone https://github.com/msewell/agent-stuff/blob/main/skills/mermaid-sequence-diagrams/SKILL.mdView on GitHub Overview
Generate, review, and fix Mermaid sequence diagrams that are syntactically correct, visually clear, and follow established best practices. This skill covers participants, arrows, activations, control flow, notes, styling, and common anti-patterns.
How This Skill Works
Identify participants and assign aliases, declaring all participants at the top. Choose the flow type (sync, async, failed, bidirectional) and write one message per line, moving payload details to Note blocks. Use activation shorthand (+/-), alt blocks for errors, and follow styling and best-practice guidance.
When to Use It
- Creating a new sequence diagram from system descriptions.
- Reviewing existing Mermaid diagrams for syntax and clarity.
- Fixing parse errors or invalid arrows.
- Refactoring large diagrams into focused sub-diagrams.
- Applying styling, notes, and anti-pattern guidelines.
Quick Start
- Step 1: Identify participants and aliases; declare them at the top.
- Step 2: Write messages one per line, using appropriate arrows for the flow type.
- Step 3: Add activations, notes, and styling; validate syntax and refine.
Best Practices
- Declare all participants at the top to lock left-to-right order.
- Keep one message per line with concise labels; move payloads to Notes.
- Add autonumber for diagrams with 5+ messages.
- Use +/ - activations correctly and ensure activates have matching deactivations.
- Always include alt/else branches and appropriate control-flow blocks; avoid happy-path only.
Example Use Cases
- OAuth handshake between client, authorization server, and resource server.
- Webhook delivery with retries and acknowledgment.
- Saga orchestration across microservices with compensating actions.
- Order processing pipeline with a message queue and services.
- Circuit breaker pattern with a fallback path in a failure scenario.
Frequently Asked Questions
Related Skills
creating-c4-diagrams
msewell/agent-stuff
Creates, reviews, and interprets C4 software architecture diagrams (System Context, Container, Component, Dynamic, Deployment). Produces Structurizr DSL or Mermaid diagram code following C4 model best practices. Use when creating architecture diagrams for a system, reviewing existing C4 diagrams for correctness and anti-patterns, generating Structurizr DSL workspaces, producing Mermaid C4 diagrams for READMEs, or using C4 diagrams as context for design decisions, code generation, risk analysis, or onboarding.
arazzo-specification
msewell/agent-stuff
Guides writing, reviewing, and modifying Arazzo workflow specifications (OpenAPI Initiative standard for multi-step API workflows). Use when creating Arazzo documents from scratch, adding steps or workflows to existing specs, reviewing Arazzo files for correctness, or generating API workflow definitions. Covers document structure, runtime expressions, success criteria, control flow, data threading, reusable components, workflow composition, AI agent integration, and validation.
kotlin-functional-programming
msewell/agent-stuff
Guides writing idiomatic, functional-style Kotlin code using built-in language features. Use when asked to write, review, or refactor Kotlin code for immutability, pure functions, sealed types, error handling, collections, coroutines, or functional architecture patterns.
property-based-testing-with-kotest
msewell/agent-stuff
Writes property-based tests using Kotest's kotest-property module. Identifies testable properties, designs generators, and configures PBT for Kotlin/JVM projects. Use when writing property-based tests, creating custom Arb generators, choosing property patterns (roundtrip, invariant, idempotence, oracle), debugging shrunk counterexamples, or integrating PBT into a Kotlin test suite alongside example-based tests.
reducing-coupling
msewell/agent-stuff
Analyzes a codebase scope for coupling issues, diagnoses coupling types using the Connascence framework, and proposes a comprehensive refactoring plan with concrete code changes. Use when asked to find coupling, reduce dependencies, decouple modules, or improve modularity in a codebase.
making-invalid-states-unrepresentable
msewell/agent-stuff
Analyzes existing code and guides new type design to make invalid states unrepresentable using type system techniques such as sum types, newtypes, typestate, branded types, and parse-don't-validate. Use when reviewing code for invalid-state bugs, refactoring types to eliminate impossible states, designing domain models, or applying compile-time correctness patterns. Language-agnostic.