尧图网页设计 
简介这份文档面向具备一定编程基础的研发人员、项目经理与数据分析师聚焦如何借助DeepSeek大语言模型将自然语言指令转化为Mermaid代码再由Mermaid渲染为流程图、序列图、甘特图等可视化图表从而提升需求分析、系统设计、编码实现与测试验证各环节的制图效率。资源以单个docx文件交付压缩包约40KB内容围绕DeepSeek的发展历程、技术架构与多场景应用Mermaid的基础语法与图表类型展开并通过一个电商平台开发项目实战演示二者结合的具体流程。目前已有393人学习浏览。读者可从中获得从自然语言到图表的完整实现思路、可复用的Mermaid语法示例与项目级演练案例便于在技术文档撰写、项目管理与系统设计中快速落地自动化制图。1. 从手画架构图到一句话出图DeepSeekMermaid 到底解决了什么周五下午四点产品经理在群里甩来一句「把刚才评审的订单状态机画成图下班前发我」。你打开 draw.io拖了六个矩形、连了八条箭头、对齐调了二十分钟导出 PNG 发过去对方回一句「这个分支改一下再加个超时回滚」。于是你又拖了十分钟。这个场景几乎每个后端、数据、运维都经历过——图不是难画是改起来要命。DeepSeek 与 Mermaid 结合实现自动化图表生成本质是把「画图」这件事从鼠标操作变成文本生成你用自然语言描述结构DeepSeek 负责把它翻译成 Mermaid 语法Mermaid 负责把这段文本渲染成流程图、时序图、ER 图、思维导图。整条链路里没有图形编辑器只有一段可版本管理的纯文本。改需求时你改的是文字不是像素。它适合三类人一是经常要交付架构图、流程图却不想学绘图工具的后端和运维二是写技术文档、需要图表跟着代码一起进 Git 的工程师三是想把「文档配图」这一步塞进 CI 流水线、实现可视化图表自动化生成的团队。不适合追求精细排版、要出版级视觉效果的场景——Mermaid 的定位是「结构清晰」不是「好看」。2. DeepSeek 出 Mermaid 代码提示词、参数与三种调用姿势2.1 为什么让模型写 Mermaid 而不是直接生成图片很多人第一反应是「让模型直接画图」。这条路走不通原因是图像生成模型输出的是像素不是结构。你没法 diff 两张 PNG 看出哪个节点被删了也没法让 CI 去校验一张图的语法。Mermaid 的价值在于它是文本中间层模型只需要产出符合语法的字符串渲染交给确定性的解析器。这样整条链路可测试、可回滚、可进版本库。DeepSeek 在这条链路里扮演的是「自然语言 → Mermaid DSL」的翻译器。它的强项是理解中文业务描述里的层级和分支关系比如「订单创建后如果支付超时就走取消否则进入待发货」这种带条件的句子能比较稳地映射成flowchart里的判断节点。选它而不是别的模型主要看两点中文语义理解够用以及 API 价格在批量生成场景下扛得住。2.2 三种调用姿势网页版、API、本地部署网页版最快适合临时出图。打开对话把下面的提示词模板贴进去即可。缺点是每次要手动复制没法进流水线。API 调用是自动化的主力。下面是 Python 最小可跑示例用 OpenAI 兼容协议调 DeepSeekfrom openai import OpenAI client OpenAI( api_key你的_DEEPSEEK_API_KEY, # 从控制台获取不要硬编码进仓库 base_urlhttps://api.deepseek.com # DeepSeek 的兼容端点 ) SYSTEM_PROMPT 你是一个 Mermaid 图表生成器。 规则 1. 只输出 Mermaid 代码不要任何解释文字不要 markdown 代码围栏。 2. 节点文字用中文节点 ID 用英文短横线命名。 3. 默认使用 flowchart TD除非我明确要求时序图或 ER 图。 4. 遇到条件分支必须用菱形判断节点。 def gen_mermaid(desc: str) - str: resp client.chat.completions.create( modeldeepseek-chat, # 对话模型适合结构化输出 messages[ {role: system, content: SYSTEM_PROMPT}, {role: user, content: desc}, ], temperature0.2, # 低温度减少语法乱造 max_tokens1500, ) return resp.choices[0].message.content.strip() if __name__ __main__: code gen_mermaid(画一个订单状态机创建→待支付→已支付→待发货→已发货→已完成待支付超时30分钟转取消已支付可退款转已退款) print(code)逻辑说明base_url指向 DeepSeek 的兼容端点用官方 SDK 就能调不用另装包。temperature0.2是关键参数——Mermaid 是强语法格式温度高了模型会自创节点写法导致渲染失败。max_tokens给 1500 足够覆盖大多数流程图复杂 ER 图可以调到 3000。参数说明model选deepseek-chat而不是推理模型因为结构化翻译不需要长链推理对话模型更快更便宜。如果你要生成带大量注释的复杂图可以换推理模型但延迟会明显上升。本地部署适合数据不能出内网的场景。用 vLLM 起一个 OpenAI 兼容服务把base_url换成http://localhost:8000/v1即可代码一行不用改。Jetson Orin 这类边缘设备也能跑量化版本但吞吐有限适合低频出图。2.3 提示词里必须钉死的四条约束模型默认输出会带一堆「好的以下是代码」和 markdown 围栏直接喂给渲染器就报错。上面SYSTEM_PROMPT里的四条约束是血泪经验只输出代码、中文节点、英文 ID、默认方向。其中「节点 ID 用英文」这条最容易被忽略——Mermaid 允许中文 ID但一旦节点名里有空格或特殊符号解析器就会翻车用英文 ID 加中文标签是最稳的写法。3. 把 Mermaid 接进工作流VS Code、Typora 与 CI 渲染3.1 本地预览VS Code 插件与 Typora 的版本坑拿到 Mermaid 代码后第一件事是看它能不能渲染。VS Code 里装 Mermaid 预览插件新建.mmd文件粘贴代码CtrlShiftP调出预览即可。这一步能挡掉八成语法错误。Typora 用户要注意版本问题Typora 内置的 Mermaid 版本偏旧新版语法比如mindmap、部分flowchart特性会渲染失败。遇到「代码没错但显示不出来」先怀疑渲染器版本而不是代码。解决办法是升级 Typora或者改用支持指定 Mermaid 版本的预览工具。离线场景可以用 Mermaid 离线编辑器把代码粘进去本地渲染不依赖网络。3.2 用命令行批量渲染成 SVG/PNG文档要交付时通常需要图片。用mermaid-js/mermaid-cli批量转# 安装需要 Node 环境 npm install -g mermaid-js/mermaid-cli # 单个文件转 SVG mmdc -i order.mmd -o order.svg -t neutral -b transparent # 批量把 docs 下所有 .mmd 转成 png宽度 1600 for f in docs/*.mmd; do mmdc -i $f -o ${f%.mmd}.png -w 1600 -b white done逻辑说明-i输入、-o输出扩展名决定格式。-t neutral指定主题-b transparent出透明背景方便贴进 PPT。-w控制输出宽度太窄会导致节点文字换行错乱。参数说明批量脚本里${f%.mmd}是 shell 的字符串截断把后缀去掉再拼.png。如果 CI 里跑记得先npm install装依赖并给容器装 Chromium——mermaid-cli 底层用无头浏览器渲染缺浏览器会直接报错。3.3 塞进 CI让文档配图跟着代码一起更新把.mmd源文件和代码放同一个仓库CI 里加一步渲染产物推到文档站点。这样每次改状态机代码顺手改.mmd流水线自动出新图彻底告别「图过期了没人知道」。关键是把.mmd当源码管理.svg当构建产物不要反过来。4. 避坑与排查Mermaid 生成最常见的五类翻车4.1 现象渲染报「Parse error」但代码看着没问题原因九成是节点文字里带了 Mermaid 的保留字符比如括号、引号、冒号。A[订单(已支付)]里的圆括号会被当成语法。解决给含特殊字符的标签加引号写成A[订单(已支付)]。养成习惯——只要标签里有非中文非字母的符号一律加双引号。4.2 现象模型输出带 markdown 围栏程序解析失败原因模型没严格遵守「只输出代码」把结果包在mermaid里了。解决两层防护。提示词里明确禁止代码里再做一次清洗用正则剥掉围栏import re def clean(code: str) - str: code re.sub(r^(?:mermaid)?\s*, , code.strip()) code re.sub(r\s*$, , code) return code.strip()逻辑说明第一个正则去掉开头的围栏和可能的mermaid标识第二个去掉结尾围栏。参数上re.sub默认替换所有匹配这里配合^$锚点只处理首尾不会误伤中间内容。4.3 现象节点太多图挤成一团看不清原因Mermaid 自动布局在节点超过 20 个时会失控连线交叉严重。解决拆图。一张图只讲一个维度状态机一张、部署拓扑一张。或者在flowchart里用subgraph分组把相关节点圈在一起布局会明显改善。别指望一张图讲完整个系统。4.4 现象中文节点显示成方块或乱码原因渲染环境缺中文字体尤其是 Docker 容器里。解决容器里装中文字体包如fonts-noto-cjk或者渲染时指定字体。本地一般不会遇到CI 里是高频坑。4.5 现象API 调用偶发超时或返回空原因DeepSeek API 在高峰期有波动或者max_tokens设太小被截断。解决加重试逻辑指数退避max_tokens给足余量。如果返回内容为空先打印原始响应看是不是被截断而不是直接怀疑提示词。5. 进阶让图表生成真正自动化的三个技巧第一个技巧是模板化提示词。把常见图类型状态机、时序图、ER 图各写一套 system prompt 存成文件调用时按类型加载。这样输出稳定性比每次现写提示词高一个档次。ER 图尤其明显——不约束的话模型经常把关系基数写反。第二个技巧是语法自校验。生成后不要直接渲染先用 mermaid-cli 的解析能力做一次 dry run失败就把错误信息回喂给模型让它自我修正最多重试两次。这个「生成-校验-修正」闭环能把成功率从七成拉到九成五以上。import subprocess, tempfile, os def validate(mermaid_code: str) - bool: with tempfile.NamedTemporaryFile(w, suffix.mmd, deleteFalse, encodingutf-8) as f: f.write(mermaid_code) path f.name try: # -o 输出到临时文件只关心退出码 subprocess.run([mmdc, -i, path, -o, path .svg], checkTrue, capture_outputTrue, timeout30) return True except subprocess.CalledProcessError: return False finally: for p in (path, path .svg): if os.path.exists(p): os.remove(p)逻辑说明把代码写进临时.mmd调mmdc渲染退出码非零即语法错误。timeout30防止复杂图卡死。finally里清理临时文件避免堆积。参数上checkTrue让非零退出码抛异常正好用来判断成败。第三个技巧是把图当代码评审。.mmd文件进 PRreviewer 能直接看出「这个分支被删了」「这个状态没连上」比看图片 diff 靠谱得多。我现在的习惯是任何涉及状态流转、服务依赖的改动PR 里必须带.mmd的 diff否则打回。坚持半年后团队里再没人问「最新架构图在哪」——因为图就在代码旁边永远是最新的。希望帮到你。本文还有配套的精品资源点击获取 DeepSeek+Mermaid：用自然语言自动生成流程图与架构图
简介这份文档面向具备一定编程基础的研发人员、项目经理与数据分析师聚焦如何借助DeepSeek大语言模型将自然语言指令转化为Mermaid代码再由Mermaid渲染为流程图、序列图、甘特图等可视化图表从而提升需求分析、系统设计、编码实现与测试验证各环节的制图效率。资源以单个docx文件交付压缩包约40KB内容围绕DeepSeek的发展历程、技术架构与多场景应用Mermaid的基础语法与图表类型展开并通过一个电商平台开发项目实战演示二者结合的具体流程。目前已有393人学习浏览。读者可从中获得从自然语言到图表的完整实现思路、可复用的Mermaid语法示例与项目级演练案例便于在技术文档撰写、项目管理与系统设计中快速落地自动化制图。1. 从手画架构图到一句话出图DeepSeekMermaid 到底解决了什么周五下午四点产品经理在群里甩来一句「把刚才评审的订单状态机画成图下班前发我」。你打开 draw.io拖了六个矩形、连了八条箭头、对齐调了二十分钟导出 PNG 发过去对方回一句「这个分支改一下再加个超时回滚」。于是你又拖了十分钟。这个场景几乎每个后端、数据、运维都经历过——图不是难画是改起来要命。DeepSeek 与 Mermaid 结合实现自动化图表生成本质是把「画图」这件事从鼠标操作变成文本生成你用自然语言描述结构DeepSeek 负责把它翻译成 Mermaid 语法Mermaid 负责把这段文本渲染成流程图、时序图、ER 图、思维导图。整条链路里没有图形编辑器只有一段可版本管理的纯文本。改需求时你改的是文字不是像素。它适合三类人一是经常要交付架构图、流程图却不想学绘图工具的后端和运维二是写技术文档、需要图表跟着代码一起进 Git 的工程师三是想把「文档配图」这一步塞进 CI 流水线、实现可视化图表自动化生成的团队。不适合追求精细排版、要出版级视觉效果的场景——Mermaid 的定位是「结构清晰」不是「好看」。2. DeepSeek 出 Mermaid 代码提示词、参数与三种调用姿势2.1 为什么让模型写 Mermaid 而不是直接生成图片很多人第一反应是「让模型直接画图」。这条路走不通原因是图像生成模型输出的是像素不是结构。你没法 diff 两张 PNG 看出哪个节点被删了也没法让 CI 去校验一张图的语法。Mermaid 的价值在于它是文本中间层模型只需要产出符合语法的字符串渲染交给确定性的解析器。这样整条链路可测试、可回滚、可进版本库。DeepSeek 在这条链路里扮演的是「自然语言 → Mermaid DSL」的翻译器。它的强项是理解中文业务描述里的层级和分支关系比如「订单创建后如果支付超时就走取消否则进入待发货」这种带条件的句子能比较稳地映射成flowchart里的判断节点。选它而不是别的模型主要看两点中文语义理解够用以及 API 价格在批量生成场景下扛得住。2.2 三种调用姿势网页版、API、本地部署网页版最快适合临时出图。打开对话把下面的提示词模板贴进去即可。缺点是每次要手动复制没法进流水线。API 调用是自动化的主力。下面是 Python 最小可跑示例用 OpenAI 兼容协议调 DeepSeekfrom openai import OpenAI client OpenAI( api_key你的_DEEPSEEK_API_KEY, # 从控制台获取不要硬编码进仓库 base_urlhttps://api.deepseek.com # DeepSeek 的兼容端点 ) SYSTEM_PROMPT 你是一个 Mermaid 图表生成器。 规则 1. 只输出 Mermaid 代码不要任何解释文字不要 markdown 代码围栏。 2. 节点文字用中文节点 ID 用英文短横线命名。 3. 默认使用 flowchart TD除非我明确要求时序图或 ER 图。 4. 遇到条件分支必须用菱形判断节点。 def gen_mermaid(desc: str) - str: resp client.chat.completions.create( modeldeepseek-chat, # 对话模型适合结构化输出 messages[ {role: system, content: SYSTEM_PROMPT}, {role: user, content: desc}, ], temperature0.2, # 低温度减少语法乱造 max_tokens1500, ) return resp.choices[0].message.content.strip() if __name__ __main__: code gen_mermaid(画一个订单状态机创建→待支付→已支付→待发货→已发货→已完成待支付超时30分钟转取消已支付可退款转已退款) print(code)逻辑说明base_url指向 DeepSeek 的兼容端点用官方 SDK 就能调不用另装包。temperature0.2是关键参数——Mermaid 是强语法格式温度高了模型会自创节点写法导致渲染失败。max_tokens给 1500 足够覆盖大多数流程图复杂 ER 图可以调到 3000。参数说明model选deepseek-chat而不是推理模型因为结构化翻译不需要长链推理对话模型更快更便宜。如果你要生成带大量注释的复杂图可以换推理模型但延迟会明显上升。本地部署适合数据不能出内网的场景。用 vLLM 起一个 OpenAI 兼容服务把base_url换成http://localhost:8000/v1即可代码一行不用改。Jetson Orin 这类边缘设备也能跑量化版本但吞吐有限适合低频出图。2.3 提示词里必须钉死的四条约束模型默认输出会带一堆「好的以下是代码」和 markdown 围栏直接喂给渲染器就报错。上面SYSTEM_PROMPT里的四条约束是血泪经验只输出代码、中文节点、英文 ID、默认方向。其中「节点 ID 用英文」这条最容易被忽略——Mermaid 允许中文 ID但一旦节点名里有空格或特殊符号解析器就会翻车用英文 ID 加中文标签是最稳的写法。3. 把 Mermaid 接进工作流VS Code、Typora 与 CI 渲染3.1 本地预览VS Code 插件与 Typora 的版本坑拿到 Mermaid 代码后第一件事是看它能不能渲染。VS Code 里装 Mermaid 预览插件新建.mmd文件粘贴代码CtrlShiftP调出预览即可。这一步能挡掉八成语法错误。Typora 用户要注意版本问题Typora 内置的 Mermaid 版本偏旧新版语法比如mindmap、部分flowchart特性会渲染失败。遇到「代码没错但显示不出来」先怀疑渲染器版本而不是代码。解决办法是升级 Typora或者改用支持指定 Mermaid 版本的预览工具。离线场景可以用 Mermaid 离线编辑器把代码粘进去本地渲染不依赖网络。3.2 用命令行批量渲染成 SVG/PNG文档要交付时通常需要图片。用mermaid-js/mermaid-cli批量转# 安装需要 Node 环境 npm install -g mermaid-js/mermaid-cli # 单个文件转 SVG mmdc -i order.mmd -o order.svg -t neutral -b transparent # 批量把 docs 下所有 .mmd 转成 png宽度 1600 for f in docs/*.mmd; do mmdc -i $f -o ${f%.mmd}.png -w 1600 -b white done逻辑说明-i输入、-o输出扩展名决定格式。-t neutral指定主题-b transparent出透明背景方便贴进 PPT。-w控制输出宽度太窄会导致节点文字换行错乱。参数说明批量脚本里${f%.mmd}是 shell 的字符串截断把后缀去掉再拼.png。如果 CI 里跑记得先npm install装依赖并给容器装 Chromium——mermaid-cli 底层用无头浏览器渲染缺浏览器会直接报错。3.3 塞进 CI让文档配图跟着代码一起更新把.mmd源文件和代码放同一个仓库CI 里加一步渲染产物推到文档站点。这样每次改状态机代码顺手改.mmd流水线自动出新图彻底告别「图过期了没人知道」。关键是把.mmd当源码管理.svg当构建产物不要反过来。4. 避坑与排查Mermaid 生成最常见的五类翻车4.1 现象渲染报「Parse error」但代码看着没问题原因九成是节点文字里带了 Mermaid 的保留字符比如括号、引号、冒号。A[订单(已支付)]里的圆括号会被当成语法。解决给含特殊字符的标签加引号写成A[订单(已支付)]。养成习惯——只要标签里有非中文非字母的符号一律加双引号。4.2 现象模型输出带 markdown 围栏程序解析失败原因模型没严格遵守「只输出代码」把结果包在mermaid里了。解决两层防护。提示词里明确禁止代码里再做一次清洗用正则剥掉围栏import re def clean(code: str) - str: code re.sub(r^(?:mermaid)?\s*, , code.strip()) code re.sub(r\s*$, , code) return code.strip()逻辑说明第一个正则去掉开头的围栏和可能的mermaid标识第二个去掉结尾围栏。参数上re.sub默认替换所有匹配这里配合^$锚点只处理首尾不会误伤中间内容。4.3 现象节点太多图挤成一团看不清原因Mermaid 自动布局在节点超过 20 个时会失控连线交叉严重。解决拆图。一张图只讲一个维度状态机一张、部署拓扑一张。或者在flowchart里用subgraph分组把相关节点圈在一起布局会明显改善。别指望一张图讲完整个系统。4.4 现象中文节点显示成方块或乱码原因渲染环境缺中文字体尤其是 Docker 容器里。解决容器里装中文字体包如fonts-noto-cjk或者渲染时指定字体。本地一般不会遇到CI 里是高频坑。4.5 现象API 调用偶发超时或返回空原因DeepSeek API 在高峰期有波动或者max_tokens设太小被截断。解决加重试逻辑指数退避max_tokens给足余量。如果返回内容为空先打印原始响应看是不是被截断而不是直接怀疑提示词。5. 进阶让图表生成真正自动化的三个技巧第一个技巧是模板化提示词。把常见图类型状态机、时序图、ER 图各写一套 system prompt 存成文件调用时按类型加载。这样输出稳定性比每次现写提示词高一个档次。ER 图尤其明显——不约束的话模型经常把关系基数写反。第二个技巧是语法自校验。生成后不要直接渲染先用 mermaid-cli 的解析能力做一次 dry run失败就把错误信息回喂给模型让它自我修正最多重试两次。这个「生成-校验-修正」闭环能把成功率从七成拉到九成五以上。import subprocess, tempfile, os def validate(mermaid_code: str) - bool: with tempfile.NamedTemporaryFile(w, suffix.mmd, deleteFalse, encodingutf-8) as f: f.write(mermaid_code) path f.name try: # -o 输出到临时文件只关心退出码 subprocess.run([mmdc, -i, path, -o, path .svg], checkTrue, capture_outputTrue, timeout30) return True except subprocess.CalledProcessError: return False finally: for p in (path, path .svg): if os.path.exists(p): os.remove(p)逻辑说明把代码写进临时.mmd调mmdc渲染退出码非零即语法错误。timeout30防止复杂图卡死。finally里清理临时文件避免堆积。参数上checkTrue让非零退出码抛异常正好用来判断成败。第三个技巧是把图当代码评审。.mmd文件进 PRreviewer 能直接看出「这个分支被删了」「这个状态没连上」比看图片 diff 靠谱得多。我现在的习惯是任何涉及状态流转、服务依赖的改动PR 里必须带.mmd的 diff否则打回。坚持半年后团队里再没人问「最新架构图在哪」——因为图就在代码旁边永远是最新的。希望帮到你。本文还有配套的精品资源点击获取