分享一套免费、开源的 MDX 文档组件集「mdxcn」：包含提示框、步骤、终端、图表和时间线等 Markdown 友好型组件，可通过 shadcn CLI 一条命令复制进项目使用。

纯野山参

分享一套免费、开源的 MDX 文档组件集「mdxcn」：包含提示框、步骤、终端、图表和时间线等 Markdown 友好型组件，可通过 shadcn CLI 一条命令复制进项目使用。

作者
@kshvbgde

官网 https://mdxcn.dev
开源 https://github.com/keshav-exe/mdxcn

写重构方案、事故复盘、PR 说明时，「一堵要点的 bullet 墙」读起来慢，而一张图扫一眼就懂。它的解法并不是引入 Mermaid 或 SVG 图表，是用纯字符（█ ░ - = + ├ └）画出带虚线边框、左上角 + 号包角、顶边标注 [ TITLE ] 的图表。

这个选择带来一个关键优势：图表就是纯文本。重新打开 MDX 文件时，标签和数值依然可读，Agent 也能像当初写它一样直接编辑这帧图：不依赖渲染器，不产生二进制资产。

视觉语法（强制约束）
· 字体 Geist Mono；边框一律虚线；明确禁用 SVG、Mermaid、Recharts、canvas，也禁止发明自制 ASCII 或饼图
· 单一强调色，通过 --graph-accent 注入；palette="duo"|"multi" 为显式 opt-in
· 动效仅限 opacity/transform、约 220ms、无循环无脉冲

最独特的设计：双轨交付
这是 mdxcn 区别于普通组件库的地方，它同时是「给人用的组件包」和「给 Agent 用的 Skills」：
1. 安装：pnpm dlx shadcn@latest add https://mdxcn.dev/r/all.json，源码落入 @/registry/default；skill 则装进 Agent 本来就会读取的目录
2. 工作流：装好 skill 后直接「要一份 write-up」→ 内置的 chooser（决策表）按写作目的和数据形态挑选图表（如事后复盘 → GraphTimeline + GraphUptime；前后数值对比 → GraphSlope）→ 从文档复制 props、替换标签即成
3. 纪律约束：每次最多两张图、图之间必须有正文、标题 1–2 个词全大写无标点、正文先于图出现

多宿主输出策略
同一张图针对不同目标输出不同格式，且规则明确：React/MDX 出 JSX；Comark 应用出 ::graph-* YAML 块；Knap 模板出 graph_* filter；而 Notion、Linear、README、GitHub 等纯 Markdown 场景直接贴官方围栏 ASCII。文档反复强调禁止错配，例如 ::graph-* 贴进 GitHub 不会渲染。