Paperchart Pack Layout

paperchart — pack layout

A one-page explanation of a binary format. Three stacked panels:

1. Proportional section bar. Horizontal strip, each section sized by its share of the total. The accented section is the one the reader should think about.
2. Bit-level header breakdown. Eight boxes, one per bit. Type bits get the accent; length bits stay neutral. Each group has a caption naming it and a sub-caption explaining the encoding.
3. Entry layout, left to right. The anatomy of a single record in the format, with a bold name and a monospace sub-line for each field.

When to use

• Documenting a custom wire format.
• Explaining a varint / tag / length encoding.
• Showing how a packed index, page, or block is laid out in storage.

Visual rules

• Proportional section bar has the accented section filled with #C75F3C, others with #D6B99B. Inside the accent, the foreground text flips to the page background (#F6F1EA) for contrast.
• Bit boxes use a fixed 110 px square with 12 px gaps; the letters are 48 px / 600 for legibility.
• The full entry strip uses the same two colours; the first field (header byte) is always accented because it drives everything after it.

How to use

1. Edit src/charts/PackLayout.tsx.
2. Replace SEGMENTS with your sections; replace the eight-bit array in the header panel; replace the five-field entry strip at the bottom.
3. npm run dev, open /#/pack-layout.
4. npm run snap to render to out/pack-layout.png.