思绪开篇
上周一，我们团队开大双周会，讲了团队的一个质量架构体系、然后讲了后续Q2季度的发展，什么GMV、各类指标
我看到了琳琅满目的架构图，眼花缭乱， 思绪开始慢慢开始飘荡到远方，我坐着，思绪开始静静的追忆着过往的岁月，
在很多年以前，我想起我看到的团队的leader也在画这个图，那是很久很久以前了，有些记不清了，大概是18年的年底，记得那天是冬天，天很冷，所以记忆此刻也仍然犹新，当时老大也在给团队的CTO做汇报写了很长的周报，我从旁路过，看到它在一个一个的画架构图，省略后的大概长这样
当时的我在想，哇～ 这就是大佬嘛？ 看着好高级，希望有一天我也能向老板一样，我一般称呼我们的团队的leader为老板，时至今日，我自己也成为leader了，才慢慢的对这些图有了自己的理解，慢慢也开始着手区去画，去和别让分享，也就是开始了今天的这篇文章
首先我们打开
海外版：www.trae.ai/
or
国内版：www.trae.com.cn/
我们点击左侧进行插件部分，搜索：drawio
为什么要装这个东西，一句话概括就是** drawio是一款清晰的流程图软件**， 我们以插件的形式进行安装，方便后续进行生成的时候预览，下方是详细介绍：
流程图绘制
draw.io 是一款功能强大的开源图表绘制工具，它可以帮助你轻松创建各种类型的图表，包括：
-
流程图: 业务流程、系统流程、数据流程等
-
思维导图: 整理思路、头脑风暴、项目规划等
-
网络拓扑图: 网络结构、服务器架构、系统部署等
-
UML 图: 软件设计、类图、时序图等
-
实体关系图: 数据库设计、数据模型等
-
以及其他各种类型的图表: 甘特图、线框图、组织结构图等等
接下来我们开始在Trae 里面使用 记住装这个插件 不要整错了
智能生成启程
在2025年的今天，AI技术大火，有很多各式各样的网站，已经开始支持AI生成架构图了，例如我们可以使用最简单的方式，我们先告诉AI，我们需要的格式：
- 提示词
markdown 代码解读复制代码请为我绘制一个现代化的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流程
请使用现代简约设计风格，配色方案采用蓝色系专业配色，各组件间用箭头清晰标明数据流向，并标注核心技术点。
我们来看下Trae AI 生成的效果
上方都是Trae AI生成的，下面我们来试下换成医疗的Cursor生成的效果：
当然这里其实存在一个差距，例如Cursor 使用的claude 模型，而trae 使用的是deepseek，模型之间也存在差异，但是事实证明，其实这张画架构图的形式，已经可以完全使用大模型进行替代生成
接下来，我们来试试使用HTML+CSS 的网页架构图看下是否正常
哈哈，看来HTML的形式似乎还是不够完美，存在许多的缺陷，当然也跟提示词有关
markdown 代码解读复制代码请为我绘制一个现代化的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流程
请使用现代简约设计风格，配色方案采用蓝色系专业配色，各组件间用箭头清晰标明数据流向，并标注核心技术点。
下面我们修改下提示词，让他参考图片进行二次修改，我们会发现，加上图片的理解， 网页端一样也能完成优化下架构图
下方是架构图的代码：搭建可以自行预览
线上部署架构图
在这个章节，接下来我们使用vercel 进行线上部署，让你的组员、或者领导，公司的同时都能访问到这个架构图
首先第一步：
我们需要将1. 架构图上传github
- 打开vercel进行部署
进入vercel官网 vercel.com/
Vercel 是一个面向前端开发者的云平台，支持快速部署静态网站（如 Gatsby、Hugo 生成的项目）和动态应用（如 Next.js 服务端渲染应用）。其核心优势包括：
- *一键部署：通过连接 GitHub 等代码仓库，自动完成构建和全球 CDN 分发。
这里我们选择进行创建新项目
找到我们在进入vercel官网上，先进行关联的github的，最后在找到我们使用Trae AI 画出的流程图这个地方，点击Import
- 下面我们点击部署， 这里我们无需关心，他会自动帮助我们找到
index.html文件
部署完成！！！💥
线上地址： jiagoutu.vercel.app/ ,第一次访问可能会比较慢， 但是后续会快很多
自定义域名部署
这里进行选择域名管理
这里我们选择添加我们自己的域名
选择添加域名
这里记得配置DNS 解析，部署成功！！！
评论记录：
回复评论：