Markdown Viewer：让文档里自动画图更省事

其实这个情况你一定遇到过：

你在用 AI 写技术文档，前面写得都还顺，结果一到“系统架构如下”就突然卡住。

接下来就得切到别的工具。

去制图软件里拖拽方框、连线、调对齐，导出 PNG，再把图片重新放回 Markdown。改动一个节点，还要从头来一遍。

Markdown Viewer 做的事情很直观：尽量把这一步交回 AI 编程助手里完成。

也就是说，文档写到哪里，图就跟到哪里自动生成。

它并不是只给你一个 Mermaid 的示例，而是打包成一套技能体系，内置 14 项更偏专业的绘图能力。

常见图类型像架构图、流程图、工作流图、状态图、部署图、类图、用例图都能覆盖到。

更进一步的是，多个技能组合后，能够产出上百种图表样式。

对写技术方案、README、接口说明、系统设计文档的人来说，这种体验很有杀伤力。

以前很多人会让 AI 先写一段文字说明，然后再自己动手去画图。

现在可以换个思路。

你可以直接让 AI：“把这个登录流程画成状态图”“把这套微服务做成部署图”“把业务链路整理成工作流图”。

随后它会在 Markdown 中直接生成图表所需的代码。

接着由 Markdown Viewer 负责把它渲染出来。

其中比较实用的一点，是它不仅支持单一的渲染方案。

项目介绍里提到支持 PlantUML、Vega 等五大主流渲染引擎。

这样就不只是适配某一种图表语法了。

比如工程师常用的类图、时序图、部署图，用 PlantUML 往往更顺手。

如果是数据可视化、统计类图表、复杂信息展示，Vega 这一类引擎就更合适。

你不用为了不同类型的图，在多个软件之间反复切换。

它还有一个小功能也挺适合公众号、周报、项目展示：能够直接输出带排版的 HTML 信息卡片。

这听起来不算特别“硬核”，但落地时很方便。

很多时候我们并不是缺内容，而是缺少一种不那么“毛坯”的呈现方式。

尤其是开源项目介绍、技术方案摘要、产品功能卡片：纯 Markdown 太朴素，PPT 又显得太重。

HTML 信息卡刚好处在中间的位置。

安装流程也更照顾 AI Coding 用户。

项目提供了一键安装指令，兼容 Claude Code、Codex、Cursor 等常见 AI 编程工具。

这一点很关键。

它不是让你再去学一套全新的工具，而是把能力挂到你已经在用的 AI 编程环境里。

写文档、改代码、补图表，尽量都在同一个上下文中完成。

我觉得它最适合三类人。

第一类是经常要写技术文档的开发者。

第二类是维护开源项目 README 的作者。

第三类则是做方案、写汇报、发布技术博客的人。

它不会替你把架构想清楚。

但能把“想清楚之后把它画出来”这一步变得更轻松。

做到这里其实就已经够用了。

毕竟很多文档并不是卡在不会写，而是卡在图片制作太麻烦。

项目地址：markdown-viewer/skills