最近看到一个让 AI 能直接在 Markdown 中生成各种专业图表的 skill，试了下效果还不错，给需要的小伙伴分享一下~
skill 技能及相关资源放在文末啦~
一、技能概览
这个技能涵盖 13 个专业领域：UML、云架构、网络拓扑、安全架构、企业架构、业务流程、数据分析、物联网、数据图表、信息图、思维导图等。它能生成架构图、流程图、工作流图、状态图、部署图、网络拓扑图等，技术文档里需要的图基本都覆盖了。
能力：AI 自动读取 skill，识别场景（比如你要画 AWS 云架构），自动选择合适的图标，智能组合布局，生成代码，然后直接渲染输出你想要的专业图表。
兼容性：支持 Claude Code、Open claw、Cursor 等各种智能体工具。
这个技能的核心是 4 大技能引擎，覆盖了技术文档中 99% 的可视化场景。
📊 1. Vega - 数据图表
- 柱状图、折线图、散点图、饼图
- 面积图、热力图、雷达图
- 词云图、多系列图表、交互式图表
适合场景：有数据，要可视化对比、趋势、分布
🏗️ 2. Architecture - 架构图
- 分层系统架构（用户层 → 应用层 → 数据层 → 基础设施层）
- 微服务拓扑、企业架构、技术栈图
- 数据流程图、组织结构图
- 复杂网格布局（单列/双列/三列）
适合场景：系统设计、文档说明、技术架构
📋 3. UML - 软件工程师的标配
- 14 种 UML 图：用例图、类图、序列图、活动图、状态图...
- 时序图、甘特图、对象图、包图
适合场景：软件设计、API 文档、流程说明
🎨 4. Canvas - 空间自由派
- 思维导图、知识图谱、概念图
- 关系网络图、组织关系图
- 时间线、流程图、树形图
适合场景：关系表达、概念梳理、层级展示
二、实测效果
📈 Vega 测试
场景 1：打工人精神状态柱状图
- 测试 Prompt
简约现代扁平柱状图，标题：打工人一周精神状态指数
横轴：周一、周二、周三、周四、周五、周六、周日
纵轴：精神状态指数 0-100，刻度每10一格，带浅灰色横向网格线
数据：周一15，周二30，周三45，周四60，周五90，周六100，周日50
每个柱子顶部居中显示具体数字，加粗黑色字体
柱子使用渐变色：周一深蓝、周二蓝色、周三青色、周四浅绿、周五绿色、周六橙色、周日黄色
白色背景，图表细黑边框，坐标轴清晰，办公趣味风格，高清，矢量风格，无3D
- 实测效果
场景 2：减肥30天折线图
- 测试 Prompt
超高精度精美折线图
标题：减肥第1天～第30天体重波动曲线
渐变深蓝色标题栏，白色粗体艺术字
横轴：第1天、第5天、第10天、第15天、第20天、第25天、第30天
左侧纵轴：体重(kg) 50~70，刻度精细，每1kg主刻度，0.5kg副刻度
背景带浅灰色主次网格线，横线竖线齐全，线条细腻
数据点密集且波动复杂：
第1天=65.0 第5天=64.2 第10天=63.5 第15天=64.8 第20天=65.5 第22天=64.9 第24天=63.0 第25天=63.2 第27天=62.9 第30天=62.8
曲线平滑波浪起伏，极度自然真实
主线条：渐变红到橙色粗曲线，带发光描边
数据标记：圆形实心渐变，白色粗描边
每个数据点顶部精确标注数值，保留1位小数，加粗黑体
坐标轴加粗高亮，整体带轻微投影与圆角边框
背景浅灰渐变，整体质感高级精致
添加文字标注箭头：
第15天：周末暴食反弹
第20天：摆烂最高峰
第30天：终于小幅回落
右侧图例清晰美观
矢量插画风格，极度精致，细节拉满，高清，无3D
- 实测效果
场景 3：理想女友雷达图
- 测试 Prompt
超高精度精美雷达图
标题：理想女友五维能力雷达图
渐变深蓝色标题栏，白色粗体字
五维维度：颜值、情商、有钱、体贴、专一
数据数值：颜值95、情商90、有钱85、体贴98、专一92
多层环形网格：5层，0-20-40-60-80-100
网格线条细腻，浅灰色主次刻度
维度轴线条加粗，带渐变紫色
覆盖区域：半透明粉紫渐变填充，白色粗轮廓线
每个维度顶点标注数值，加粗黑色字体
中心向外辐射轴线，带精致分割线
整体带轻微阴影、圆角边框、浅灰渐变背景
右侧图例：五维属性说明
矢量插画风格，极致精致，细节复杂，高清，无3D
- 实测效果
🏢 Architecture 测试
场景 4：人类快乐系统架构
- 测试 Prompt
超高精度精美分层系统架构图
标题：人类快乐系统架构
渐变深蓝色标题栏，白色粗体艺术字
三层垂直分层架构，每层带圆角、渐变填充、精细阴影、发光描边
顶层：精神满足（紫色渐变）
子项：成就感、自我认同、自由、安全感、意义感
中层：娱乐 / 社交 / 美食（蓝色渐变）
娱乐子项：追剧、游戏、旅行、爱好
社交子项：朋友、家人、恋爱、圈子
美食子项：奶茶、火锅、烧烤、甜点
底层：睡眠 / 温饱 / 健康（绿色渐变）
睡眠子项：充足睡眠、作息规律、深度休息
温饱子项：三餐稳定、营养均衡、饮水充足
健康子项：运动、体检、情绪稳定、无病痛
层与层之间用清晰白色箭头垂直连接，表示依赖支撑
每层内部子项横向并列，带小图标占位、分隔线、居中加粗文字
整体带浅灰渐变背景、外边框、轻微投影、精致光影
矢量插画风格，细节极度丰富，元素复杂，高清，质感高级
- 实测效果
场景 5：压岁钱数据流图
- 测试 Prompt
超高精度精美数据流图
标题：当代年轻人「压岁钱」完整数据流图
渐变深蓝色标题栏，白色粗体艺术字
圆角矩形元素，渐变填充+阴影+细发光描边，矢量精致风格
数据流向用带箭头实线，线条清晰加粗
节点与流程：
1. 源头：爷爷奶奶、外公外婆、爸妈亲戚
2. 流向1：现金/微信红包 → 年轻人手中
3. 流向2：年轻人 → 爸妈（代为保管）
4. 流向3：爸妈 → 家庭账户/理财/消失
5. 并行流向：年轻人 → 偷偷藏私房钱
6. 反向流向：爸妈 → 偶尔返还零花
7. 最终流向：买游戏/奶茶/鞋/文具/快乐消费
每个节点标注文字，带图标占位
带数据标注：流入100%、保管70%、返还10%、私房20%
背景浅灰渐变，主次分隔线，整体光影精致
细节复杂、元素丰富、搞笑真实、高清、无3D
- 实测效果
📊 UML 测试
场景 6：打工人下班生存系统用例图
- 测试 Prompt
超高精度精美UML用例图
标题：当代打工人下班生存系统用例图
渐变深蓝色标题栏，白色粗体艺术字
主体参与者：打工人、外卖员、快递员、老板、室友/家人、手机
系统边界框：打工人下班生存系统（圆角矩形，浅蓝渐变描边）
用例椭圆带渐变填充、圆角、阴影、发光描边，文字居中加粗，每个用例带小图标占位
用例分类及详情：
1. 摆烂核心用例：瘫在沙发/床上、刷短视频/追剧、打游戏、拒绝加班
2. 生存必备用例：点外卖/煮泡面、喝奶茶/碳酸饮料、拆快递、洗澡
3. 社交摆烂用例：敷衍回复工作消息、和家人/室友唠嗑、刷朋友圈不互动、拒绝社交邀约
4. 焦虑内耗用例：担心明天工作、刷招聘软件、复盘今日摸鱼、规划明天摸鱼
5. 紧急突发用例：被老板临时@加班、客户紧急需求、家人临时召唤
参与者与用例之间用加粗实线关联，包含关系、扩展关系用虚线箭头清晰标注（如：拒绝加班扩展自瘫着摆烂）
背景浅灰渐变，系统边界带轻微投影，用例按类别用细分隔线区分，整体光影精致
矢量风格，细节复杂、元素丰富、贴合打工人日常、搞笑真实、高清无3D，用例关联逻辑清晰
- 实测效果
场景 7：猫咪讨饭序列图
- 测试 Prompt
超高精度精美UML序列图
标题：猫咪一整天心机讨饭全过程序列图
渐变深蓝色标题栏，白色粗体艺术字
垂直生命线：猫咪、主人、猫粮碗、猫条袋、沙发
水平激活框渐变填充、圆角、阴影、高亮描边
消息箭头清晰加粗，同步异步箭头区分，每条消息标注文字
完整流程：
1. 猫咪 → 猫粮碗：检查是空的
2. 猫咪 → 主人：小声喵喵叫
3. 主人 → 猫咪：不理，继续玩手机
4. 猫咪 → 主人：跳到腿上蹭手撒娇
5. 主人 → 猫咪：摸两下，继续玩手机
6. 猫咪 → 猫条袋：用爪子扒拉袋子发出声音
7. 主人 → 猫咪：无奈回头看
8. 猫咪 → 主人：瞪大眼卖萌、歪头杀
9. 主人 → 猫条袋：打开猫条
10. 猫条袋 → 猫咪：挤出食物
11. 猫咪 → 沙发：吃完立刻跳走，不理主人
背景浅灰渐变，生命线虚线，激活框质感高级
矢量精致风格，细节复杂、元素齐全、搞笑可爱、高清无3D
- 实测效果
🎨 Canvas 测试
场景 8：自我提升思维导图
- 测试 Prompt
精美横向思维导图，整体扁平清新风格
中心根节点：自我提升系统
3个二级节点，每个二级节点下有2个三级节点，每个三级节点下有2个四级节点，结构严格对称：
二级1：身体健康
三级1：作息规律
四级1：早睡早起
四级2：睡前远离手机
三级2：运动习惯
四级1：每周三次运动
四级2：每日八千步
二级2：学习成长
三级1：知识输入
四级1：每日阅读
四级2：课程学习
三级2：能力输出
四级1：实践练习
四级2：总结复盘
二级3：情绪管理
三级1：心态调节
四级1：积极暗示
四级2：减少内耗
三级2：生活秩序
四级1：环境整洁
四级2：培养爱好
样式：
圆角矩形节点，渐变柔和配色，分支线条流畅清晰
- 实测效果
场景 9：吃货关系网络图
- 测试 Prompt
超高精度有趣关系网络图
标题：吃货与美食的奇妙关系网
整体布局：圆形发散关系网，节点多、连线丰富、宽大于高，可爱治愈风格
节点分为两大类：
1. 人类角色节点（圆形渐变、可爱图标）：吃货本人、厨师、外卖员、超市老板、朋友
2. 美食节点（圆角矩形、食物图标）：火锅、奶茶、烧烤、蛋糕、寿司、咖啡、水果、麻辣烫
连线关系（彩色曲线、带箭头、标注文字）：
- 吃货 → 热爱 → 火锅/奶茶/烧烤/蛋糕
- 吃货 → 购买 → 外卖员 / 超市老板
- 外卖员 → 送达 → 所有美食
- 厨师 → 制作 → 火锅/寿司/麻辣烫
- 朋友 → 分享 → 奶茶/蛋糕
- 吃货 → 推荐 → 朋友
- 所有美食 → 带来快乐 → 吃货
风格：
配色明亮清新、节点圆润、连线柔和不杂乱
背景浅灰渐变、整体复杂有趣、治愈可爱、矢量风格
细节丰富、结构清晰、宽大于高、高清无3D
- 实测效果
三、📚 相关资源
- markdown-viewer-skills 地址：github.com/markdown-vi…
- Markdown Viewer 扩展：docu.md
- Vega 官方文档：vega.github.io/
- PlantUML 官方文档：plantuml.com/
🐾 如果这篇文章对你有帮助，欢迎点赞、收藏一下，下次用的时候就能找到啦！
