DeepSeek+Mermaid：自然语言生成流程图与架构图实战

简介这份文档面向具备一定编程基础的研发人员、项目经理与数据分析师聚焦如何借助DeepSeek大语言模型将自然语言指令转化为Mermaid代码再由Mermaid渲染为流程图、序列图、甘特图等可视化图表从而提升需求分析、系统设计、编码实现与测试验证各阶段的制图效率。资源包共1个docx文件约40KB内容涵盖DeepSeek的发展历程、技术架构与应用场景Mermaid的基础语法与图表类型详解并通过电商平台开发项目实战演示二者结合的具体流程。目前已有393人学习。读者可从中获得从自然语言到图表的完整实现思路掌握流程图、时序图等常用图表的编写技巧理解AI辅助制图在真实项目中的落地方式适合希望用自动化手段替代手工绘图、提高文档与协作效率的技术人员参考。1. 从手画流程图到一句话出图DeepSeekMermaid 到底解决了什么上周帮同事改一份技术方案光流程图就来回折腾了三版。第一版用某在线工具画的导出 PNG 后发现箭头方向反了第二版换了个工具重画结果对方电脑没装字体中文全变方块第三版干脆用 Visio画完发现要改一个分支整张图又得重新对齐。这种场景做过技术文档的人应该都不陌生——图本身不复杂但维护成本高得离谱。DeepSeek 与 Mermaid 结合解决的正是这个痛点。Mermaid 是一套基于文本的图表描述语言你用类似 Markdown 的语法写几行代码它就能渲染成流程图、时序图、ER 图、思维导图等DeepSeek 作为大语言模型负责把你用自然语言描述的逻辑关系翻译成符合 Mermaid 语法的代码。两者串起来你只需要说清楚我要画一个用户下单的流程包含库存校验和支付回调剩下的语法细节交给模型。这套组合适合三类人经常写技术文档、需要频繁更新架构图的工程师做产品方案、要快速出流程草图的 PM以及像我这样画图水平一般但逻辑描述还算清楚的普通开发者。它不追求出版级排版但胜在改图成本极低——改一行文本图就跟着变。2. 把自然语言喂给 DeepSeek提示词结构与 Mermaid 语法约束2.1 为什么不能直接说帮我画个图直接让模型画个流程图大概率会得到一段语法正确但结构混乱的代码。问题出在 Mermaid 的语法虽然简单但节点命名、方向声明、子图嵌套这些细节模型如果没被明确约束就会自由发挥。比如节点 ID 用了中文渲染时直接报错或者箭头方向写成A - B而不是A -- B语法解析失败。我一般会把提示词拆成四块图表类型、节点清单、连接关系、样式要求。图表类型明确告诉模型用flowchart TD还是sequenceDiagram节点清单把每个节点的 ID 和显示文本分开写连接关系用自然语言描述谁指向谁样式要求包括方向、是否加子图、节点形状。这样模型输出的代码基本一次就能过。2.2 一份可复用的提示词模板下面是我常用的提示词结构直接复制改内容就能用请生成一段 Mermaid flowchart 代码要求如下 1. 图表方向从上到下TD 2. 节点清单 - start: 用户提交订单 - check: 库存校验 - pay: 发起支付 - callback: 支付回调 - success: 订单完成 - fail: 订单失败 3. 连接关系 - start 指向 check - check 通过后指向 pay不通过指向 fail - pay 指向 callback - callback 成功指向 success失败指向 fail 4. 样式要求 - 节点 ID 用英文显示文本用中文 - check 节点用菱形 - success 和 fail 用圆角矩形 5. 只输出 Mermaid 代码不要额外解释这段提示词的关键在于把节点 ID和显示文本分开。Mermaid 里节点 ID 是内部标识不能带空格和特殊字符显示文本才是图上看到的内容。很多人翻车就翻在这里——直接写用户提交订单[用户提交订单]渲染器直接报语法错误。2.3 调用 DeepSeek API 完成批量转换如果只是偶尔画一两张图网页版对话就够了。但如果要批量处理几十个流程描述手动复制粘贴效率太低。常见做法是用 DeepSeek 的 API 写个脚本把描述文本批量转成 Mermaid 代码。import requests import json API_URL https://api.deepseek.com/v1/chat/completions API_KEY 你的 API Key def text_to_mermaid(description: str) - str: prompt f请根据以下描述生成 Mermaid flowchart 代码。 要求 - 节点 ID 用英文显示文本用中文 - 只输出代码不要解释 - 方向用 TD 描述{description} headers { Authorization: fBearer {API_KEY}, Content-Type: application/json } payload { model: deepseek-chat, messages: [ {role: system, content: 你是一个 Mermaid 代码生成助手只输出合法代码。}, {role: user, content: prompt} ], temperature: 0.2 } resp requests.post(API_URL, headersheaders, datajson.dumps(payload)) result resp.json() return result[choices][0][message][content] if __name__ __main__: desc 用户登录流程输入账号密码校验通过后进入首页失败则提示重新输入 print(text_to_mermaid(desc))这段代码里几个参数值得注意。temperature设成 0.2 是为了让输出稳定画图这种任务不需要创意需要的是确定性。system消息里强调只输出合法代码能减少模型加一堆解释文字的概率。API 地址和模型名以 DeepSeek 官方文档为准不同版本可能调整。拿到代码后直接贴进支持 Mermaid 的编辑器就能渲染。VS Code 装 Mermaid 插件、Typora 新版本、或者在线编辑器都行。如果渲染报错把错误信息连同代码一起丢回给模型让它修正通常一两轮就能解决。3. 渲染环境怎么选VS Code、Typora 与离线编辑器的取舍3.1 三种常见渲染方案对比Mermaid 代码写完后得有地方渲染。不同工具在版本支持、离线能力、导出格式上差别不小选错了会遇到代码没问题但图出不来的玄学现象。方案版本更新离线可用导出格式适合场景VS Code Mermaid 插件跟随插件更新是PNG/SVG日常开发、批量预览Typora跟随软件版本是PNG/SVG/PDF写文档、边写边看在线编辑器最新否PNG/SVG快速验证语法本地部署渲染服务自行控制是自定义内网、批量生成VS Code 的优势是插件生态成熟装完 Mermaid 插件后新建.mmd文件就能预览。Typora 的优势是 Markdown 和 Mermaid 混排体验好适合写技术方案。在线编辑器胜在版本最新遇到语法兼容问题可以拿来对照。3.2 VS Code 里的配置与预览在 VS Code 里用 Mermaid装插件只是第一步。默认预览可能不带缩放和导出按钮需要在设置里开一下。{ mermaid.preview.theme: default, mermaid.preview.autoOpen: true, mermaid.export.format: svg, mermaid.preview.scale: 1.5 }theme控制配色autoOpen打开文件时自动弹预览export.format决定导出默认格式。scale是预览缩放比例图太小时调大一点看着舒服。这些配置写在 VS Code 的settings.json里改完重启预览生效。如果预览一直转圈不出图先检查代码第一行是不是合法的图表声明。flowchart TD、sequenceDiagram、erDiagram这些关键字必须顶格写前面有空格或空行都可能解析失败。3.3 Typora 的版本坑Typora 内置 Mermaid 支持但版本更新滞后是常见问题。新语法比如mindmap或某些样式指令在老版本 Typora 里直接不渲染。遇到这种情况要么升级 Typora要么把代码降级成老语法。我一般会先在在线编辑器里验证代码确认语法没问题后再贴进 Typora。如果 Typora 渲染不出来基本就是版本问题不用怀疑代码。升级前记得备份自定义主题有些主题改过 Mermaid 的 CSS升级后可能被覆盖。4. 避坑与排查Mermaid 渲染失败的五个血泪经验4.1 现象节点文字显示不全或溢出原因通常是节点文本太长Mermaid 默认不会自动换行。解决方式有两种在文本里手动加br/换行或者用%%{init}%%指令调整节点宽度。%%{init: {flowchart: {nodeSpacing: 50, rankSpacing: 50}}}%% flowchart TD A[这是一个很长的节点文本br/手动换行后显示正常] -- B[短文本]nodeSpacing控制同层节点间距rankSpacing控制层与层之间距离。如果图整体太挤把这两个值调大。4.2 现象中文节点 ID 导致解析失败Mermaid 的节点 ID 不支持中文和特殊字符。很多人写用户登录 -- 首页渲染器直接报错。正确做法是 ID 用英文显示文本放方括号里login[用户登录] -- home[首页]。这个坑几乎每个新手都会踩一次。4.3 现象子图嵌套后连接线错乱子图subgraph用多了连接线可能跨子图乱飞。原因是 Mermaid 的布局算法对跨子图连接处理不够智能。解决方式是尽量减少跨子图连接或者把相关节点放进同一个子图。如果必须跨用direction指令明确子图内部方向能缓解一部分问题。4.4 现象API 返回的代码带 Markdown 包裹用 API 批量生成时模型有时会把代码包在mermaid里返回。直接贴进编辑器会多出三行反引号。解决方式是在提示词里强调只输出代码不要 Markdown 包裹或者在脚本里加一步清洗def clean_mermaid(code: str) - str: lines code.strip().splitlines() if lines and lines[0].startswith(): lines lines[1:] if lines and lines[-1].startswith(): lines lines[:-1] return \n.join(lines)这个清洗函数处理首尾的反引号行中间内容不动。批量场景下建议都加上省得手动删。4.5 现象本地部署模型生成的语法错误率偏高本地部署 DeepSeek 或类似模型时如果量化等级太高生成 Mermaid 代码的语法错误率会明显上升。常见表现是箭头写成-而不是--或者节点声明缺少方括号。解决方式是降低量化等级或者在提示词里把语法规则写得更死甚至给一两个正确示例让模型模仿。5. 进阶技巧用 Mermaid 做 ER 图和思维导图的参数调优5.1 ER 图的实体关系表达Mermaid 的 ER 图语法适合描述数据库表结构。和流程图不同ER 图需要明确实体、属性和关系基数。erDiagram USER ||--o{ ORDER : places ORDER ||--|{ ORDER_ITEM : contains PRODUCT ||--o{ ORDER_ITEM : includes USER { int id PK string name string email } ORDER { int id PK int user_id FK datetime created_at }||--o{表示一对多||--|{表示一对多且至少一条。这些符号组合容易记混我一般让 DeepSeek 先生成再对照官方文档核对基数符号。ER 图渲染对版本要求较高老版本 Typora 可能不支持属性块建议用 VS Code 或在线编辑器验证。5.2 思维导图的层级控制Mermaid 的mindmap语法用缩进表示层级缩进错了层级就乱。DeepSeek 生成思维导图代码时偶尔会混用空格和 Tab导致渲染结果和预期不符。mindmap root((技术方案)) 前端 框架选型 构建工具 后端 接口设计 数据库 部署 容器化 监控缩进统一用两个空格不要用 Tab。层级超过四层后图会变得很宽建议拆成多张图。如果节点文字太长思维导图不会自动换行同样需要手动加br/。5.3 批量生成时的验证习惯从那以后我每次批量生成 Mermaid 代码都强制走一遍生成→渲染→截图确认的流程。具体做法是写个脚本把生成的代码逐个写进.mmd文件调用 Mermaid CLI 渲染成 SVG再检查文件大小是否为零。零字节的 SVG 基本就是语法错误直接挑出来重新生成。# 批量渲染并检查 for f in output/*.mmd; do mmdc -i $f -o ${f%.mmd}.svg 2/dev/null if [ ! -s ${f%.mmd}.svg ]; then echo 渲染失败: $f fi donemmdc是 Mermaid CLI 的命令-i指定输入文件-o指定输出。-s判断文件是否非空。这个习惯帮我省了大量手动检查的时间尤其是几十张图一起改的时候。希望帮到你。本文还有配套的精品资源点击获取