# 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

Use absolute bit ranges; fields wrap across 32-bit rows with shared sharp borders. Vertical row keys show ascending decimal offsets.



```mermaid
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"
```

```text
                         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                            │  
 └───────────────────────────────────────────────────────────────┘  
```



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

Indent cards under lanes. Metadata can include assigned person, ticket, and priority; it wraps between complete items. Card URLs remain inert.



```mermaid
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' }
```

```text
                                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       │ │
│ └───────────────────┘ │  │ └──────────────────┘ │  │ └───────────────────┘ │
└───────────────────────┘  └──────────────────────┘  └───────────────────────┘
```



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](/diagrams/flowcharts/) instead.