如何进行AI作图（架构图，流程图等）

AI作图本质

通过AI生成工具能够理解的代码，之后导入工具进行渲染

文本绘图

主流文本绘图语言包括Mermaid和PlantUML

Mermaid

Mermaid是一个开源的图表生成工具，它允许用户使用简单的文本描述来创建各种图表，如流程图、序列图、甘特图等。其优势在于代码简洁、易于维护，并能在支持Mermaid的平台（如GitHub、Markdown编辑器）中直接渲染成可视化图表。

1. 使用AI写提示词生成Mermaid代码

AI提示词应包括图表类型、元素和逻辑关系。示例如下：

用户提示词：

bash 复制代码

画一个微服务Web应用架构，Mermaid格式输出：

1. 客户端层 (Client Layer)
Web浏览器：主要用户界面

移动应用：移动端访问

第三方应用：外部系统集成

2. 接入层 (Access Layer)
CDN：内容分发网络，加速静态资源访问

负载均衡器：流量分发，提高系统可用性

防火墙：网络安全防护

3. API网关层 (API Gateway Layer)
API网关：统一入口，请求路由

认证服务：身份验证和授权

限流器：流量控制和防刷

4. 业务服务层 (Business Service Layer)
按业务领域划分的微服务：

用户域
用户服务：用户注册、登录、管理

资料服务：用户个人信息管理

订单域
订单服务：订单创建、查询、状态管理

支付服务：支付处理、交易记录

库存服务：库存管理、扣减

商品域
商品服务：商品信息管理

分类服务：商品分类管理

支撑服务
通知服务：邮件、短信通知

搜索服务：商品搜索功能

5. 数据层 (Data Layer)
关系型数据库：MySQL/PostgreSQL，存储结构化数据

Redis缓存：缓存热点数据，提高性能

Elasticsearch：全文搜索服务

消息队列：RabbitMQ/Kafka，异步通信

6. 基础设施 (Infrastructure)
服务注册中心：服务发现和注册

配置中心：统一配置管理

监控系统：性能监控和告警

日志系统：集中日志收集和分析

AI生成的Mermaid代码：

graph TB
%% 客户端层
subgraph Clients [客户端]
WEB[Web浏览器]
MOBILE[移动App]
end

复制代码

 %% 接入层
 LB[负载均衡器]

 %% 网关层
 APIGW[API网关]
 AUTH[认证服务]

 %% 业务服务层
 USERSVC[用户服务]
 ORDERSVC[订单服务]
 PRODUCTSVC[商品服务]
 PAYMENTSVC[支付服务]
 NOTIFYSVC[通知服务]

 %% 数据层
 USERDB[(用户数据库)]
 ORDERDB[(订单数据库)]
 PRODUCTDB[(商品数据库)]
 CACHE[(Redis缓存)]

 %% 消息队列
 MQ[消息队列]

 %% 监控配置
 CONFIG[配置中心]
 MONITOR[监控系统]

 %% 连接关系
 WEB --> LB
 MOBILE --> LB
 LB --> APIGW
 APIGW --> AUTH
 
 APIGW --> USERSVC
 APIGW --> ORDERSVC
 APIGW --> PRODUCTSVC
 APIGW --> PAYMENTSVC
 
 %% 服务间调用
 USERSVC --> ORDERSVC
 ORDERSVC --> PRODUCTSVC
 ORDERSVC --> PAYMENTSVC
 PAYMENTSVC --> NOTIFYSVC
 
 %% 数据库连接
 USERSVC --> USERDB
 ORDERSVC --> ORDERDB
 PRODUCTSVC --> PRODUCTDB
 USERSVC --> CACHE
 PRODUCTSVC --> CACHE
 
 %% 异步消息
 ORDERSVC --> MQ
 PAYMENTSVC --> MQ
 MQ --> NOTIFYSVC
 
 %% 配置监控
 USERSVC --> CONFIG
 ORDERSVC --> CONFIG
 PRODUCTSVC --> CONFIG
 
 USERSVC --> MONITOR
 ORDERSVC --> MONITOR
 PRODUCTSVC --> MONITOR

 %% 样式定义
 classDef client fill:#e1f5fe,stroke:#01579b,stroke-width:2px
 classDef gateway fill:#fff3e0,stroke:#e65100,stroke-width:2px
 classDef service fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
 classDef database fill:#ffebee,stroke:#b71c1c,stroke-width:2px
 classDef infra fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
 
 class WEB,MOBILE client
 class LB,APIGW,AUTH gateway
 class USERSVC,ORDERSVC,PRODUCTSVC,PAYMENTSVC,NOTIFYSVC service
 class USERDB,ORDERDB,PRODUCTDB,CACHE database
 class MQ,CONFIG,MONITOR infra

