Data table diagrams

Best for reference data — anything that’s naturally rows and columns. There’s no special keyword: a standard GitHub-Flavored Markdown table renders as a table card.

| Plan       | Seats  | Price/mo | Support   |
| ---------- | -----: | -------: | :-------: |
| Free       |      1 |       $0 |     —     |
| Pro        |     10 |      $49 |   Email   |
| Business   |     50 |     $199 |  Priority |
| Enterprise | Custom |   Custom | Dedicated |

A header row, a delimiter row, then the data rows — the usual Markdown table. Leading and trailing pipes are optional, and \| escapes a literal pipe inside a cell.

• Alignment comes from the delimiter row: --- (default), :--- (left), :---: (center), ---: (right). Above, the numeric columns are right-aligned and Support is centered.
• Column type is inferred from the cells — numeric columns right-align and render in a tabular figure style automatically.
• Nothing is fatal: a short row is padded with empty cells and an over-long one is truncated to the header’s column count, so a table never fails to render.

Titling a table

A table has no in-fence title line, so to give it a heading add a vizzy fence immediately below it. The id-less title and desc forms label the card as a whole — title is the heading, desc a subtitle beneath it:

| Month | Region | Revenue | Deals | Close % |
| ----- | ------ | ------: | ----: | ------: |
| Jan   | EMEA   |   5,000 |    42 |     31% |
| Feb   | EMEA   |   6,000 |    51 |     34% |

```vizzy
title Q2 revenue by region
desc Monthly revenue, deals closed, and close rate — sortable and filterable.
```

The fence binds to whatever block sits directly above it, so place it right after the table it describes — not at the bottom of a file that holds several diagrams.

Conditional cell colors

cellstyle rules color-code body cells by content, so enums, tags, and statuses read at a glance without styling rows one by one — and because they match content rather than row numbers, they keep working when rows are added, reordered, sorted, or filtered:

| Service | Status    | Latency |
| ------- | --------- | ------: |
| api     | Done      |     250 |
| web     | In Review |      45 |
| db      | Blocked   |     120 |

```vizzy
cellstyle Status = Done: green
cellstyle Status = Blocked: red
cellstyle Status contains review: blue
cellstyle Latency > 200: orange
cellstyle Latency < 50: mint
```

The rule form is cellstyle <header> <op> <value>: <color>:

• <header> names the column by its header text — case-insensitive, spaces allowed.
• <op> is = (exact match) or contains (substring), both case-insensitive, or > / < for numbers. Numeric comparisons parse cells the way sorting does ($1,200, 85%, and +3 all compare as numbers); a cell that isn’t a number never matches.
• <color> is a palette token (green, red, blue, …) or a #hex value, drawn as a subtle wash behind the matching cell in both light and dark mode.

Per cell, the first matching rule wins in fence order, so put the most specific rule first. Quote a value that contains a colon: cellstyle Time = "12:30": mint.

Pinning column widths

tablewidths sets fixed pixel widths per column instead of leaving them auto-sized:

| Service | Status    | Latency |
| ------- | --------- | ------: |
| api     | Done      |     250 |
| web     | In Review |      45 |
| db      | Blocked   |     120 |

```vizzy
tablewidths 200 120 100
```

The rule form is tablewidths <w1> <w2> …, values in source-column order:

• <w1> <w2> … — a width in pixels for each column, left to right.
• Extra values beyond the column count are harmless and ignored.
• Missing values leave the remaining columns auto-sized as usual.