开源 MDX 组件集 mdxcn：纯字符画图表，Agent 可直接编辑
写重构方案、事故复盘别再堆 bullet 列表了，这套 ASCII 图表组件源码就是纯文本，Agent 也能直接改，一条 shadcn 命令装好。
开源组件集 mdxcn 提供提示框、步骤、终端、时间线等 MDX 组件，通过 shadcn CLI 一条命令复制进项目。它的图表用纯 ASCII 字符（█ ░ ├ └）绘制，明确禁用 SVG、Mermaid、Recharts 和 canvas，保证图表始终是可编辑的纯文本。项目采用双轨交付：既是给人用的组件包，也是给 Agent 用的 Skills，内置 chooser 决策表按写作目的选图，如复盘选 GraphTimeline、前后数值对比选 GraphSlope。同一张图支持多宿主输出：React/MDX 出 JSX，Comark 应用出 ::graph-* YAML 块，GitHub 和 Notion 等纯 Markdown 场景直接贴 ASCII 围栏。
分享一套免费、开源的 MDX 文档组件集「mdxcn」：包含提示框、步骤、终端、图表和时间线等 Markdown 友好型组件，可通过 shadcn CLI 一条命令复制进项目使用。 作者 @kshvbgde 官网 mdxcn.dev 开源 github.com/keshav-exe/mdx… 写重构方案、事故复盘、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 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 不会渲染。 Shadcn Labs @shadcnlabs wtf this is crazy: mdxcn.dev 🔗 View Quoted Tweet 💬 1 🔄 0 ❤️ 0 👀 354 📊 1 ⚡