复制到md文件代码块中，指定格式为 mermaid，则会渲染成图
客户端 Web浏览器移动App 负载均衡器 API网关认证服务用户服务订单服务商品服务支付服务通知服务用户数据库订单数据库商品数据库 Redis缓存消息队列配置中心监控系统

PlantUML

PlantUML是一个开源的文本转图表工具，允许用户通过简单的纯文本描述生成多种类型的专业图表（如UML图、时序图、架构图等）。其核心优势在于采用人类可读的脚本语言，支持跨平台渲染，并可直接集成到Wiki、Markdown文档或IDE中使用。

1. AI提示词生成PlantUML代码

用户可通过结构化提示词描述图表要素，示例如下：

用户提示词：

bash 复制代码

画一个微服务Web应用架构，PlantUML格式输出：

1. 客户端层 (Client Layer)
Web浏览器：主要用户界面

移动应用：移动端访问

第三方应用：外部系统集成

2. 接入层 (Access Layer)
CDN：内容分发网络，加速静态资源访问

负载均衡器：流量分发，提高系统可用性

防火墙：网络安全防护

3. API网关层 (API Gateway Layer)
API网关：统一入口，请求路由

认证服务：身份验证和授权

限流器：流量控制和防刷

4. 业务服务层 (Business Service Layer)
按业务领域划分的微服务：

用户域
用户服务：用户注册、登录、管理

资料服务：用户个人信息管理

订单域
订单服务：订单创建、查询、状态管理

支付服务：支付处理、交易记录

库存服务：库存管理、扣减

商品域
商品服务：商品信息管理

分类服务：商品分类管理

支撑服务
通知服务：邮件、短信通知

搜索服务：商品搜索功能

5. 数据层 (Data Layer)
关系型数据库：MySQL/PostgreSQL，存储结构化数据

Redis缓存：缓存热点数据，提高性能

Elasticsearch：全文搜索服务

消息队列：RabbitMQ/Kafka，异步通信

6. 基础设施 (Infrastructure)
服务注册中心：服务发现和注册

配置中心：统一配置管理

监控系统：性能监控和告警

日志系统：集中日志收集和分析

AI生成的PlantUML代码：

plantuml 复制代码

@startuml
!theme black-knight
title 微服务Web应用架构图

left to right direction

package "客户端层" {
  [Web浏览器]
  [移动应用]
  [第三方应用]
}

package "接入层" {
  [CDN]
  [负载均衡器]
  [防火墙]
}

package "网关层" {
  [API网关]
  [认证服务]
}

package "业务服务" {
  [用户服务]
  [订单服务]
  [商品服务]
  [支付服务]
  [通知服务]
}

package "数据层" {
  [用户数据库]
  [订单数据库]
  [商品数据库]
  [Redis缓存]
  [消息队列]
}

package "基础设施" {
  [配置中心]
  [监控系统]
}

' 简单连接示例
[Web浏览器] --> [CDN]
[移动应用] --> [负载均衡器]
[负载均衡器] --> [防火墙]
[防火墙] --> [API网关]
[API网关] --> [认证服务]
[认证服务] --> [用户服务]
[认证服务] --> [订单服务]
[用户服务] --> [用户数据库]
[订单服务] --> [订单数据库]
[用户服务] --> [配置中心]
@enduml

如使用在线工具渲染：https://app.timelessq.com/office/plantuml-editor

下载png格式效果

Mermaid和PlantUML总结对比

对比维度	Mermaid	PlantUML
核心定位	通用图表工具（流程图、时序图、类图等）	专注于UML建模（类图、用例图等）
语法简洁性	类Markdown风格，直观易学	类UML专业语法，需一定学习成本
部署依赖	纯JavaScript库，浏览器直接运行	基于Java，需本地/服务端环境支持
扩展能力	支持插件扩展新图表类型（如甘特图）	深度定制UML元素，支持自定义样式
实时渲染	前端即时渲染，适合文档集成，原生支持markdown	需服务端渲染或预编译
非UML支持	较强（如饼图、状态机）	有限（主要通过插件实现）
输出格式	SVG/PNG（支持暗色模式）	PNG/SVG/ASCII Art
社区生态	GitHub活跃，多语言工具链丰富	长期稳定迭代，企业级应用广泛

网页绘图

cursor生成前端页面

生成web端电商平台大屏页面

提示词：

bash 复制代码

项目目标
生成一个电商平台实时数据可视化大屏页面。

