Mermaid and JSON diagrams as ASCII text

@glyphcss/diagrams turns Mermaid source and JSON data into monospace text. It measures labels, lays out nodes, routes connections, and paints character cells. It needs no scene, canvas element, or WebGL context.

Install and render a flowchart

npm i @glyphcss/diagrams

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

const result = await renderGlyphDiagram(
  `flowchart LR
 Push[Push commit] --> Build[Build app]
 Build --> Test{Tests pass?}
 Test -->|yes| Stage[Deploy staging]
 Stage --> Smoke[Smoke tests]
 Smoke --> Prod[Deploy prod]
 Test -->|no| Fix[Fix build]`,
  { target: "chat", width: 72, height: 19, overflow: "expand" },
);
console.log(result.text);

        ┌─────────────┐    ┌───────────┐    ╭───────────────╮           
        │ Push commit │────▶ Build app │────▶ ◆ Tests pass? │           
        └─────────────┘    └───────────┘    ╰───────────────╯           
                                                   │ │                  
                ┌──────────────────────────────────┘ │ no               
                │             yes                    │                  
                │                             ┌──────▼────┐             
                │                             │ Fix build │             
                │                             └───────────┘             
                │                                                       
        ┌───────▼────────┐    ┌─────────────┐    ┌─────────────┐        
        │ Deploy staging │────▶ Smoke tests │────▶ Deploy prod │        
        └────────────────┘    └─────────────┘    └─────────────┘        

Choose a target

Targets set default cell budgets, character sets, and color encodings. A cell is one monospace character position; width counts columns and height counts rows. These previews use explicit compact sizes and color: "none" so terminal escape codes do not appear in HTML.

Target	Default columns × rows	Charset	Color
chat	72 × 24	box	none
terminal	80 × 24	braille	truecolor
web (API default)	96 × 32	braille	css

Chat

                                 yes ┌────────────┐  ┌──────────────┐   
                                  ┌──▶ Load order │──▶ Return order │   
   ┌───────────────┐  ╭─────────╮ │  └────────────┘  └──────────────┘   
   │ Order request │──▶ ◆ Token ├─┤                                     
   └───────────────┘  │ valid?  │ │  ┌────────────┐                     
                      ╰─────────╯ └──▶ Return 401 │                     
                                  no └────────────┘                     

Code

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

const { text } = await renderGlyphDiagram(`
flowchart LR; Request[Order request] --> Auth{Token valid?}; Auth -->|yes| Load[Load order]; Load --> Reply[Return order]; Auth -->|no| Deny[Return 401]
`, {
  target: "chat",
  color: "none",
  width: 72,
  height: 12
});
console.log(text);

Terminal

                                 yes ┌────────────┐  ┌──────────────┐   
                                  ┌──▶ Load order │──▶ Return order │   
   ┌───────────────┐  ╭─────────╮ │  └────────────┘  └──────────────┘   
   │ Order request │──▶ ◆ Token ├─┤                                     
   └───────────────┘  │ valid?  │ │  ┌────────────┐                     
                      ╰─────────╯ └──▶ Return 401 │                     
                                  no └────────────┘                     

Code

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

const { text } = await renderGlyphDiagram(`
flowchart LR; Request[Order request] --> Auth{Token valid?}; Auth -->|yes| Load[Load order]; Load --> Reply[Return order]; Auth -->|no| Deny[Return 401]
`, {
  target: "terminal",
  color: "none",
  width: 72,
  height: 12
});
console.log(text);

Web

                                 yes ┌────────────┐  ┌──────────────┐   
                                  ┌──▶ Load order │──▶ Return order │   
   ┌───────────────┐  ╭─────────╮ │  └────────────┘  └──────────────┘   
   │ Order request │──▶ ◆ Token ├─┤                                     
   └───────────────┘  │ valid?  │ │  ┌────────────┐                     
                      ╰─────────╯ └──▶ Return 401 │                     
                                  no └────────────┘                     

Code

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

const { text } = await renderGlyphDiagram(`
flowchart LR; Request[Order request] --> Auth{Token valid?}; Auth -->|yes| Load[Load order]; Load --> Reply[Return order]; Auth -->|no| Deny[Return 401]
`, {
  target: "web",
  width: 72,
  height: 12
});
console.log(text);

Diagram borders use whole cells in every charset. Targets do not change a diagram into a raster image.

Choose the entry point

Input	Import and function
Mermaid graph families, including gitGraph; JSON graph	@glyphcss/diagrams: renderGlyphDiagram
Mermaid sequence; JSON sequence	@glyphcss/diagrams/sequence: renderGlyphSequence
JSON lane DAG; git-log text	@glyphcss/diagrams/lanes: renderGlyphLaneDag

Every renderer returns text, optional html, pages, meta, and report. The fidelity report describes adaptations made while reading and fitting the source. Its ledger is a list of { code, message, detail? } entries. Read it when labels, shapes, or panel boundaries differ from your source.

Where to go next

• Explore flowcharts, sequences, or JSON input.
• Tune options and sizing and compare node shapes.
• Edit a live example in the diagrams workbench.
• Render files with the CLI.
• Embed output in vanilla JavaScript, React, or Vue.
• Install glyphcss-diagrams for diagrams in coding-agent conversations.
• Compare glyphcss, beautiful-mermaid, and mermaid-ascii.