# 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](/charts/mermaid-schedules/) and [packet and kanban guide](/charts/mermaid-structures/) for the remaining families. ```ts 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); ``` ## Pie ```mermaid pie title Engineering hours "API": 30 "Web": 22 "Tests": 16 "Ops": 12 "Docs": 10 "Design": 10 ``` ```text Engineering hours Design · 10%───── ═══════███████ ▌▌═══════█████████ Docs · 10%─────▌▌▌▌▌▌═════███████████─────API · 30% ▌▌▌▌▌▌▌▌════████████████ ╱╱╱▌▌▌▌▌▌▌══████████████ ╱╱╱╱╱╱╱╱╱╱▌▌═█████████████ Ops · 12%─────╱╱╱╱╱╱╱╱╱╱╱▚▚░░░██████████ ╱╱╱╱╱╱▚▚▚▚▚▚░░░░░░░░░███ ╱▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░░ ▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░ ▚▚▚▚▚▚▚▚░░░░░░░░░░ Tests · 16%─────▚▚▚▚▚▚░░░░░░░░─────Web · 22% ``` ## XY charts Categories or numeric ranges drive bar and line marks. `horizontal` swaps their axes. `xychart-beta` is also accepted. ```mermaid 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] ``` ```text Daily orders Orders 60 ┤ │ │ __--- │ __--─────────---‾‾ ███ 40 ┤ __-----‾‾ ███ ███ ███ │ ──────────────────---‾‾ ███ ███ ███ ███ │ ▃▃▃ ███ ███ ███ ███ 20 ┤ ▂▂▂ ███ ▇▇▇ ███ ███ ███ ███ │ ███ ███ ███ ███ ███ ███ ███ │ ███ ███ ███ ███ ███ ███ ███ │ ███ ███ ███ ███ ███ ███ ███ 0 └────┬────────┬────────┬────────┬────────┬────────┬────────┬───── Mon Tue Wed Thu Fri Sat Sun █ Bar ── Line ``` ## Sankey Rows are CSV source, target, value. Quoted fields can contain commas. Cycles adapt to a flow list with notes; native Sankey rejects cycles. ```mermaid sankey-beta Solar,Grid,30 Wind,Grid,25 Gas,Grid,45 Grid,Homes,40 Grid,Shops,20 Grid,Rail,15 Grid,Industry,25 ``` ```text █──╮ ╭──█──╮ ╭──█ █──┴─╮ ╭─┴──█──┴─╮ ├──█ Solar 30 █────┼━━━━━ 30 ━━━━━┼────█────┼━━━━ 40 ━━━━┓ ╭─┴──█ █──┬─╯ ╰─┬──█──┬─╯ ┗━┼────█ Homes 40 █──╯ ╰──█──┤ ╰─┬──█ █──╯ ├──█ ╭────█ ╰──█ █──╮ ┏━┼────█──╮ █──┴─╮ ┃ ╰─┬──█──┼───── 20 ─────╮ Wind 25 █────┼━━━━ 25 ━━━━┛ ╰──█──╯ │ ╭────█ █──┬─╯ █ ╰─┼────█ Shops 20 █──╯ ╭──█──┬───── 15 ──────╮╰─┬──█ ├──█──╯ │ ╰──█ ╭─┴──█ │ █──╮ ┏━┼────█────╮ │ █──┴─╮ ┃ ╰─┬──█────┼━━━━ 25 ━━━━┓│ ╭──█ █────┤ ┃ ├──█──┬─╯ ┃╰──┼──█ Rail 15 Gas 45 █────┼━━━━ 45 ━━━━┛ ╰──█──╯ ┃ ╰──█ █────┤ Grid 100 ┃ █──┬─╯ ┃ █──┤ ┃ ╭────█ █──╯ ┗━┼────█ Industry 25 ╰─┬──█ ╰──█ ``` ## Quadrant priorities Coordinates run from 0 to 1. Endpoint captions replace the corresponding numeric endpoint ticks. ```mermaid 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] ``` ```text Campaign priorities High Engagement │ Promote │ Expand │ Referral │ │ ● │ │ Search │ │ ● │ │ Email │ │ ● │ │ Partners │ │ ● │ │ │── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ─ │ │ │ Reassess │ Improve │ │ │ Social │ │ ● │ Events │ ● │ │ │ │ │ │ Low Engagement ────────────────────────────────────────────────────────────── Low Reach High Reach ``` ## 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. ```mermaid 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 ``` ```text Delivery options Speed ⣀⠔⢺⠒⢄ ⢀⠤⠊ ⣼⢆ ⠉⠢⣀ ⢀⠤⠊⠁ ⡜⢸ ⠱⡀ ⠑⠢⡀ Control ⢀⡠⠒⠁ ⡜ ⢸ ⠈⢆ ⠈⠑⢄⡀ Cost ⣟⠫⣒⠒⠒⠒⠤⠤⡼⣤⣔⣺⣒⣄⣀⣀⣣⣀⣀⣀⣀⠔⢺ ⡿⡀ ⠑⠤⡀⣀⡜⠊ ⢸ ⠉⠢⣀⢘⡤⠊⡝ ⢸ ⡇⢇ ⢸⡹⠤⡀ ⢸ ⡠⠒⡇⢸⢠⠃ ⢸ ⡇⢸ ⣸⠁ ⠈⠒⢄⣸⣀⠔⠉ ⡇ ⣟ ⢸ ⡇ ⡇ ⡰⢹ ⣀⠔⢺⠒⢄⡀ ⡇⢀⠟⡄ ⢸ ⡇ ⢸⡰⠁⢸⣀⠔⠊ ⢸ ⠈⠒⢄⡇⡸ ⢣ ⢸ ⡇ ⡰⣧⠔⠉⠉⠢⢄ ⢸ ⣀⠔⠉⢩⠣⢄⠈⡆⢸ ⡧⠔⠉⠒⠵⣄ ⠉⠢⢼⠤⠊ ⡰⠁ ⢀⣉⠷⢼ Safety ⠈⠑⠤⡀ ⠙⡖⠤⣀ ⢸ ⣀⡼⠤⠒⠉⢁⡠⠊⠁ Scale ⠈⠒⢄⡀⠈⠢⡀⠉⢺⠊⡩⠃ ⡠⠔⠁ ⠈⠒⢄⠈⠢⣸⡔⠁⣀⠔⠉ ⠉⠢⢼⠤⠊ Quality ⠠⠤⠤ A: Hosted ⠠⠤⠤ B: Custom ``` ## Treemap Indentation defines hierarchy; leaf values follow colons. Preserve the nesting when copying source. ```mermaid treemap-beta title Engineering budget "Product" "Portal": 22 "Mobile": 18 "Platform" "Cloud": 20 "Security": 15 "Delivery" "CI": 13 "QA": 12 ``` ```text Engineering budget ┌──────────────────────────────────────────────┬───────────────┐ │ Product │ Delivery │ ├─────────────────────────┬────────────────────┼───────────────┤ │ Portal │ Mobile │ CI │ │ 22 │ 18 │ 13 │ │ │ │ │ │ │ │ │ ├─────────────────────────┴────────────────────┤ │ │ Platform ├───────────────┤ ├──────────────────────────┬───────────────────┤ QA │ │ Cloud │ Security │ 12 │ │ 20 │ 15 │ │ │ │ │ │ └──────────────────────────┴───────────────────┴───────────────┘ ``` ## 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](/diagrams/overview/) for flowcharts, sequences, and other node/edge syntax. The [CLI](/charts/cli/) accepts Mermaid through `glyphcss diagram`, not `glyphcss chart`.