苏米注：技术文档里插图表一直是件麻烦事。这套 Skills 让 AI 直接在 Markdown 里生成各类图表，不需要切换工具，用自然语言描述需求就行。今天我来详细拆解这 15 个 Skills 的使用场景。
一、仓库概况
这套 Skills 来自 GitHub 仓库 markdown-viewer/skills，给 Claude、Cursor、Copilot 等 AI 编码助手提供图表生成能力。
- 15 个 Skills，对应 7 种渲染引擎
- 遵循 Agent Skills 标准格式，包含使用说明、语法示例和最佳实践
- AI 根据自然语言描述，自动选择合适引擎生成图表代码
苏米注：这个分层设计让每种场景都有最优解，而不是一个引擎硬扛所有需求。
二、7 种渲染引擎详解
1. Mermaid：流程图和基本图表
Mermaid 是最常用的 Skill，支持 14 种以上图表类型：
- 流程图、序列图、状态机图
- 甘特图、饼图、ER 图
- 思维导图等
优势：语法简洁，生态成熟，GitHub 和 Typora 等主流平台原生支持渲染。
典型场景：用户登录流程、服务交互时序图、项目进度甘特图
2. Vega：数据可视化
Vega 是数据驱动的声明式可视化语法，专注数据呈现：
- 柱状图、折线图、散点图
- 热力图、雷达图、词云
- 支持交互式图表（缩放、筛选、tooltip）
苏米注：如果手头有销售数据或性能指标需要生成可视化报告，Vega 是首选，输出质量可达专业 BI 工具水平。
3. Infographic：信息图和 KPI 卡片
提供 70 多个预设模板：
- KPI 卡片、时间线
- SWOT 分析、漏斗图
- 组织架构树等
定位：快速产出，设计风格统一，可直接用于正式报告。
适用场景：产品经理竞品分析、运营数据汇报、技术负责人季度总结
4. Canvas：空间图和知识图谱
用于绘制空间节点图、思维导图、知识图谱和规划板。
特点：支持自由布局，节点可放在任意位置，适合表达非线性的空间关系。
典型应用：技术选型决策图谱、项目规划思维导图
5. Graphviz：复杂依赖关系
擅长处理复杂的有向图和无向图：
- 模块依赖关系
- 函数调用链
- 包引用图
优势：成熟的自动布局算法（dot、neato、fdp 等），能自动计算节点位置，避免边交叉。
6. Architecture：分层架构图
HTML/CSS 嵌入式 Skill，专门画架构图：
- 13 种布局方式
- 12 种样式主题
- 支持颜色编码的分层展示
苏米注：画微服务架构图时，可以从上到下分出接入层、服务层、中间件层、数据层，每层用不同颜色区分，比纯 Mermaid 更清晰，比 Draw.io 手动拖拽快得多。
7. Infocard：信息卡片
HTML/CSS 嵌入式 Skill，提供 13 种布局和 14 种样式：
- 信息卡片、知识总结
- 数据高亮展示、活动公告
与 Infographic 的区别：Infocard 偏向单卡片或少量卡片的精致排版，适合知识点摘要、功能介绍、版本更新公告。
三、PlantUML 系列：8 个企业级 Skills
PlantUML 是这套 Skill 里最重的部分，覆盖 8 个方向：
1. UML 基础
14 种 UML 图类型 + 9500 多个图标库：
- 类图、序列图、用例图
- 活动图、组件图、部署图
- 对象图、状态图等
应用场景：系统设计、技术方案评审、领域模型建模
2. Cloud：云架构图
AWS、Azure、GCP、Kubernetes 的云架构图标集：
- S3 存储、Lambda 函数
- API Gateway、EKS 集群
适用场景：云上部署架构设计
3. Network：网络拓扑图
包含 Cisco 设备图标：
- 路由器、交换机
- 防火墙、负载均衡器
适用人群：网络工程师做拓扑文档
4. Security：安全架构建模
包括威胁模型和零信任架构：
- 用 STRIDE 模型标注每个组件的威胁面
- 标注信任边界和数据流向
应用场景：安全评审、威胁分析
5. ArchiMate：企业架构
企业架构分层建模语言：
- 业务架构
- 应用架构
- 技术架构
适用场景：三层对齐分析
6. BPMN：业务流程建模
画端到端的业务流程：
- 标注网关、事件、子流程
- 集成模式
7. Data Analytics：数据管道建模
覆盖 ETL 流程、数据仓库分层、机器学习工作流：
- 从数据采集到最终报表的完整链路
8. IoT：物联网架构
包含传感器、网络、边缘计算、数字孪生等组件：
- 从设备端到云端的全链路建模
四、安装和使用
一键安装（推荐）
npx skills add markdown-viewer/skills支持 Claude Code 和 Cursor。装完后 AI 工具自动识别这些 Skills。
其他安装方式
- 手动复制 Skills 文件夹到对应目录
- 在项目的.github/skills/路径下放置 Skills（GitHub Copilot 自动识别）
- 直接把 SKILL.md 内容复制粘贴给 AI
图表渲染平台
生成后的图表可在以下平台直接显示：
- GitHub（Mermaid 原生支持）
- Typora
- Notion
- 微信公众号 Markdown 编辑器
踩坑记录：Mermaid 兼容性最广，PlantUML 部分平台需要插件支持。
五、适用人群
| 角色 | 推荐 Skills | 典型场景 |
|---|---|---|
| 开发者 | Mermaid、PlantUML UML | 技术方案、类图、序列图 |
| 架构师 | ArchiMate、Cloud、Security | 企业级系统设计、安全评审 |
| 数据分析师 | Vega、Infographic | 数据图表、KPI 仪表盘 |
| 产品/运营 | Canvas、Infocard、时间线 | 需求梳理、竞品分析、功能介绍 |
| 技术文档作者 | 全部 | 文档图表统一管理、版本控制 |
六、总结
这套 Skills 解决的核心问题是降低专业图表的产出门槛：
- 以前画一张像样的架构图可能要半小时
- 现在用自然语言描述需求，AI 十几秒就能生成
- 让技术文档里的图表不再是可有可无的装饰，而是随内容同步更新的标配