# markdown graphs

ASCII-framed React diagrams for MDX. Source is copied via shadcn registry, not npm.
https://mdx-graphs.kshv.me

## Rules

- Geist Mono. Dashed frame, + corners, title as [ TITLE ].
- Charts are made of characters (█ ░ - = + ├ └). Borders are dashes. Do not use SVG, Recharts, or canvas.
- One accent: --graph-accent. palette="duo" | "multi" is opt-in.
- Motion is opacity and transform, ~220ms, no loops, no pulsing.
- Copy the example props exactly. Do not invent extra hues or chart libraries.

## Install

pnpm dlx shadcn@latest add https://mdx-graphs.kshv.me/r/<slug>.json

Files land under @/registry/default.

## Chooser

| Component | Slug | Use for | Not for |
| --- | --- | --- | --- |
| GraphTable | graph-table | Good when the numbers belong in a spreadsheet. | Bars, rankings, and sparklines have their own components. |
| GraphFlow | graph-flow | Good for a pipeline or a path through a system. | A dated list is Timeline. A schedule with start and end is Gantt. |
| GraphBars | graph-bars | Good for a before and after, or any two small histograms. | A ranked list is Rank. |
| GraphRank | graph-rank | Good for traffic, coverage, or anything you'd sort highest first. | Two histograms side by side is Bars. A table of numbers is Table. |
| GraphCells | graph-cells | Good for a small grid of filled and empty cells. | A share of a hundred cells is Waffle. A year of days is Activity. |
| GraphMeter | graph-meter | Good for one value between 0 and 1, shown as a fill. | Actual versus a target is Bullet. Parts of a whole is Stack. |
| GraphSpark | graph-spark | Good for a handful of numbers when you don't need an axis. | If you need a y-scale, use Plot. |
| GraphTree | graph-tree | Good for nested files or an org chart. | A timeline or a table. |
| GraphTimeline | graph-timeline | Good for dated events, with one of them marked current. | A schedule with start and end dates is Gantt. |
| GraphStack | graph-stack | Good for parts of a whole on one track. | There is no pie chart. Use Waffle if you want a share of cells. |
| GraphFunnel | graph-funnel | Good for steps that get narrower as people drop off. | A ranked list is Rank. A process diagram is Flow. |
| GraphGantt | graph-gantt | Good for items with a start and end on a shared track. | A dated log is Timeline. |
| GraphPlot | graph-plot | Good when the series needs a y-scale. | A handful of points with no axis is Spark. |
| GraphWaffle | graph-waffle | Good for a share shown as a grid of about a hundred cells. | Labeled parts of a whole is Stack. |
| GraphDiff | graph-diff | Good for rows that were added, removed, or kept. | A list of numeric before and after is Slope. |
| GraphInvoice | graph-invoice | Good for from, bill-to, line items, and totals. | A generic table is Table. |
| GraphCompare | graph-compare | Good for a feature matrix with checks and dashes. | Numeric ranks are Rank. |
| GraphStat | graph-stat | Good for two to four large numbers, with no sparkline. | One number with a trend is KPI. A live clock is Timer. |
| GraphKpi | graph-kpi | Good when one number is the headline and the rest is context. | Several numbers with no trend is Stat. |
| GraphSpec | graph-spec | Good for aligned label and value rows, like a spec sheet. | Large headline numbers are Stat. A table with headers is Table. |
| GraphActivity | graph-activity | Good for daily counts over months, like a contribution grid. | One month of marks is Calendar. Up or down days is Uptime. |
| GraphHeatmap | graph-heatmap | Good for a labeled grid of intensities. | A contribution calendar is Activity. |
| GraphCalendar | graph-calendar | Good for one month with a few days marked. | A year of activity is Activity. |
| GraphWaterfall | graph-waterfall | Good for a running total as floating bars. | Parts of a whole is Stack. |
| GraphUptime | graph-uptime | Good for a status per day: ok, degraded, down, or empty. | A heatmap or an activity grid. |
| GraphSlope | graph-slope | Good for a before and after number on each row. | Two bar groups is Bars. A ranked list is Rank. |
| GraphBullet | graph-bullet | Good when a number has a goal sitting on the same track. | A single fill from 0 to 1 is Meter. |
| GraphTimer | graph-timer | Good for uptime, last deploy, or a clock in the corner. | Time left until a date is Countdown. A static number is Stat. |
| GraphCountdown | graph-countdown | Good for a freeze, a launch, or a window that closes. | Elapsed time since a start is Timer. |