compare
GraphCompare
Two options side by side. Write a markdown table; `yes`/`no` become ✓ and –. Exact numbers on both axes are Matrix.
plans
SoloStudio
- Registry✓✓
- Accent picker✓✓
- Private source–✓
- Price$0$24
MDX
```
+------------------- [ PLANS ] --------------------+
| |
| | Solo | Studio |
| ---------------+------+------- |
| Registry | ✓ | ✓ |
| Accent picker | ✓ | ✓ |
| Private source | – | ✓ |
| Price | $0 | $24 |
| |
+--------------------------------------------------+
```install
command
before after
MermaidSVGThis
- Source.md.svg.tsx
- In git✓–✓
- Themable––✓
MDX
```
+------------------- [ RENDER ] -------------------+
| |
| | Mermaid | SVG | This |
| ---------+---------+------+----- |
| Source | .md | .svg | .tsx |
| In git | ✓ | – | ✓ |
| Themable | – | – | ✓ |
| |
+--------------------------------------------------+
```| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| columns | string[] | "Solo Studio" | — | Option names across the top. |
| rows | CompareRow[] | — | label plus one value per column. Booleans become ✓ or –. Optional when children are Markdown. |
| children | Markdown | — | | | Solo | Studio | | --- | --- | --- | | Registry | yes | yes | |
| accent | string | — | Column name to highlight. Other columns recede. |
| palette | "mono" | "duo" | "multi" | "mono" | mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |