用AI写技术文档再也不怕画图了:让AI真正能画技术图表,而不是瞎编造图片

AI画不好图表，缺的是这个工具

01 一个让所有技术人抓狂的场景

你让AI画一个系统的架构图。

要么是AI生图的图片，华而不实，还容易出错；

要么没有专业规范，生成了语法错误的uml图。

这是AI时代最大的荒诞之一：AI能写代码，却画不出一张专业的技术架构图。

02 问题的本质：AI画图差在哪？

图表创作有三个环节：

1. 1. 意图压缩：留什么，把脑子里复杂的理解，压成刚好够用的关键字
2. 2. 符号共识：同一套视觉语言（UML是软件工程师的「行话」）准确表达图形
3. 3. 渲染引擎：把符号描述变成像素

markdown-viewer/skills 这个项目，很好地解决了技术图的绘制问题。

03 这个项目是什么？

markdown-viewer/skills^[1] 提供 14种专业图表生成技能。

核心能力：

• • 9种PlantUML技能：UML类图、云架构、网络拓扑、安全架构、ArchiMate、BPMN、数据分析、IoT、思维导图
• • 3种独立引擎：Vega数据图表、信息图、Canvas空间图
• • 2种HTML/CSS技能：系统架构图、信息卡片

数据：

• • GitHub 1.6k ⭐️
• • 覆盖5种渲染引擎
• • 9500+ mxgraph图标（AWS/Azure/GCP/Cisco/Kubernetes全包含）

04 它能画什么？（图片演示）

云架构图

用自然语言描述需求，AI就能生成专业的AWS/Azure/GCP多云架构图

UML时序图

14种UML图表类型，9500+专业图标，说一句话就能生成。

思维导图

层级清晰，适合技术选型、头脑风暴、知识整理。

系统架构图

13种布局 × 12种风格，分分钟出设计稿级别的架构图。

以上插图就是AI调用这个技能直接生成的

05 工作原理

用户描述需求    ↓AI编码代理加载对应技能（skill）    ↓技能告诉AI：  - 用什么符号体系（UML/AWS/行业标准）  - 怎么组织信息（意图压缩的判断框架）  - 用什么语法（PlantUML/Vega/HTML）    ↓输出正确的图表代码    ↓Markdown Viewer渲染成SVG/HTML

06 为什么重要？

07 快速上手

# 安装npx skills add markdown-viewer/skills# 或手动安装（Claude Code）cp -r skills/<skill-name> ~/.claude/skills/

然后用自然语言告诉AI要画什么，AI生成markdown

用 Markdown Viewer^[2] 打开，自动渲染。

08 结论

Makrdown Viewer Skill是配套markdown viewer的技术图表AI工具

项目地址：https://github.com/markdown-viewer/skills 

引用链接

[1] markdown-viewer/skills: https://github.com/markdown-viewer/skills[2] Markdown Viewer: https://docu.md