Mermaid charts as ASCII and braille text
renderGlyphChartMermaid(source, options?) supports pie, xychart/xychart-beta, sankey/sankey-beta, quadrantChart, gantt, radar/radar-beta, treemap/treemap-beta, journey, timeline, packet/packet-beta, and kanban.
Every example below is rendered at build time from the source in its collapsed disclosure. Use the schedule and journey guide and packet and kanban guide for the remaining families.
import { renderGlyphChartMermaid, glyphChartFromMermaid } from "@glyphcss/charts";const source = `pie "Docs": 25 "Code": 75`;const result = renderGlyphChartMermaid(source, { target: "chat", width: 60, height: 14 });const spec = glyphChartFromMermaid(source);console.log(result.text, result.report.ledger, spec); Engineering hours
Design · 10%─────
═══════███████
▌▌═══════█████████
Docs · 10%─────▌▌▌▌▌▌═════███████████─────API · 30%
▌▌▌▌▌▌▌▌════████████████
╱╱╱▌▌▌▌▌▌▌══████████████
╱╱╱╱╱╱╱╱╱╱▌▌═█████████████
Ops · 12%─────╱╱╱╱╱╱╱╱╱╱╱▚▚░░░██████████
╱╱╱╱╱╱▚▚▚▚▚▚░░░░░░░░░███
╱▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░░
▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░
▚▚▚▚▚▚▚▚░░░░░░░░░░
Tests · 16%─────▚▚▚▚▚▚░░░░░░░░─────Web · 22% Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
pie title Engineering hours
"API": 30
"Web": 22
"Tests": 16
"Ops": 12
"Docs": 10
"Design": 10
`, {
target: "chat",
width: 72,
height: 18,
legend: false
});
console.log(text); XY charts
Section titled “XY charts”Categories or numeric ranges drive bar and line marks. horizontal swaps their axes. xychart-beta is also accepted.
Daily orders
Orders
60 ┤
│
│ __---
│ __--─────────---‾‾ ███
40 ┤ __-----‾‾ ███ ███ ███
│ ──────────────────---‾‾ ███ ███ ███ ███
│ ▃▃▃ ███ ███ ███ ███
20 ┤ ▂▂▂ ███ ▇▇▇ ███ ███ ███ ███
│ ███ ███ ███ ███ ███ ███ ███
│ ███ ███ ███ ███ ███ ███ ███
│ ███ ███ ███ ███ ███ ███ ███
0 └────┬────────┬────────┬────────┬────────┬────────┬────────┬─────
Mon Tue Wed Thu Fri Sat Sun
█ Bar ── Line Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
xychart
title Daily orders
x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
y-axis Orders 0 --> 60
bar [18, 24, 21, 35, 42, 39, 48]
line [30, 32, 34, 38, 44, 46, 50]
`, {
target: "chat",
width: 68,
height: 18
});
console.log(text); Sankey
Section titled “Sankey”Rows are CSV source, target, value. Quoted fields can contain commas. Cycles adapt to a flow list with notes; native Sankey rejects cycles.
█──╮ ╭──█──╮ ╭──█ █──┴─╮ ╭─┴──█──┴─╮ ├──█ Solar 30 █────┼━━━━━ 30 ━━━━━┼────█────┼━━━━ 40 ━━━━┓ ╭─┴──█ █──┬─╯ ╰─┬──█──┬─╯ ┗━┼────█ Homes 40 █──╯ ╰──█──┤ ╰─┬──█ █──╯ ├──█ ╭────█ ╰──█ █──╮ ┏━┼────█──╮ █──┴─╮ ┃ ╰─┬──█──┼───── 20 ─────╮ Wind 25 █────┼━━━━ 25 ━━━━┛ ╰──█──╯ │ ╭────█ █──┬─╯ █ ╰─┼────█ Shops 20 █──╯ ╭──█──┬───── 15 ──────╮╰─┬──█ ├──█──╯ │ ╰──█ ╭─┴──█ │ █──╮ ┏━┼────█────╮ │ █──┴─╮ ┃ ╰─┬──█────┼━━━━ 25 ━━━━┓│ ╭──█ █────┤ ┃ ├──█──┬─╯ ┃╰──┼──█ Rail 15 Gas 45 █────┼━━━━ 45 ━━━━┛ ╰──█──╯ ┃ ╰──█ █────┤ Grid 100 ┃ █──┬─╯ ┃ █──┤ ┃ ╭────█ █──╯ ┗━┼────█ Industry 25 ╰─┬──█ ╰──█
Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
sankey-beta
Solar,Grid,30
Wind,Grid,25
Gas,Grid,45
Grid,Homes,40
Grid,Shops,20
Grid,Rail,15
Grid,Industry,25
`, {
target: "chat",
width: 72,
height: 24
});
console.log(text); Quadrant priorities
Section titled “Quadrant priorities”Coordinates run from 0 to 1. Endpoint captions replace the corresponding numeric endpoint ticks.
Campaign priorities
High Engagement │ Promote │ Expand
│ Referral │
│ ●
│ │ Search
│ │ ●
│
│ Email │
│ ● │
│ Partners
│ │ ●
│ │
│── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ─
│ │
│ Reassess │ Improve
│
│ │ Social
│ │ ●
│ Events
│ ● │
│ │
│
│ │
Low Engagement ──────────────────────────────────────────────────────────────
Low Reach High Reach Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
quadrantChart
title Campaign priorities
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 Expand
quadrant-2 Promote
quadrant-3 Reassess
quadrant-4 Improve
Search: [0.72, 0.80]
Email: [0.25, 0.70]
Social: [0.72, 0.25]
Events: [0.25, 0.18]
Partners: [0.72, 0.60]
Referral: [0.25, 0.90]
`, {
target: "chat",
width: 78,
height: 26
});
console.log(text); Radar comparisons
Section titled “Radar comparisons”Braille and blocks use polygon lines; box and ASCII adapt radar curves to grouped bars. radarGrid: "outer" keeps only the outer contour and spokes. radarSeries: "cells" uses whole-cell symbol edges instead of native lines.
Delivery options
Speed
⣀⠔⢺⠒⢄
⢀⠤⠊ ⣼⢆ ⠉⠢⣀
⢀⠤⠊⠁ ⡜⢸ ⠱⡀ ⠑⠢⡀
Control ⢀⡠⠒⠁ ⡜ ⢸ ⠈⢆ ⠈⠑⢄⡀ Cost
⣟⠫⣒⠒⠒⠒⠤⠤⡼⣤⣔⣺⣒⣄⣀⣀⣣⣀⣀⣀⣀⠔⢺
⡿⡀ ⠑⠤⡀⣀⡜⠊ ⢸ ⠉⠢⣀⢘⡤⠊⡝ ⢸
⡇⢇ ⢸⡹⠤⡀ ⢸ ⡠⠒⡇⢸⢠⠃ ⢸
⡇⢸ ⣸⠁ ⠈⠒⢄⣸⣀⠔⠉ ⡇ ⣟ ⢸
⡇ ⡇ ⡰⢹ ⣀⠔⢺⠒⢄⡀ ⡇⢀⠟⡄ ⢸
⡇ ⢸⡰⠁⢸⣀⠔⠊ ⢸ ⠈⠒⢄⡇⡸ ⢣ ⢸
⡇ ⡰⣧⠔⠉⠉⠢⢄ ⢸ ⣀⠔⠉⢩⠣⢄⠈⡆⢸
⡧⠔⠉⠒⠵⣄ ⠉⠢⢼⠤⠊ ⡰⠁ ⢀⣉⠷⢼
Safety ⠈⠑⠤⡀ ⠙⡖⠤⣀ ⢸ ⣀⡼⠤⠒⠉⢁⡠⠊⠁ Scale
⠈⠒⢄⡀⠈⠢⡀⠉⢺⠊⡩⠃ ⡠⠔⠁
⠈⠒⢄⠈⠢⣸⡔⠁⣀⠔⠉
⠉⠢⢼⠤⠊
Quality
⠠⠤⠤ A: Hosted ⠠⠤⠤ B: Custom Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
radar-beta
title Delivery options
axis speed["Speed"], cost["Cost"], scale["Scale"], quality["Quality"], safety["Safety"], control["Control"]
curve hosted["Hosted"] {9, 6, 9, 7, 8, 4}
curve custom["Custom"] {4, 8, 6, 9, 7, 10}
min 0
max 10
graticule polygon
ticks 2
showLegend true
`, {
target: "web",
width: 68,
height: 26
});
console.log(text); Treemap
Section titled “Treemap”Indentation defines hierarchy; leaf values follow colons. Preserve the nesting when copying source.
Engineering budget
┌──────────────────────────────────────────────┬───────────────┐
│ Product │ Delivery │
├─────────────────────────┬────────────────────┼───────────────┤
│ Portal │ Mobile │ CI │
│ 22 │ 18 │ 13 │
│ │ │ │
│ │ │ │
├─────────────────────────┴────────────────────┤ │
│ Platform ├───────────────┤
├──────────────────────────┬───────────────────┤ QA │
│ Cloud │ Security │ 12 │
│ 20 │ 15 │ │
│ │ │ │
└──────────────────────────┴───────────────────┴───────────────┘ Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
treemap-beta
title Engineering budget
"Product"
"Portal": 22
"Mobile": 18
"Platform"
"Cloud": 20
"Security": 15
"Delivery"
"CI": 13
"QA": 12
`, {
target: "chat",
width: 64,
height: 16
});
console.log(text); Adaptation and errors
Section titled “Adaptation and errors”Mermaid themes, browser actions, and configuration can remain inert; read mermaid-degraded entries for the actual replacement. label-folded identifies unsupported characters changed before wrapping. These are text layouts, so pixel-based Mermaid styling does not transfer directly.
Invalid source throws GLYPH_MERMAID_SYNTAX; a header belonging to another diagram family throws GLYPH_MERMAID_NOT_CHART_TYPE. Use Diagrams for flowcharts, sequences, and other node/edge syntax. The CLI accepts Mermaid through glyphcss diagram, not glyphcss chart.