glyphcss vs beautiful-mermaid vs mermaid-ascii

This compares @glyphcss/diagrams and @glyphcss/charts with beautiful-mermaid and mermaid-ascii. Competitor entries describe their public READMEs, checked on 23 October 2026. An empty cell means the README does not establish that feature, not that it is unsupported. Family support does not imply every Mermaid feature is reproduced.

       ┌─────────────┐   ╭─────────────╮  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);

Documented features

Feature	glyphcss	beautiful-mermaid	mermaid-ascii
Diagram families	Flowchart, sequence, state, class, ER, mindmap, gitGraph, block, architecture, requirement, C4; JSON graphs, sequences, and lanes	Flowchart, state, sequence, class, ER	Graph/flowchart, sequence, ER
Charts	Line, area, bar, scatter, pie/donut, heatmap, Sankey, funnel, treemap; Mermaid charts and schedules	XY bars, lines, combinations; ASCII and SVG
Text charsets	`ascii`, `box`, `blocks`, `braille`; diagram borders remain whole-cell	ASCII or Unicode box drawing; XY bars also use blocks	ASCII or Unicode box drawing
Width fitting	Cell budgets, label wrapping, orientation fitting, diagram pagination; skill checks output fit		Graph-only `--max-width N` or `auto`; retries compact spacing and warns if still too wide
Agent skill	One glyphcss-diagrams skill for charts and diagrams
Runtime	JavaScript/TypeScript; Node.js for CLI, browser for embeds	TypeScript, no DOM dependency	Go; prebuilt CLI binaries
Output	Plain/ANSI text or escaped HTML spans for a `<pre>`	SVG plus ASCII/Unicode, ANSI/HTML color modes	Terminal text; HTTP rendering server
License	MIT	MIT

Glyphcss entries follow the diagrams README, charts README, and skill README. For beautiful-mermaid, see its features, ASCII chart support, and API reference. For mermaid-ascii, see usage and width fitting and supported types.

Choose for your destination

Use Glyphcss when you need chat-sized text, diagram panels, chart types beyond XY plots, or the bundled agent skill. Check render notes for adaptations; Mermaid styling and interactions are inert.
Use beautiful-mermaid when SVG, theme switching, or Shiki theme integration matters. Its README also documents synchronous rendering and interactive SVG chart tooltips. Charts are available there too.
Use mermaid-ascii when a prebuilt Go CLI or its HTTP server fits your workflow. Its README documents sequence frames and ER attribute tables as well as flowcharts.

Try the diagrams workbench, explore charts, or install the agent skill.