Mermaid Gantt, journey, and timeline charts in text
Use renderGlyphChartMermaid for all three families. Omit render height to let these structured layouts choose their content height; fixed heights can omit content and report it.
Gantt schedules
Section titled “Gantt schedules”Dates and after dependencies produce calendar intervals. Forward references are supported. Status tags such as done, active, and crit remain identifiable; milestones become dots when needed.
Portal release
Discovery
Interviews done █████████
Prototype done ███████████
Delivery
API active ███████████████
Portal ██████████████████
QA crit ████████
Rollout
Preview ██████
Training █████████
Launch ●
└───┬──────────┬───────────┬───────────┬──────────┬──────
Apr 07 Apr 11 Apr 15 Apr 19 Apr 23 Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
gantt
title Portal release
dateFormat YYYY-MM-DD
axisFormat %b %d
section Discovery
Interviews :done, research, 2026-04-06, 3d
Prototype :done, design, after research, 4d
section Delivery
API :active, api, after design, 5d
Portal :portal, after design, 6d
QA :crit, qa, after api portal, 3d
section Rollout
Preview :preview, after qa, 2d
Training :training, after qa, 3d
Launch :milestone, after preview training, 0d
`, {
target: "chat",
width: 78
});
console.log(text); Calendar ticks use local dates and can coarsen to fit. Excluded days are not shaded; today/layout settings may remain inert with notes. Supply complete dates and task starts when their meaning matters; partial or missing dates can use logged epoch defaults.
Journey scores and actors
Section titled “Journey scores and actors”Scores render as compact 0–5 bars with task and actor text, grouped by section. Out-of-range scores are clamped with notes.
First order
Discover
Find store █████████████████████ 4 Buyer
Compare plans ████████████████ 3 Buyer, Sales
Purchase
Create account ████████████████ 3 Buyer
Add to cart █████████████████████ 4 Buyer
Pay ██████████ 2 Buyer, Payments
Follow up
Receipt ██████████████████████████ 5 Buyer
Track delivery █████████████████████ 4 Buyer, Support Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
journey
title First order
section Discover
Find store: 4: Buyer
Compare plans: 3: Buyer, Sales
section Purchase
Create account: 3: Buyer
Add to cart: 4: Buyer
Pay: 2: Buyer, Payments
section Follow up
Receipt: 5: Buyer
Track delivery: 4: Buyer, Support
`, {
target: "chat",
width: 68
});
console.log(text); Timeline events
Section titled “Timeline events”Periods and events form a table in source order, rather than a quantitative time axis. Whitespace-followed colons split events; embedded times and URLs retain their colons.
Portal roadmap
Foundation
April │ - Interviews
│ - Prototype
May │ - API beta
│ - Team login
Delivery
June │ - Private preview
│ - Usage charts
July │ - Public launch
│ - Support training
Growth
August │ - Billing export
September │ - Regional rollout Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
timeline
title Portal roadmap
section Foundation
April : Interviews : Prototype
May : API beta : Team login
section Delivery
June : Private preview : Usage charts
July : Public launch : Support training
section Growth
August : Billing export
September : Regional rollout
`, {
target: "chat",
width: 68
});
console.log(text); Long event text wraps on words. Narrow layouts can stack the event column. Increase width or inspect omission notes when a fixed size cannot retain all entries. For ownership lanes and dependencies without dates, see Git history and lane diagrams.