Mermaid state diagrams as text

Pass stateDiagram or stateDiagram-v2 source to renderGlyphDiagram.

Order lifecycle

                                                            dispatch  ╭─────────╮           
                                                           ┌──────────▶ Shipped │──▶◉       
                                          pay    ╭──────╮  │          ╰─────────╯           
                                      ┌──────────▶ Paid ├──┤                                
         ╭───────╮ submit ╭─────────╮ │          ╰──────╯  │ refund  ╭──────────╮           
      ●──▶ Draft │────────▶ Pending ├─┤                    └─────────▶ Refunded │           
         ╰───────╯        ╰─────────╯ │       ╭───────────╮          ╰──────────╯           
                                      └───────▶ Cancelled │                                 
                                       cancel ╰───────────╯                                 

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
stateDiagram-v2
 direction LR
 [*] --> Draft
 Draft --> Pending: submit
 Pending --> Paid: pay
 Pending --> Cancelled: cancel
 Paid --> Shipped: dispatch
 Paid --> Refunded: refund
 Shipped --> [*]
`, {
  target: "chat",
  width: 92,
  height: 19,
  overflow: "expand"
});
console.log(text);

Composite state

       ················Checkout·················                        
       ·                                       ·                        
       ·       ╭────────╮    ╭─────────╮       ·    ╭──────────╮        
  ●──────▶●────▶ Review │────▶ Payment │────▶◉──────▶ Complete │────▶◉  
       ·       ╰────────╯    ╰─────────╯       ·    ╰──────────╯        
       ·                                       ·                        
       ·········································                        

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
stateDiagram-v2
 direction LR
 [*] --> Checkout
 state Checkout {
 [*] --> Review
 Review --> Payment
 Payment --> [*]
 }
 Checkout --> Complete
 Complete --> [*]
`, {
  target: "chat",
  width: 72,
  height: 17,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• [*] becomes a point marker scoped to its region; transitions use --> with an optional : caption.
• state Choice <<choice>> draws a diamond. Fork/join declarations use rounded nodes and report the adaptation.
• state Name { ... } encloses a composite. -- separates concurrent regions; empty regions are omitted and reported.
• Notes become text rows. Invalid notes and concurrency separators have named errors in troubleshooting.
• Composite transitions attach to the group’s start/first or end/last child. Self-transitions on composites are adapted and reported.
• Reused state identities across scopes may need copies; inspect state-shared. Styling and nested directives do not execute.