Get the FREE Ultimate OpenClaw Setup Guide →

mermaid-sequence-diagrams

npx machina-cli add skill msewell/agent-stuff/mermaid-sequence-diagrams --openclaw
Files (1)
SKILL.md
4.9 KB

Mermaid Sequence Diagrams

Generate, review, and fix Mermaid sequence diagrams that are syntactically correct, visually clear, and follow established best practices.

Generating a New Diagram

  1. Identify participants. List every system, service, or actor involved. Assign short IDs with descriptive aliases: participant OMS as Order Management Service.
  2. Use actor for human users (renders stick figure), participant for services, database for data stores, queue for message brokers.
  3. Determine the flow type:
    • Synchronous request/response → ->> / -->> arrows.
    • Async fire-and-forget → -) / --) arrows.
    • Failed/rejected → -x / --x arrows.
    • Bidirectional (v11+) → <<->> / <<-->> arrows.
  4. Declare all participants explicitly at the top to control left-to-right ordering. Place the initiator on the far left.
  5. Write messages one per line. Keep message labels concise (e.g., POST /orders, 201 Created). Move payload details to Note blocks.
  6. Add autonumber when the diagram has 5+ messages.
  7. Use +/- shorthand for activations on arrows (e.g., ->>+Server to activate, -->>-Client to deactivate).
  8. Model error paths with alt/else. Never produce a happy-path-only diagram — always include at least one failure branch.
  9. Use control flow blocks as needed — read references/02-control-flow-and-notes.md for alt, opt, loop, par, critical, break, and rect.
  10. Group related participants with box when there are 4+ participants across distinct layers.
  11. Add Note over blocks sparingly for protocol details, SLA info, or phase labels.
  12. Verify the output against the syntax rules below before presenting.
  13. For styling, themes, or configuration directives, read references/03-styling-and-best-practices.md.
  14. For real-world pattern inspiration (OAuth, webhooks, sagas, circuit breakers, retries), read references/04-real-world-examples.md.

Reviewing / Fixing an Existing Diagram

  1. Check for syntax errors using the table below. Fix any found.
  2. Verify every activate has a matching deactivate (or use +/- shorthand consistently).
  3. Verify every alt, opt, loop, par, critical, break, and rect block has a matching end.
  4. Check for design anti-patterns — read references/03-styling-and-best-practices.md for the full list.
  5. If the diagram exceeds 20 messages or 7 participants, recommend splitting into focused sub-diagrams.
  6. Ensure arrow style usage is consistent (don't mix sync and async arrows without clear intent).
  7. Confirm participants are declared explicitly with aliases if any name exceeds ~15 characters.

Refactoring Large Diagrams

  1. Identify logical phases (e.g., authentication, data processing, notification).
  2. Split into one diagram per phase, with a brief prose description connecting them.
  3. Keep shared participant declarations consistent across sub-diagrams.
  4. Each sub-diagram should have ≤ 15-20 messages and ≤ 6-7 participants.

Syntax Rules — Common Errors

MistakeFix
Smart quotes " "Use straight quotes "
Unicode arrows Use ASCII arrows ->> -->
Em/en dashes Use plain hyphens -
The word end in labelsWrap in quotes: "end", brackets: [end], or parens: (end)
Multiple statements on one lineOne statement per line
Spaces in participant IDsUse CamelCase or snake_case IDs with alias for display name
Semicolons in textEscape as #59;
Unbalanced bracketsEnsure 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

  1. Step 1: Identify participants and aliases; declare them at the top.
  2. Step 2: Write messages one per line, using appropriate arrows for the flow type.
  3. 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

Add this skill to your agents

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.

Sponsor this space

Reach thousands of developers