Markdown Viewer：让 AI 写文档时，顺手把图也画了

真正让我停了一下的，是它把图表这件事放回了 Markdown 里。

平时用 AI 写技术文档，最容易断掉的地方往往不是文字。文字可以让 Claude、Codex、Cursor 帮你补，接口说明可以生成，部署步骤也能整理。

但一到流程图、架构图、状态图，节奏就变了。

你得切到画图工具里，拖框、连线、改颜色，再导出图片，塞回文档。中间只要需求改一次，图也要重新修一遍。文档本来是连续写下去的，到了这里突然被打断。

Markdown Viewer 想处理的就是这个断点。

它不是让 AI 只生成一段 Mermaid 代码，然后丢给你自己想办法预览。它提供了一组面向 AI 编程助手的绘图技能，让助手可以直接在 Markdown 里生成更专业的可视化内容。

项目里内置了 14 个专业绘图技能。

能画的东西不少：架构图、流程图、工作流图、状态图、部署图、类图、用例图，还有很多更细分的图表类型。

我更在意的是，这些图不是孤零零存在的。

技术文档里最麻烦的地方，是文字、代码、图之间经常要来回对齐。比如你刚让 AI 写完一个服务调用流程，接着说“根据上面的内容补一张流程图”，它如果能直接在同一个 Markdown 文件里完成，这个工作流就顺了很多。

不需要把上下文复制到别的地方。

不需要另开一个图表编辑器。

也不需要每次改完文档，再手动同步图片。

Markdown Viewer 支持 PlantUML、Vega 等五大主流渲染引擎。这个选择挺现实。

因为技术文档里的图并不只有一种形态。

有些适合用 PlantUML 画结构关系，有些适合用 Vega 做数据可视化，有些只是需要一张清楚的流程图。把渲染引擎接进来，AI 生成的就不只是“能看”的图，而是更接近正式文档里能放进去的图。

它还支持输出 HTML 信息卡片。

这个功能看起来有点偏展示，但放在 README、项目介绍页、方案说明里很常见。很多时候你不是只想画一张图，而是想把一段信息包装成更容易看的卡片：标题、数据、步骤、重点说明，都在一个排版里。

这比让 AI 生成一坨 Markdown 表格要舒服一些。

安装方式也没有绕很远。

项目提供了一键安装指令，目标也很明确：Claude Code、Codex、Cursor 这类 AI 编程工具。也就是说，它不是一个单独拿来玩的画图 App，而是想直接塞进开发者现有的 AI 工作流里。

这个定位很重要。

现在很多人已经习惯让 AI 写代码、改 README、补接口文档，但图表还停在半手工阶段。Markdown Viewer 做的事情，就是把“生成图”变成 AI 写文档时的一个自然动作。

你写到系统架构，就让它补架构图。

写到状态流转，就让它补状态图。

写到部署方案，就让它补部署图。

改了文字，再让它顺手改图。

我觉得它最适合的场景，不是做一张特别精致的汇报图，而是那些每天都会出现的工程文档：README、设计文档、接口说明、内部方案、上线流程、排障手册。

这些文档不一定需要多漂亮，但图一定要跟内容对得上。

Markdown Viewer 把这件事往前推了一步。

它让 AI 写技术文档时，不再只负责“写”，也能顺手把那些原本会打断人的图补上。

GitHub地址：markdown-viewer/skills