如何使用Trae AI 创建你的智能流程图？【干货】

全栈小刘
3,518 阅读7分钟

image.png

思绪开篇

上周一，我们团队开大双周会，讲了团队的一个质量架构体系、然后讲了后续Q2季度的发展，什么GMV、各类指标

我看到了琳琅满目的架构图，眼花缭乱， 思绪开始慢慢开始飘荡到远方，我坐着，思绪开始静静的追忆着过往的岁月，

在很多年以前，我想起我看到的团队的leader也在画这个图，那是很久很久以前了，有些记不清了，大概是18年的年底，记得那天是冬天，天很冷，所以记忆此刻也仍然犹新，当时老大也在给团队的CTO做汇报写了很长的周报，我从旁路过，看到它在一个一个的画架构图，省略后的大概长这样

image.png

当时的我在想，哇～ 这就是大佬嘛？ 看着好高级，希望有一天我也能向老板一样，我一般称呼我们的团队的leader为老板，时至今日，我自己也成为leader了，才慢慢的对这些图有了自己的理解，慢慢也开始着手区去画，去和别让分享，也就是开始了今天的这篇文章

首先我们打开

海外版：www.trae.ai/

or

国内版：www.trae.com.cn/

我们点击左侧进行插件部分，搜索：drawio

image.png

为什么要装这个东西，一句话概括就是** drawio是一款清晰的流程图软件**， 我们以插件的形式进行安装，方便后续进行生成的时候预览，下方是详细介绍：

流程图绘制

draw.io 是一款功能强大的开源图表绘制工具，它可以帮助你轻松创建各种类型的图表，包括：

  • 流程图: 业务流程、系统流程、数据流程等

  • 思维导图: 整理思路、头脑风暴、项目规划等

  • 网络拓扑图: 网络结构、服务器架构、系统部署等

  • UML 图: 软件设计、类图、时序图等

  • 实体关系图: 数据库设计、数据模型等

  • 以及其他各种类型的图表: 甘特图、线框图、组织结构图等等

github.com/jgraph/draw…

image.png

接下来我们开始在Trae 里面使用 记住装这个插件 不要整错了

image.png

智能生成启程

在2025年的今天，AI技术大火，有很多各式各样的网站，已经开始支持AI生成架构图了，例如我们可以使用最简单的方式，我们先告诉AI，我们需要的格式：

  • 提示词
请为我绘制一个现代化的Springboot+Vue博客系统架构流程图，使用draw.io格式。

技术栈要求：
- 前端：Vue3 + Vuex + Vue Router + Element Plus/Ant Design Vue
- 后端：Spring Boot + Spring Security + MyBatis-Plus
- 数据存储：MySQL主从复制 + Redis缓存
- 搜索引擎：Elasticsearch
- 消息队列：RabbitMQ
- 文件存储：MinIO

架构图需包含以下模块及其交互流程：
1. 用户层：PC端、移动端访问
2. 前端架构：组件结构、状态管理、路由系统
3. 网关层：Nginx反向代理、负载均衡
4. 后端微服务：用户服务、内容服务、评论服务等
5. 数据访问层：ORM框架、缓存策略、读写分离
6. 存储层：主从复制、数据备份
7. 中间件：消息队列、搜索引擎
8. 运维层：Docker容器化、CI/CD流程

请使用现代简约设计风格，配色方案采用蓝色系专业配色，各组件间用箭头清晰标明数据流向，并标注核心技术点。

image.png

我们来看下Trae AI 生成的效果

image.png

image.png

image.png

上方都是Trae AI生成的，下面我们来试下换成医疗的Cursor生成的效果：

image.png

当然这里其实存在一个差距，例如Cursor 使用的claude 模型，而trae 使用的是deepseek，模型之间也存在差异，但是事实证明，其实这张画架构图的形式，已经可以完全使用大模型进行替代生成

接下来，我们来试试使用HTML+CSS 的网页架构图看下是否正常

image.png

哈哈，看来HTML的形式似乎还是不够完美，存在许多的缺陷，当然也跟提示词有关

请为我绘制一个现代化的Springboot+Vue博客系统架构流程图，使用HTML和TailwindCSS构建  
  
