# 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



```mermaid
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]
```

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



## Group a processing pipeline



```mermaid
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]
```

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



## Syntax and limits

- Declare labels with `A[Label]`, decisions with `A{Question}`, and storage with `A[(Records)]`. See the [shape catalogue](/diagrams/shapes/) 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](/diagrams/options/) when identity matters.