Mermaid packet headers and kanban boards as text
Both families use renderGlyphChartMermaid(source, options). They share the chart target and color options but use structured layouts rather than numeric axes.
Packet bit fields
Section titled “Packet bit fields”Use absolute bit ranges; fields wrap across 32-bit rows with shared sharp borders. Vertical row keys show ascending decimal offsets.
Order event header
1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 3 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
┌───────────────┬───────────────┬───────────────────────────────┐
│ Version │ Flags │ Length │
└───────────────┴───────────────┴───────────────────────────────┘
3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 4 5 5 5 5 5 5 5 5 5 5 6 6 6 6
2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3
┌───────────────────────────────────────────────────────────────┐
│ Request ID │
└───────────────────────────────────────────────────────────────┘
6 6 6 6 6 6 7 7 7 7 7 7 7 7 7 7 8 8 8 8 8 8 8 8 8 8 9 9 9 9 9 9
4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5
┌───────────────────────────────────────────────────────────────┐
│ Order ID │
└───────────────────────────────────────────────────────────────┘
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
9 9 9 9 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2
6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7
┌───────────────────────────────┬───────────────────────────────┐
│ Region │ Event type │
└───────────────────────────────┴───────────────────────────────┘
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
2 2 3 3 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4 4 5 5 5 5 5 5 5 5 5 5
8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
┌───────────────────────────────────────────────────────────────┐
│ Checksum │
└───────────────────────────────────────────────────────────────┘ Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
packet-beta
title Order event header
0-7: "Version"
8-15: "Flags"
16-31: "Length"
32-63: "Request ID"
64-95: "Order ID"
96-111: "Region"
112-127: "Event type"
128-159: "Checksum"
`, {
target: "chat",
width: 68
});
console.log(text); Narrow rows, overlapping/invalid ranges, inert config, and the 256-row limit produce render notes. Choose enough width for field names rather than relying on truncated labels.
Kanban lanes and cards
Section titled “Kanban lanes and cards”Indent cards under lanes. Metadata can include assigned person, ticket, and priority; it wraps between complete items. Card URLs remain inert.
Portal sprint
┌───────────────────────┐ ┌──────────────────────┐ ┌───────────────────────┐
│ Ready │ │ In progress │ │ Done │
├───────────────────────┤ ├──────────────────────┤ ├───────────────────────┤
│ ┌───────────────────┐ │ │ ┌──────────────────┐ │ │ ┌───────────────────┐ │
│ │ Search filters │ │ │ │ Team login │ │ │ │ Usage charts │ │
│ │ #241 · Mia · High │ │ │ │ #238 · Liam │ │ │ │ #235 · Mia │ │
│ └───────────────────┘ │ │ └──────────────────┘ │ │ └───────────────────┘ │
│ ┌───────────────────┐ │ │ ┌──────────────────┐ │ │ ┌───────────────────┐ │
│ │ Billing export │ │ │ │ Usage alerts │ │ │ │ Audit log │ │
│ │ #246 · Noah │ │ │ │ #243 · Ava │ │ │ │ #231 · Liam │ │
│ └───────────────────┘ │ │ └──────────────────┘ │ │ └───────────────────┘ │
└───────────────────────┘ └──────────────────────┘ └───────────────────────┘ Code
import { renderGlyphChartMermaid } from "@glyphcss/charts";
const { text } = renderGlyphChartMermaid(`
kanban
title Portal sprint
ready[Ready]
search[Search filters]@{ assigned: 'Mia', ticket: '241', priority: 'High' }
export[Billing export]@{ assigned: 'Noah', ticket: '246' }
doing[In progress]
login[Team login]@{ assigned: 'Liam', ticket: '238' }
alerts[Usage alerts]@{ assigned: 'Ava', ticket: '243' }
done[Done]
charts[Usage charts]@{ assigned: 'Mia', ticket: '235' }
audit[Audit log]@{ assigned: 'Liam', ticket: '231' }
`, {
target: "chat",
width: 78
});
console.log(text); Preserve indentation and place the title outside lane data. Narrow boards can wrap lanes onto additional rows; read report.ledger for changes. Omit height for content-driven fitting. For graph-shaped workflows, use flowcharts instead.