Mermaid sequence diagrams as text

Import renderGlyphSequence from @glyphcss/diagrams/sequence, then pass source and shared render options. The root graph renderer is not the sequence entry point.

Request and response

   Buyer                       API                     Stock           Pay          Mail    
     │                          │                        │              │             │     
     │ Place order              │                        │              │             │     
     ├─────────────────────────▶│                        │              │             │     
     │                          │                        │              │             │     
     │                          │ Reserve items          │              │             │     
     │                          ├───────────────────────▶│              │             │     
     │                          │                        │              │             │     
     │                          │ Items held             │              │             │     
     │                          │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤              │             │     
     │                          │                        │              │             │     
     │                          │ Charge card            │              │             │     
     │                          ├────────────────────────┼─────────────▶│             │     
     │                          │                        │              │             │     
     │                          │ Approved               │              │             │     
     │                          │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┼╌ ╌ ╌ ╌ ╌ ╌ ╌ ┤             │     
     │                          │                        │              │             │     
     │                          │ Send receipt           │              │             │     
     │                          ├────────────────────────┼──────────────┼────────────▶│     
     │                          │                        │              │             │     
     │                          │ Queued                 │              │             │     
     │                          │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┼╌ ╌ ╌ ╌ ╌ ╌ ╌ ┼ ╌ ╌ ╌ ╌ ╌ ╌ ┤     
     │                          │                        │              │             │     
     │ Order confirmed          │                        │              │             │     
     │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤                        │              │             │     
     │                          │                        │              │             │     

Code

import { renderGlyphSequence } from "@glyphcss/diagrams/sequence";

const { text } = await renderGlyphSequence(`
sequenceDiagram
 participant Buyer
 participant API
 participant Stock
 participant Pay
 participant Mail
 Buyer->>API: Place order
 API->>Stock: Reserve items
 Stock-->>API: Items held
 API->>Pay: Charge card
 Pay-->>API: Approved
 API->>Mail: Send receipt
 Mail-->>API: Queued
 API-->>Buyer: Order confirmed
`, {
  target: "chat",
  width: 92,
  height: 27,
  overflow: "expand"
});
console.log(text);

Alternative responses and notes

      o                                                         
    Buyer                         API                           
      │                            │                            
      │                            │ ┌────────────────────┐     
      │                            │ │ note  Keep receipt │     
      │                            │ └────────────────────┘     
      │ Place order                │                            
      ├───────────────────────────▶│                            
      │                            │                            
    ┌─ alt In stock ───────────────┼─┐                          
    │ │ Confirmed                  │ │                          
    │ │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤ │                          
    │ │                            │ │                          
    ├╌ else Sold out ╌╌╌╌╌╌╌╌╌╌╌╌╌╌│╌┤                          
    │ │ Try later                  │ │                          
    │ │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤ │                          
    └─┼────────────────────────────┼─┘                          
      │                            │                            

Code

import { renderGlyphSequence } from "@glyphcss/diagrams/sequence";

const { text } = await renderGlyphSequence(`
sequenceDiagram
 actor Buyer
 participant API
 Note right of API: Keep receipt
 Buyer->>API: Place order
 alt In stock
 API-->>Buyer: Confirmed
 else Sold out
 API-->>Buyer: Try later
 end
`, {
  target: "chat",
  width: 64,
  height: 19,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• Participant aliases use participant API as Order service; actor draws a stick figure.
• Message endpoints control direction; solid and dashed message styles remain distinct. Self-messages draw a loop.
• loop, alt/else, opt, par/and, critical/option, and break create frames with matched end statements.
• Notes can sit over participants or left/right of one participant. autonumber supports start and step.
• Activations, rect, and participant box styling are inert. Create/destroy syntax becomes full lifelines; half and central arrows become solid or dashed directed messages with notes in the report.
• Pagination follows time and repeats participant headers and continuing frames. overflow: "expand" grows the height; too many participants can still produce sequence-layout-overflow.
• See sequence JSON for direct control over frames and note positions.