# Mermaid block diagrams as monospace text

Pass `block` or `block-beta` source to `renderGlyphDiagram`. Column hints guide the layout while the fitter keeps labels readable.

## Place services in columns



```mermaid
block-beta
 columns 3
 web["Storefront"] api["Order API"] db[("Orders")]
 queue["Job queue"] worker["Receipt worker"] mail["Email gateway"]
 web --> api
 api --> db
 api --> queue
 queue --> worker
 worker --> mail
```

```text
     ┌────────────────┐    ┌────────────────┐    ◜────────────────◝     
     │                │    │                │    │                │     
     │   Storefront   │────▶    Order API   │────▶     Orders     │     
     │                │    │                │    │                │     
     └────────────────┘    └────────────────┘    ◟────────────────◞     
                                   │                                    
                                   │                                    
             ┌─────────────────────┘                                    
             │                                                          
     ┌───────▼────────┐    ┌────────────────┐    ┌────────────────┐     
     │    Job queue   │────▶ Receipt worker │────▶  Email gateway │     
     └────────────────┘    └────────────────┘    └────────────────┘     
```



## Nest a spanning block



```mermaid
block-beta
 columns 2
 block:Gateway:2
 columns 2
 auth["Auth"] quota["Rate limit"]
 end
 queue["Jobs"] worker["Worker"]
 queue --> worker
```

```text
              ··············Gateway···············              
              ·                                  ·              
              · ┌────────────┐    ┌────────────┐ ·              
              · │    Auth    │    │ Rate limit │ ·              
              · └────────────┘    └────────────┘ ·              
              ·                                  ·              
              ····································              
                                                                
                                                                
                                                                
                                                                
              ┌──────────────┐    ┌──────────────┐              
              │     Jobs     │────▶    Worker    │              
              └──────────────┘    └──────────────┘              
```



## Syntax and limits

- `columns N` sets a grid. `:N` spans that many columns, including the gaps between them.
- `block:Name ... end` nests a grid. `space` reserves blank cells; spaces and empty block input are supported.
- Labels, shapes, and arrows become graph elements. Styling and external assets are inert.
- Crowded grids may wrap to fewer columns (`block-row-wrap`) or use the general fitter (`block-layout`). Column positions are hints rather than fixed pixel coordinates.
- Large or tall blocks can paginate. Expansion and explicit direction are available through [render options](/diagrams/options/).