作者
@kshvbgde
官网 https://mdxcn.dev
开源 https://github.com/keshav-exe/mdxcn
写重构方案、事故复盘、PR 说明时，「一堵要点的 bullet 墙」读起来慢，而一张图扫一眼就懂。它的解法并不是引入 Mermaid 或 SVG 图表，是用纯字符（█ ░ - = + ├ └）画出带虚线边框、左上角 + 号包角、顶边标注 的图表。
这个选择带来一个关键优势：图表就是纯文本。重新打开 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 不会渲染。