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…

436 ·GitHub
Mdxcn
这是什么？mdxcn 是一套免费开源的 ASCII 风格 React 组件——表格、图表、时间线、流程图等等——用来与正文并排出现在 MDX 或纯 Markdown 中，设计上是被复制进你自己的项目，而不是作为包安装。
这是我要安装的 npm 包，还是把代码复制进去？它不是 npm 包。你使用 shadcn CLI 把单个组件（graph-table、graph-flow、graph-timeline 这类 registry 项）添加到自己的代码库里，CLI 会把源文件直接复制进你的项目。
我怎么把这些图表组件添加到我的项目里？运行 shadcn CLI 指向 mdxcn 的 scoped registry（或粘贴完整的 registry URL）来添加组件——它会把文件放到 @/registry/default 下；改动之后你要运行 `shadcn build` 重新构建 registry。
安装组件之前我需要准备什么？你需要一个已经配置好的 shadcn 项目，并安装 motion 包，因为这些组件使用 Motion 来实现变换/透明度过渡。
我能在 MDX/React 之外使用这些图表吗？可以——Comark 应用可以从普通 .md 文件里的纯 `::graph-` 代码块渲染同样的图形，完全不需要 MDX；围栏 ASCII 形式甚至可以直接放进纯 GitHub README。
包含多少种图表类型？开箱即用的组件超过 30 个——比如 Table、Flow、Bars、Timeline、Gantt、Heatmap、Waterfall、Rank、KPI 和 Countdown——README 里逐一列出了它们的 registry 名称和典型用途。
为什么用 ASCII 而不是 SVG 图表？每个图表都刻意用等宽字符绘制在虚线的 Geist Mono 边框内，而不是 SVG，让图形保持轻量，并与周围的代码或正文在视觉上保持一致。
Comark 是什么？Comark 是 mdxcn 同样支持的一类 Markdown 工具，它从普通 .md 文件里的 `::graph-` 围栏代码块渲染同样的图形，让非 MDX 的 Markdown 应用也能显示它们。
编程智能体怎么使用它？mdxcn 提供一个技能和一个 /llms.txt 端点，告诉智能体应该在正文旁边放置哪种图表，涵盖 MDX 用的 JSX、Comark 用的 ::graph- 语法，以及纯 GitHub README 用的围栏 ASCII。
What are similar projects?arc-library, magicui, Monocharts, canvas-ui, rare-ui, tremor-npm, ascii, chakra-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
436
Updated
CommitOct 15
Age
1mo
Commits · 90 Days