How to Build Sequence Diagrams and Export Mermaid Syntax in Schema Editor

TLDR

Switch Schema Editor to Sequence Mode, place participant and actor nodes to generate vertical lifelines, and drag message arrows between lifelines to model API requests and response returns. Add activation bars to show execution intervals, wrap branches in alt/loop fragment boxes, and click Export Mermaid to copy clean .mmd syntax ready for GitHub markdown.

---

Before you start

You need a distributed flow or authentication sequence to model (such as a client-to-server OAuth2 exchange) and a web browser.

Everything renders on an interactive client-side canvas, letting you drag lifelines and reorder messages without fighting raw text syntax.

---

Step 1 — Open Schema Editor in Sequence Mode

In the top mode dropdown, select Sequence Mode (or load /tools/schema-editor/software/).

The canvas switches to a timeline layout with vertical guideline rulers and a sequence element palette on the left.

Step 2 — Add actors and service participant lifelines

From the left palette, drag participant nodes onto the top header row:

1. Actor: Place a user stick-figure icon labeled User.
2. Participants: Place rectangular service nodes labeled API Gateway, Auth Service, and Database.

As you drop each node, vertical dashed lifelines automatically project down the length of the canvas.

Step 3 — Draw synchronous and asynchronous message arrows

Select the Message Tool in the left toolbar (or press M):

1. Synchronous Call (Solid Arrow ->>): Click on the User lifeline and drag horizontally to API Gateway. Double-click the arrow label to type POST /auth/login.
2. Nested Call: Drag from API Gateway to Auth Service with label Validate Credentials.
3. Return Response (Dashed Arrow -->>): Drag backward from Auth Service to API Gateway with label 200 Token Issued.

Arrows snap to horizontal grid intervals, keeping message order clean and legible.

Step 4 — Add activation bars for active execution periods

Click on any lifeline at the point where a request is received:

1. In the floating context menu, click Add Activation.
2. A vertical activation box renders over the lifeline, showing when that service is actively computing or waiting for a downstream response.
3. Drag the bottom handle of the activation box to stretch it down to the corresponding return arrow.

Step 5 — Wrap conditional flows in Alt and Loop fragment boxes

To show success vs failure branches:

1. Click Add Fragment Box in the left palette.
2. Drag a container box around the return messages.
3. Set the fragment type to alt (or opt / loop).
4. Add a divider line labeled [Credentials Valid] for the top branch and [Invalid Password] for the bottom branch (401 Unauthorized).

Step 6 — Export to Mermaid markdown (.mmd) or vector SVG

Click Export in the top-right header bar:

• Mermaid Syntax (.mmd): Copies clean Mermaid sequenceDiagram markdown. Paste this directly into GitHub issues, Notion pages, or Markdown documents where it renders natively.
• Vector SVG (.svg): Downloads a standalone vector image formatted with crisp dark-theme typography.
• High-Res PNG: Exports an image for architecture documentation slides.

---

Pro tip: auto-numbering sequence interactions

In complex sequences with ten or more interactions, manual step numbers get disorganized when you insert a new step in the middle.

Toggle on Autonumber in the top sequence toolbar. The editor automatically prefixes every message with sequential step numbers (1., 2., 3.) in both the visual canvas and the exported Mermaid code.

---

Next steps

• Model ERD databases and export SQL DDL
• Design visual state machines and export XState v5 code
• Capture electrical schematics in Schema Editor