Sequence diagrams from an AI reply: API calls and system interactions

The prompt

Draw a sequence diagram in Mermaid for: a user signing in with an SMS code, showing the browser, the API gateway, the user service and the SMS service. Requirements: reply with one complete mermaid code block only, the first line must be sequenceDiagram, declare actors with participant, use ->> and -->> for messages.

List the participants and mention the main failure branch (“return an error when the code is wrong”) and the reply will be more complete.

A typical result

sequenceDiagram
    autonumber
    participant U as User
    participant F as Browser
    participant G as API gateway
    participant S as User service
    U->>F: Enter phone number, request code
    F->>G: POST /sms/send
    G->>S: Send code
    S-->>G: Sent
    G-->>F: 200 OK
    U->>F: Enter code, sign in
    F->>G: POST /login
    G->>S: Verify code
    alt code is valid
        S-->>G: Issue token
        G-->>F: 200 + token
        F-->>U: Show home page
    else code is wrong or expired
        S-->>G: Verification failed
        G-->>F: 401
        F-->>U: Ask to try again
    end

Syntax at a glance

• Participants: participant S as User service; the alias after as is displayed, the order of declaration is the order on screen; actor U as User draws a stick figure.
• Messages: A->>B: text solid (request), A-->>B: text dashed (response). The arrow must be followed by a participant, the text comes after the colon.
• Blocks: alt condition … else … end, opt … end, loop every 5 s … end, par … and … end. Every block ends with end.
• Notes: Note over F,G: over HTTPS, Note right of S: cached for 5 min.
• Activation: A->>+B: start and B-->>-A: done; + / - draw an activation bar on B's lifeline.
• Numbering: autonumber on the second line numbers every message.

Editing

Sequence diagrams are edited in the code (double-click editing is for flowcharts and mind maps): rename a participant after as (leave the short id alone), change a message after the colon. A new message is a new line, placed where it should appear.

Errors

The most common one is “incomplete message line”: the participant after the arrow or the colon is missing. The other is a block without end. The error bar points to the line; “AI fix” handles both.

Export

For technical docs, PNG ×2 transparent or SVG; when there are many participants and the diagram is wide, switch to ×3 before downloading. Word and PowerPoint carry the code at the end, so renaming an endpoint later is a copy back. The template library has sign-in, online payment and microservice call sequence diagrams.

Related

• Flowcharts from an AI reply
• Export to Word, PowerPoint and PDF
• Common errors and how to fix them