页面设计要求

整体风格

采用深色背景的大屏设计风格

布局分为头部标题区域和多个数据展示区域

数据可视化图表

实时销售额（带动态数字翻牌效果）

各品类销售占比（饼图）

24小时销售趋势（折线图）

热销商品TOP10（柱状图）

用户地域分布（中国地图热力图）

技术实现

使用 ECharts 库实现所有图表

所有图表需具备动画效果

布局适配

采用响应式布局设计

需适配不同尺寸的屏幕显示

自动生成前端代码

最终效果，浏览器html访问

使用在线工具看效果：https://codepen.io/3390504369/pen/WbrVdMp

生成移动端电商APP原型图

提示词：

bash 复制代码

你是一位专业的UI设计师，请生成一套移动端电商APP的完整原型图

设计要求

采用简洁现代的视觉风格

所有原型页面需在同一HTML文件中实现

页面采用平铺式排列布局

确保原型可直接用于前端开发实现

技术规范

使用HTML和CSS进行实现

图片资源优先选用SVG格式

交付标准

原型图需达到可直接开发的技术标准

保持设计的一致性和完整性

使用在线工具看效果：https://codepen.io/3390504369/pen/NPxQXyd

生成SVG格式图片

SVG（Scalable Vector Graphics）采用XML描述的矢量图形格式，基于数学路径绘制，可无限缩放而不失真。适合图标、图表等需要高清晰度适配不同屏幕的场景。

提示词：

bash 复制代码

请生成一个专业的三层系统架构SVG图，清晰展示各层级组件与数据流向。

架构层级与组件

展示层：Web前端、移动端App

业务层：API服务器集群（包含3个节点）

数据层：主从数据库、Redis缓存

视觉设计规范

色彩方案：采用区分性配色，每层使用不同色系

数据流向：通过连接线明确显示请求/响应路径

专业美学：整体布局协调，配色专业现代

技术要求

输出格式：SVG

包含方向性箭头标识数据流

确保层级关系直观清晰

使用在线工具看效果：deepseek可直接执行html代码

canvas

生成海报（Canvas）

提示词：

bash 复制代码

使用HTML5 Canvas技术创建专业的企业网络解决方案宣传海报代码

视觉设计规范

整体布局：采用上下分层结构

上部：核心图形展示区

下部：文字信息展示区

核心图形元素：

5个具有立体感的服务器图标

使用流畅曲线连接各服务器节点

配色方案：专业蓝白色系搭配

视觉增强：添加细腻的阴影和高光效果以提升质感

内容要素

企业品牌标识（Logo）

产品名称及主标题

核心价值主张与产品卖点

联系信息或行动指引

输出要求

高分辨率输出，确保印刷品质

适配打印输出的尺寸和比例

使用在线工具看效果（动态无法在文档中展示）：deepseek可直接执行html代码

https://chat.deepseek.com/a/chat/s/0d794031-1b44-443c-92dd-41ff16363410

生成监控工具（Canvas）

提示词

bash 复制代码

请使用HTML5 Canvas技术创建网络性能监控仪表板

设计元素规范

核心布局

中央区域：网络拓扑结构图

周边区域：各类性能指标图表与数据面板

视觉元素

实时数据流动动画效果

状态指示灯与进度条组件

网格背景与扫描线视觉效果

深色主题配合亮色高亮

文字样式

等宽字体应用

模拟代码显示风格

交互要求

实时数据更新与可视化

状态指示清晰直观

技术实现要点

通过Canvas实现动态数据可视化

确保视觉效果专业且信息传达清晰

生成代码：

在线效果查看（动图超帅）：deekseek运行

HTML和CCS生成AI学习路线图

提示词：

bash 复制代码

生成一个全面的、分阶段的学习路线，涵盖从基础到进阶的各个主题。使用HTML和CSS来呈现一个清晰、美观的路线图。

学习路线将包括以下阶段：

数学基础

编程基础

机器学习基础

深度学习基础

自然语言处理

计算机视觉

强化学习

专业领域与进阶主题

在线效果（太长了没截全）：

AI+绘图工具

生成MD格式的思维导图（XMind）

提示词：

bash 复制代码

请输出MD格式的思维导图，内容如下：AI学习路线，具体内容省略

将MD文档导入到XMind中即可获得思维导图

Drawio结合AI生成

提示词：

bash 复制代码

请生成drawio格式的学习路线图，内容太多省略了

效果如下（实际还需要手动调整一下）

AI生图技巧

提供图形示例，让AI参照生成
截图标注需要修改的地方，发给AI修正
配置专业的系统提示词，使输出更加专业