Mermaid和PlantUML代码+AI自动生成流程图，排版不用操心

平时做需求设计或者写技术文档画流程图在我这儿始终是最拖沓的一环。倒不是说业务逻辑理不清楚但一到画图就头大。那些矩形、菱形用鼠标拖来拖去对齐连线得盯着屏幕瞄半天。最怕中途需求变动加节点哪怕只加一个我也得把后面的框全挪一遍排好的版瞬间乱套。后来我就开始直接用代码来画图逻辑梳理完敲几行代码剩下的排版布局丢给渲染引擎处理就好。目前最主流的就是Mermaid和PlantUML。不过最近我又发现了一个更省事的玩法。配合AI工具本地环境不用自己折腾代码部分也能让AI代劳。下面拿我最近在用的“博思白板”走一遍流程看怎么把Mermaid和PlantUML代码直接生成流程图。方式一Mermaid生成流程图写Markdown文档的人对Mermaid应该眼熟。语法上接近“节点A指向节点B”这种直来直去的描述上手快日常业务流转和状态变更的场景用它挺顺手。咱们直接看个输入的例子。以“用户找回密码”为例Mermaid代码结构如下graphTDA[用户点击找回密码]--B{账号是否存在?}B--否--C[提示账号不存在]B--是--D[发送验证码到手机/邮箱]D--E[用户输入验证码]E--F{验证码是否正确?}F--否--G[提示验证码错误]F--是--H[引导重置密码]H--I[更新数据库]I--J[提示修改成功并跳转登录]到白板里实际操作新建文件调出AI助手点“AI生成流程图”把代码粘贴进输入框回车。代码直接渲染成排版规整的流程图默认深蓝配浅蓝菱形判断节点和矩形操作节点一眼就能区分开。界面左侧有现成的主题库不用挨个节点调色点一下样式整张图换色美化的时间都省了。这套流程最省心的地方在后期修改。以前加个节点等于重排一次现在代码里增删一行就行或者直接对话框里用大白话跟AI说一声图表自动重排双击节点改文字当然也可以。方式二PlantUML生成流程图PlantUML在后端开发这块不陌生尤其是碰到时序图、用例图、活动图这类复杂场景它的刻画能力比Mermaid要细。再看PlantUML处理“电商订单支付验证”后台逻辑的效果代码块如下startumlstart:接收用户支付请求;if(订单状态已支付?)then(是):返回请勿重复支付;stopelse(否):调用第三方支付接口;if(支付网关返回成功?)then(是):更新订单状态为已支付;:扣减商品库存;:生成发货单;else(否):记录支付失败日志;:给用户发送支付失败通知;endifendifstopenduml相比MermaidPlantUML多了startuml、start、stop、if/else这些结构写法上更贴近后端代码的流程控制。以前本地跑PlantUML得装Java环境、配Graphviz依赖哪一步不对就渲染不出来。现在省掉这些直接在Boardmix的AI助手贴代码生成。渲染结果蓝色圆角矩形是操作节点橘黄菱形是判断分支线条走向一目了然。比原生PlantUML默认那种偏古早的配色风格舒服不少截图放到技术评审的PPT里不违和。有个小问题代码里双引号包着的请勿重复支付生成后被转义成了quot;双击节点手工删掉即可。要是连代码都不想敲呢如果连代码也懒得写不复杂的场景下白板右侧对话框是能直接对话让AI生成流程图的。不想查Mermaid或PlantUML语法的话直接跟AI说大白话需求。AI理解后后台转成代码再渲染成图。后续要改也在对话框里口头描述比如“在某某节点后面加个什么”。总结用代码生成流程图确实比手动拖拽高效配合能解析代码的AI白板工具排版这类重复劳动基本就交给工具处理了。另外白板本身是个无限画布还有个好处文档、参考资料、原型图能堆在一个视图里看。除了流程图AI也支持生成思维导图、鱼骨图、SWOT分析、测试用例这类常见结构产品经理的用户旅程图也能做。我现在处理流程梳理基本就用这个方式不管是敲代码还是说大白话至少能把精力留在业务逻辑本身而不是跟排版较劲。