mdxcn offers open-source MDX diagram components installable via shadcn CLI
Because the diagrams are plain text, agents can re-edit them later just as they wrote them, with no renderer or binary assets involved. Developers writing postmortems, refactor plans or PR notes can add the skill, request a write-up, and get a chart picked by the decision table in seconds. Compared with Mermaid or Recharts, this stays legible in any Markdown host, though the strict rules — max two charts per piece, no pie charts, Geist Mono only — demand discipline.
mdxcn is a free, open-source MDX documentation component set by developer kshvbgde, available at mdxcn.
dev and on GitHub.It includes callouts, steps, terminal blocks, charts and timelines rendered as pure ASCII text using characters like █, ░ and box-drawing symbols, explicitly banning SVG, Mermaid and canvas.
Components install via one shadcn CLI command, and the same diagram can be output as JSX for React/MDX, YAML blocks for Comark apps, or fenced ASCII for GitHub, Notion and README.
The set also ships as Skills for AI agents, with a built-in chooser that selects a chart type such as GraphTimeline or GraphSlope based on the writing purpose.
分享一套免费、开源的 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 ⚡
This report is categorized under AITOP's "How-to" desk, focusing on US frontier AI labs and Silicon Valley technology leaders. Within our cross-regional analytical framework, it directly maps to AI developer toolchains, coding agents, and engineering workflows and US-China foundation model benchmarks and commercialization comparison. Key entities and technical topics under continuous tracking include mdxcn, shadcn, MDX, agents.
Source attribution: curated from shao__meng (@shao__meng). Cross-source corroboration: 4 independent sources have covered this development (including kimmonismus, Claude, Simon Willison’s Weblog), confirming industry-wide signal strength.
