Mermaid flowcharts as ASCII text diagrams

Use renderGlyphDiagram from @glyphcss/diagrams. Both flowchart and graph accept TB, BT, LR, and RL; an omitted direction starts at TB.

Route an order

       ┌─────────────┐   ╭─────────────╮  yes  ┌──────────────┐         
       │ Submit cart │───▶ ◆ In stock? │───────▶ Take payment │         
       └─────────────┘   ╰─────────────╯       └──────────────┘         
                                │                     │                 
                             no │                     └────────┐        
                                │                              │        
                         ┌──────▼───────┐    ┌───────────────┐ │        
                         │ Notify buyer │────▶ Join waitlist │ │        
                         └──────────────┘    └───────────────┘ │        
                                                               │        
             ┌─────────────────────────────────────────────────┘        
             │                                                          
       ┌─────▼──────┐   ┌─────────────┐    ┌──────────────┐             
       │ Pack order │───▶ Ship parcel │────▶ Send receipt │             
       └────────────┘   └─────────────┘    └──────────────┘             

Code

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

const { text } = await renderGlyphDiagram(`
flowchart LR
 Cart[Submit cart] --> Stock{In stock?}
 Stock -->|yes| Pay[Take payment]
 Pay --> Pack[Pack order]
 Pack --> Ship[Ship parcel]
 Ship --> Receipt[Send receipt]
 Stock -->|no| Notify[Notify buyer]
 Notify --> Wait[Join waitlist]
`, {
  target: "chat",
  width: 72,
  height: 23,
  overflow: "expand"
});
console.log(text);

Group a processing pipeline

                                                ◜────────◝       ┌───────────┐  
·············Order ingestion·············     ┌─▶ Orders │╌╌╌╌╌╌╌▶ Audit log │  
·                                       ·     │ ◟────────◞       └───────────┘  
·                     ┌───────────────┐ ·     │                                 
· ┌──────────────┐    │               │───────┘ valid                           
· │ Upload batch │────▶ Validate rows │ ·invalid                                
· └──────────────┘    │               │────┐                                    
·                     └───────────────┘ ·  │ ┌──────────────┐                   
·                                       ·  └─▶ Reject batch │                   
·········································    └──────────────┘                   

Code

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

const { text } = await renderGlyphDiagram(`
graph LR
 subgraph ingest[Order ingestion]
 Upload[Upload batch] --> Validate[Validate rows]
 end
 Validate -->|valid| Store[(Orders)]
 Validate -->|invalid| Reject[Reject batch]
 Store -.-> Audit[Audit log]
`, {
  target: "chat",
  width: 80,
  height: 19,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• Declare labels with A[Label], decisions with A{Question}, and storage with A[(Records)]. See the shape catalogue for JSON and @{shape: ...} forms.
• Use --> for a directed edge, --- for a line, -.-> for dotted, and ==> for thick. Pipe labels such as -->|yes| travel with their edge.
• subgraph ... end creates a group; nested groups reserve enclosing frames.
• Bidirectional edges retain both heads. Invisible connections influence layout without painting an edge.
• Styling, click actions, images, and external assets do not execute. Read mermaid-degraded notes for adaptations.
• Long labels wrap. A fixed grid may simplify or split a graph; choose faithful detail or expansion when identity matters.