mdxcn README

The project's README from github.com/shadcn-labs/mdxcn. As one markdown file: README.md.

markdown graphs

React components for ASCII-style tables, charts, and diagrams in MDX. Built so an agent can drop a figure next to prose — JSX in MDX, ::graph-* in Comark, official ASCII in a README. Each graph sits in a dashed frame with a title on the top edge. One accent color by default; drawing graphs can take palette="duo" or palette="multi". You copy the source into your project — this is not an npm package.

Docs · Comark · For agents · Examples · Install · Skill · GitHub

Install

You need an existing shadcn project and motion.

Scoped registry (same idea as @dotmatrix/dotm-square-3):

pnpm dlx shadcn@latest registry add @mdx-graphs=https://mdx-graphs.kshv.me/r/{name}.json
pnpm dlx shadcn@latest add @mdx-graphs/graph-table
pnpm dlx shadcn@latest add @mdx-graphs/all

Or paste the full URL once:

pnpm dlx shadcn@latest add https://mdx-graphs.kshv.me/r/graph-table.json
pnpm dlx shadcn@latest add https://mdx-graphs.kshv.me/r/all.json

components.json after registry add:

{
  "registries": {
    "@mdx-graphs": "https://mdx-graphs.kshv.me/r/{name}.json"
  }
}

Files land under @/registry/default. Import from there:

import { GraphTable } from "@/registry/default/graph-table/graph-table"

Components

Component Registry item Use for
Table graph-table Data tables with optional footer totals
Sheet graph-sheet Tables with section titles
Flow graph-flow Process diagrams on a dashed arrow
Bars graph-bars Two bar groups, side by side
Cells graph-cells Filled / empty grids
Meter graph-meter Progress as = and -
Spark graph-spark Sparkline from block characters
Tree graph-tree File or org trees
Timeline graph-timeline Dated events, one row current
Check graph-check Punch list, [x] / [ ]
Stack graph-stack Parts of a whole, glyphs instead of colors
Funnel graph-funnel Steps that get narrower
Gantt graph-gantt Schedule on a character track
Plot graph-plot Line or area from columns of glyphs
Waffle graph-waffle Share of 100 cells
Diff graph-diff Add / remove / keep rows
Invoice graph-invoice From, bill-to, line items, totals
Compare graph-compare Feature matrix (✓ / –)
Matrix graph-matrix Exact numbers on both axes
Stat graph-stat Large figures with labels
Spec graph-spec Label / value sheets
Activity graph-activity GitHub-style contribution grid
Heatmap graph-heatmap Labeled 2d intensity matrix
Calendar graph-calendar One month, marked days
Waterfall graph-waterfall Running total as floating bars
Uptime graph-uptime One glyph per day, percent up
Slope graph-slope Two figures per row, before → after
Bullet graph-bullet Actual versus target on one track
Rank graph-rank A ranked list, one bar per row
KPI graph-kpi One number with a sparkline under it
Timer graph-timer Elapsed time, how long ago, or the clock
Countdown graph-countdown Time left until a date
Frame graph-frame Shared dashed frame primitives

Each docs page has CLI, manual, agent, MDX, and Comark install tabs. Copy page puts the markdown (install, prompt, examples, props) on the clipboard.

Comark apps render the same figures from ::graph-* blocks in a plain .md file — no MDX. Copy graph-comark (already in all.json). Full install: graphComponents from graph-components.tsx. Subset: createGraphComponents. Wiring: Comark. Pitch: Comark landing.

Composed write-ups (refactor, incident, tradeoff, PR, sprint, migration) live on Examples. For agents is the write and read story. The skill tells an agent which graph to put next to the prose — JSX in React, ::graph-* in Comark, fenced ASCII in GitHub. Agents can also fetch /llms.txt for the chooser, the ASCII blocks, and the Comark blocks.

Design

Development

pnpm install
pnpm dev

Rebuild the shadcn registry after changing files under registry/default:

pnpm registry:build

License

MIT

mdxcn (shadcn-labs/mdxcn)

Searching Database…

441 ·GitHub
Mdxcn
Что это?mdxcn — бесплатный опенсорсный набор React-компонентов в ASCII-стиле — таблицы, графики, таймлайны, флоу и другое — созданный, чтобы стоять рядом с текстом в MDX или обычном Markdown; он рассчитан на копирование в ваш проект, а не установку как пакет.
Это npm-пакет для установки или код нужно скопировать самому?Это не npm-пакет. Вы добавляете отдельные компоненты (элементы реестра вроде graph-table, graph-flow, graph-timeline) в свою кодовую базу через shadcn CLI, который копирует файлы исходников прямо в ваш проект.
Как добавить эти графовые компоненты в свой проект?Запустите shadcn CLI со scoped-реестром mdxcn (или вставьте полный URL реестра), чтобы добавить компонент — он положит файлы в @/registry/default, а после изменений выполните `shadcn build` для пересборки реестра.
Что нужно перед установкой компонента?Нужен уже настроенный shadcn-проект плюс установленный пакет motion, поскольку компоненты используют Motion для переходов transform/opacity.
Можно ли использовать эти графики вне MDX/React?Да — приложения Comark могут отрисовывать те же фигуры из простых блоков `::graph-` в обычном .md-файле без всякого MDX, а форму fenced-ASCII можно даже вставить в обычный GitHub README.
Сколько типов графиков включено?Более 30 компонентов «из коробки» — например, Table, Flow, Bars, Timeline, Gantt, Heatmap, Waterfall, Rank, KPI и Countdown — каждый перечислен в README со своим именем в реестре и типичным применением.
Почему ASCII, а не SVG-графики?Каждый график намеренно нарисован моноширинными глифами внутри пунктирной рамки Geist Mono вместо SVG, что делает фигуры лёгкими и визуально согласованными с окружающим кодом или текстом.
Что такое Comark?Comark — это markdown-инструментарий, который mdxcn тоже поддерживает: он отрисовывает те же фигуры из fenced-блоков `::graph-` в обычных .md-файлах, чтобы их могли показывать и не-MDX markdown-приложения.
Как это используют кодинг-агенты?mdxcn поставляет скилл и endpoint /llms.txt, которые подсказывают агенту, какой график разместить рядом с текстом, покрывая JSX для MDX, синтаксис ::graph- для Comark и fenced ASCII для обычных GitHub README.
What are similar projects?arc-library, magicui, Monocharts, canvas-ui, rare-ui, tremor-npm, ascii, open-intelligent-ui
Which topics is it in?ascii-art, shadcn, diagrams, mdx, ui-library, charts, component-library, data-visualization, design, nextjs, ui-components, animation
Creator
shadcn-labs
Size
2.6 MB
Stars
441
Updated
CommitOct 15
Age
1mo
Commits · 90 Days