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

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

Code

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

const { text } = await renderGlyphDiagram(`
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
`, {
  target: "chat",
  width: 72,
  height: 17,
  overflow: "expand"
});
console.log(text);

Nest a spanning block

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

Code

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

const { text } = await renderGlyphDiagram(`
block-beta
 columns 2
 block:Gateway:2
 columns 2
 auth["Auth"] quota["Rate limit"]
 end
 queue["Jobs"] worker["Worker"]
 queue --> worker
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);

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.