技术栈要求：  
- 前端：Vue3 + Vuex + Vue Router + Element Plus/Ant Design Vue  
- 后端：Spring Boot + Spring Security + MyBatis-Plus  
- 数据存储：MySQL主从复制 + Redis缓存  
- 搜索引擎：Elasticsearch  
- 消息队列：RabbitMQ  
- 文件存储：MinIO  
  
架构图需包含以下模块及其交互流程：  
1. 用户层：PC端、移动端访问  
2. 前端架构：组件结构、状态管理、路由系统  
3. 网关层：Nginx反向代理、负载均衡  
4. 后端微服务：用户服务、内容服务、评论服务等  
5. 数据访问层：ORM框架、缓存策略、读写分离  
6. 存储层：主从复制、数据备份  
7. 中间件：消息队列、搜索引擎  
8. 运维层：Docker容器化、CI/CD流程  
  
请使用现代简约设计风格，配色方案采用蓝色系专业配色，各组件间用箭头清晰标明数据流向，并标注核心技术点。

下面我们修改下提示词，让他参考图片进行二次修改，我们会发现，加上图片的理解， 网页端一样也能完成优化下架构图

image.png

下方是架构图的代码：搭建可以自行预览

线上部署架构图

在这个章节，接下来我们使用vercel 进行线上部署，让你的组员、或者领导，公司的同时都能访问到这个架构图

首先第一步：

我们需要将1. 架构图上传github

image.png

  1. 打开vercel进行部署

进入vercel官网 vercel.com/

Vercel 是一个面向前端开发者的云平台，支持快速部署静态网站（如 Gatsby、Hugo 生成的项目）和动态应用（如 Next.js 服务端渲染应用）。其核心优势包括：

  • *‌一键部署‌：通过连接 GitHub 等代码仓库，自动完成构建和全球 CDN 分发。

这里我们选择进行创建新项目

image.png

找到我们在进入vercel官网上，先进行关联的github的，最后在找到我们使用Trae AI 画出的流程图这个地方，点击Import

image.png

  • 下面我们点击部署， 这里我们无需关心，他会自动帮助我们找到index.html 文件

image.png

部署完成！！！💥

image.png

线上地址： jiagoutu.vercel.app/ ,第一次访问可能会比较慢， 但是后续会快很多

自定义域名部署

这里进行选择域名管理

image.png

这里我们选择添加我们自己的域名

image.png

选择添加域名

image.png

这里记得配置DNS 解析，部署成功！！！

www.0p05q.asia/

image.png

AI使用项目分析后生成完成架构图

其实本来，这篇文章已经完结了，但是晚上下班刚到家，给小孩哄睡玩，甚似高兴 看到这个网名名为：_等闲的小兄弟说:

这个可以让AI分析项目，然后根据项目画嘛？ image.png

我只能说：有的有的兄弟，这必须有！

image.png

下载项目

这里我们找到经典的Java项目给这位兄弟进行演示画架构图 gitee.com/y_project/R…

首先我们需要进行下载，我们就以这位掘友的名字进行命名，将项目clone 到这里

  • 克隆项目
git clone https://gitee.com/y_project/RuoYi.git

image.png

复制这个地址

image.png

image.png

  • 克隆完成🎆 image.png

输入提示词之前我们需要让AI了解一下我的项目

你找对象不是也需要一定的时间相处才能了解释？ 一样的道理，所以让AI熟悉一下，我们连着Cursor 和 Trae AI一起用，我们先用Cursor，用Cursor之前首先需要将项目和文档关联起来，总的来说就是你的知识库

  • 点击设置、 找到 Features image.png

  • 输入若依的文档地址

image.png

  • Cursor这里变成绿色的就说明关联在一起了

image.png

点击这个小书的图标会自动出现章节就没啥问题了

image.png

  • 提示词:
@RuoYi  
请你熟悉一下项目，并列出具体的功能，要具体点，这是我的好兄弟等闲需要的，我需要用来画架构图的，你需要足够清晰，嘎嘎清晰，不清晰把你网线拔了！@需求理解.md

接下来，我们把文件夹拖进来然后在输入提示词,同时友好的催下一下AI

image.png

最后生成架构图，输入我们的终极提示词

记住这里需要注意的是： 一定要将文档和需求理解，一起拖拽进行让AI进行实现

image.png

  • 最终成果

image.png

avatar
文章
阅读
粉丝