Claude Code 一句话生成专业图表！这个 Skill 把 Markdown 变成了可视化神器

写文档最烦的事是什么？不是我不会画图，是 Markdown 写完了，发现还缺一张架构图或者流程图，然后就得切出去用 draw.io 或者 ProcessOn，一顿操作猛如虎，最后还得把图存成图片再插回去。

效率杀手。

今天要推荐的这个 Skill，就是来解决这个问题的——markdown-viewer/skills。它干的事情很简单但很暴力：让你的 AI 编程工具直接在 Markdown 里生成专业级图表，流程图、架构图、数据可视化、UML、时序图、MindMap，要什么直接出，生成完直接嵌入文档，不用跳出去。

这 14 个技能都是什么

简单分个类：

图表可视化类
– vega：Vega/Vega-Lite 引擎，柱状图、折线图、热力图、雷达图、词云，60+ 图表类型
– infographic：70+ 预设模板，KPI 卡片、时间线、SWOT 分析、漏斗图，用 YAML 写参数就能生成
– canvas：空间节点图，MindMap、知识图谱、概念图，用 JSON Canvas 格式

架构设计类
– architecture：13 种布局 × 12 种配色，系统分层图、微服务架构，拿 HTML/CSS 直接输出
– cloud：AWS/Azure/GCP/阿里云/K8s 图标全包含，画云架构必备
– network：Cisco、Citrix、行业标准网络设备图标
– archimate：企业架构标准 notation，支持业务/应用/技术三层建模
– security：IAM、加密、防火墙、合规审计图标，威胁模型画起来很顺手

流程建模类
– uml：14 种 UML 图，9500+ mxgraph 图标，类图、时序图、状态机、组件图全覆盖
– bpmn：BPMN notation + EIP 集成模式 + 精益生产图标
– data-analytics：ETL/ELT 管道、数据仓库、ML 工作流可视化

其他
– mindmap：PlantUML 原生 MindMap 语法，自动树状布局
– iot：物联网传感器、边缘计算、数字孪生
– infocard：杂志级信息卡片，编辑风格排版

怎么用

装起来就一行：

npx skills add markdown-viewer/skills

装完之后，在 Claude Code、Cursor、Codex 里直接说人话就行：

“请充分了解这个 Skills，然后给我的这份架构设计文档生成配图。”

它就会自动识别文档内容，在对应位置生成流程图、架构图、图表，最后直接嵌入你的 Markdown 文件里。

也可以指定具体的图类型，比如：

“帮我用 Vega 画一个过去 12 个月的用户增长折线图”

它会直接给你输出 Vega-Lite 语法，渲染出来就是一张可交互的图表。

适合谁

后端/架构工程师：画 UML、时序图、部署图，不用切工具
AI 开发者：工作流文档、Agent 架构图，Claude Code 一句话说写就写
全栈/产品：系统设计文档、架构文档，配图一键生成
技术写作者：文档里缺流程图、架构图，直接让它补

最后

3.1k Star，179 Fork，活跃维护，支持 Claude Code / Cursor / Codex 多平台。开源协议 GPL-3.0。

程序员写文档最大的成本不是写字，是”画图然后插进去”这件事。markdown-viewer/skills 把这个成本直接归零了。

GitHub：https://github.com/markdown-viewer/skills

GitHub: https://github.com/markdown-viewer/skills