AI 绘图 Skill｜Markdown 一键出架构图、UML、数据可视化

最近看到一个让 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
实测效果

三、📚 相关资源

🐾 如果这篇文章对你有帮助，欢迎点赞、收藏一下，下次用的时候就能找到啦！