DeepSeek 加 Mermaid 自动生成图表：从代码到渲染的完整指南

简介这份文档面向具备一定编程基础的研发人员、项目经理与数据分析师聚焦如何借助DeepSeek大语言模型将自然语言指令转化为Mermaid代码再由Mermaid渲染为流程图、序列图、甘特图等可视化图表从而解决需求分析、系统设计、编码实现与测试验证各阶段图表制作效率低、准确性差的问题。资源包内含1个docx文件压缩后约40KB以图文并茂的文档形式系统梳理了DeepSeek的发展历程、技术架构与多场景应用Mermaid的基础语法与图表类型并通过电商平台开发项目实战演示二者结合的具体流程。目前已有393人学习浏览。读者可从中获得从自然语言到图表的完整实现思路、可复用的Mermaid语法示例与项目级演练案例适合希望提升技术文档与项目管理可视化效率的从业者参考实践。1. 当图表开始自己画自己DeepSeek 加 Mermaid 到底在做什么上周帮运营团队做季度复盘他们丢过来一份 3000 多行的 CSV要求两小时内出 12 张趋势图、5 张流程图和 3 张组织架构图。手工拖 Excel 再截图贴 PPT光调格式就能耗掉一整天。我当时的做法是把数据摘要和图表需求丢给 DeepSeek让它吐出 Mermaid 代码再粘进支持 Mermaid 的编辑器里渲染成图。整个过程从「想画什么」到「图能看」压缩到十几分钟改配色、改标签、改布局也只是改几行文本的事。这套组合解决的核心问题不是「AI 会不会画图」而是把「数据 → 图表描述 → 可渲染代码 → 最终图形」这条链路里的手工劳动全部替换成文本生成与文本编辑。适合三类人需要频繁出图但不想学设计工具的数据运营、写技术文档时要嵌架构图和流程图的工程师、以及想把图表生成塞进自动化流水线的开发者。Mermaid 本身是文本驱动的绘图工具DeepSeek 负责把自然语言需求翻译成符合语法的 Mermaid 代码两者之间靠提示词和校验规则衔接。下面按「怎么让 DeepSeek 稳定输出 Mermaid 代码 → 怎么把代码渲染成图 → 怎么避坑 → 怎么进阶」的顺序拆开讲。2. 让 DeepSeek 稳定吐出 Mermaid 代码提示词结构与语法约束2.1 为什么不能直接说「帮我画个柱状图」直接给一句「帮我画个柱状图」然后贴数据DeepSeek 大概率会返回一段 Python matplotlib 代码或者干脆用文字描述图表长什么样。问题出在模型对「画图」的默认理解偏向代码绘图库而不是 Mermaid 这种声明式文本格式。要让它稳定输出 Mermaid提示词里必须同时锁定三件事输出格式是 Mermaid、图表类型是 Mermaid 支持的类型、代码块语言标记为 mermaid。我常用的提示词骨架是这样的你是一个 Mermaid 代码生成器。根据我提供的数据和需求只输出一个 mermaid 代码块不要输出任何解释文字。 图表类型柱状图xychart-beta 数据{粘贴数据} 要求 1. x 轴标签为月份y 轴为销售额 2. 标题为「Q3 各月销售额对比」 3. 数值保留整数 4. 如果数据中有缺失值用 0 代替并在注释中说明这段提示词的关键在于「只输出一个 mermaid 代码块」和「不要输出任何解释文字」。前者约束输出边界后者防止模型在代码前后加「好的以下是为您生成的代码」这类废话。实测下来加上这两句之后直接可用的 Mermaid 代码比例从不到四成提升到八成以上。2.2 Mermaid 代码块的语言标记与渲染器识别Mermaid 代码块在 Markdown 里的标准写法是三个反引号加mermaid标记xychart-beta title Q3 各月销售额对比 x-axis [7月, 8月, 9月] y-axis 销售额万元 0 -- 500 bar [320, 410, 380]这段代码渲染出来是一张柱状图。注意xychart-beta是 Mermaid 10.x 之后引入的图表类型旧版本渲染器可能不认。如果你用的编辑器或平台内置的 Mermaid 版本低于 10柱状图需要用graph或pie替代或者升级渲染器。DeepSeek 生成代码时不会主动告诉你版本兼容性问题这是后面避坑章节要展开的点。代码块的语言标记必须是mermaid写成mmd、mermaidjs或者不写标记大部分渲染器都不会触发图形渲染只会当普通代码显示。如果你把 DeepSeek 的输出粘进 Notion、Obsidian、VS Code 的 Markdown Preview Enhanced 插件语言标记错了就是一片灰色代码块不是图。2.3 用 few-shot 示例把输出格式钉死如果团队里多人共用一套提示词或者要把生成流程做成自动化脚本光靠文字约束还不够稳。更可靠的做法是在提示词里塞一两个输入输出示例让模型照着格式抄。比如示例输入 数据1月 1202月 1503月 90 需求折线图标题「季度趋势」 示例输出 mermaid xychart-beta title 季度趋势 x-axis [1月, 2月, 3月] y-axis 数值 0 -- 200 line [120, 150, 90]现在按同样格式处理我的数据 数据4月 2005月 1806月 220 需求折线图标题「Q2 趋势」few-shot 的作用是给模型一个「格式锚点」。Mermaid 的语法在不同图表类型之间差异不小流程图用 graph TD时序图用 sequenceDiagram类图用 classDiagram柱状图用 xychart-beta。与其在提示词里写一大段语法说明不如直接给一个正确示例模型模仿示例的准确率远高于按描述生成。 ### 2.4 批量生成时的数据分片与拼接策略 一次让 DeepSeek 生成十几张图的代码上下文容易超限而且模型在长输出里后半段质量会下降。我一般按图表类型分片先集中生成所有柱状图代码再生成流程图最后生成表格类图表。每片控制在 3 到 5 张图每张图单独一个代码块块之间用 --- 分隔。 分片之后需要一个拼接步骤。如果最终产物是 Markdown 文档直接把各片输出按顺序粘在一起就行。如果要嵌进网页或应用可以用脚本把多个 Mermaid 代码块提取出来逐个渲染成 SVG 再组装。提取逻辑不复杂按 mermaid 和 做分割即可但要注意代码块内部可能包含反引号的情况——Mermaid 语法里反引号用得少实际踩坑概率不高但做自动化时最好加一层转义检查。 ## 3. 从代码到图形渲染环境搭建与自动化流水线 ### 3.1 本地渲染方案VS Code 插件与命令行工具 最轻量的本地渲染方式是在 VS Code 里装 Markdown Preview Mermaid Support 插件打开 Markdown 文件按 CtrlShiftV 就能看到图。这个方案适合手动调图阶段DeepSeek 生成代码粘进文件预览不满意就改代码实时看效果。 如果要脱离编辑器做批量渲染用 Mermaid CLImermaid-js/mermaid-cli更合适。安装命令 bash npm install -g mermaid-js/mermaid-cli装完之后可以用mmdc命令把 Mermaid 代码文件转成 PNG 或 SVGmmdc -i input.mmd -o output.svg -t dark -b transparent参数说明-i指定输入文件-o指定输出文件-t设主题可选 default、dark、forest、neutral-b设背景色transparent 为透明。input.mmd里直接写 Mermaid 代码不需要反引号包裹。这个命令适合塞进 CI 流水线DeepSeek 生成代码 → 写入.mmd文件 →mmdc渲染 → 产出 SVG 归档。3.2 用 Python 脚本串起 DeepSeek API 与 Mermaid 渲染如果要把整个流程自动化比如每天定时从数据库拉数据、生成图表、发到群里可以用 Python 把 DeepSeek API 调用和 Mermaid 渲染串起来。下面是一个最小可运行示例import requests import subprocess import json # 调用 DeepSeek API 生成 Mermaid 代码 def generate_mermaid(data_summary, chart_typexychart-beta): prompt f你是一个 Mermaid 代码生成器。根据以下数据生成一个 {chart_type} 图表。 只输出 mermaid 代码块不要任何解释。 数据{data_summary} 要求标题为「自动生成图表」x 轴为类别y 轴为数值。 resp requests.post( https://api.deepseek.com/v1/chat/completions, headers{ Authorization: Bearer YOUR_API_KEY, Content-Type: application/json }, json{ model: deepseek-chat, messages: [{role: user, content: prompt}], temperature: 0.3 # 降低随机性保证代码格式稳定 } ) content resp.json()[choices][0][message][content] # 提取 mermaid 代码块内容 if mermaid in content: code content.split(mermaid)[1].split()[0].strip() else: code content.strip() return code # 将 Mermaid 代码写入文件并渲染为 SVG def render_mermaid(code, output_pathchart.svg): with open(temp.mmd, w, encodingutf-8) as f: f.write(code) subprocess.run([mmdc, -i, temp.mmd, -o, output_path, -b, transparent], checkTrue) return output_path # 主流程 data 苹果 120香蕉 90橙子 150葡萄 80 mermaid_code generate_mermaid(data) print(生成的 Mermaid 代码) print(mermaid_code) render_mermaid(mermaid_code, fruit_sales.svg) print(图表已渲染为 fruit_sales.svg)这段脚本的逻辑分三步第一步构造提示词并调用 DeepSeek APItemperature设为 0.3 是为了让输出格式更稳定太高容易在代码块前后加解释文字第二步从返回内容里提取mermaid和之间的代码如果模型没按格式输出就退化为取全文第三步把代码写入.mmd文件调mmdc渲染成 SVG。YOUR_API_KEY需要替换成实际密钥DeepSeek 开放平台的 API 调用方式和 OpenAI 兼容改base_url和model名称即可切换。3.3 渲染失败的常见信号与快速定位mmdc渲染失败时不会告诉你具体哪一行语法错了只会报一个笼统的解析错误。快速定位的方法是先把代码粘进 Mermaid Live Editor在线编辑器看报错位置再对照修改。常见的失败信号包括图表类型拼写错误xychart写成xychart-beta之外的形式、轴标签包含未转义的特殊字符如中文括号、逗号、数据数组长度和轴标签数量不匹配。这些在下一章展开。4. 避坑与排查Mermaid 代码生成到渲染的五个翻车现场4.1 现象代码块渲染出来是灰色文本不是图原因Markdown 里代码块的语言标记写成了mmd、mermaidjs或者没写标记。大部分渲染器只认mermaid这一个标记。解决把代码块开头三个反引号后面的词改成mermaid。如果是 DeepSeek 直接输出的内容检查它有没有在代码块前加空格或换行——有些模型会在和mermaid之间插一个空格导致标记失效。用脚本提取时加一层strip()处理。4.2 现象柱状图代码在本地能渲染粘到公司文档平台就报错原因文档平台内置的 Mermaid 版本低于 10.x不支持xychart-beta语法。Mermaid 10 之前没有原生柱状图只能用graph模拟或者用pie替代。解决先确认目标平台的 Mermaid 版本。如果无法升级让 DeepSeek 改用pie或graph LR加节点样式来近似柱状图效果。提示词里加一句「目标渲染器版本低于 10请使用兼容语法」。另一个方案是本地用mmdc渲染成 SVG 后以图片形式插入文档绕开平台渲染器限制。4.3 现象DeepSeek 生成的代码里轴标签和数据对不上原因模型在生成x-axis和bar数组时偶尔会多写或少写一个元素。比如 x 轴写了 5 个月份bar 数组只有 4 个数值。Mermaid 渲染器遇到长度不匹配时可能静默截断或直接报错。解决在提示词里明确要求「x 轴标签数量必须与数据数组长度一致」并在生成后加一步校验。用 Python 做校验的逻辑很简单提取x-axis [...]里的元素个数和bar [...]或line [...]里的元素个数不相等就重新生成或手动补齐。这个校验步骤在批量生成时尤其重要人工逐张检查不现实。4.4 现象中文标签在渲染出的 SVG 里显示为方块原因mmdc默认使用的字体不包含中文字形渲染时中文被替换成占位符。这是 Mermaid CLI 的已知问题不是代码写错了。解决渲染时指定包含中文字形的字体。mmdc支持通过-c参数传入配置文件在配置里设fontFamily{ themeVariables: { fontFamily: Microsoft YaHei, SimHei, sans-serif } }保存为mermaid-config.json渲染命令改为mmdc -i input.mmd -o output.svg -c mermaid-config.json。如果服务器上没有中文字体需要先安装字体包否则配置了也没用。4.5 现象流程图节点文字太长导致布局错乱原因Mermaid 的自动布局算法对长文本节点的处理不够好节点文字超过一定长度后连线会交叉、节点会重叠。DeepSeek 生成流程图时如果不加约束容易把整段说明文字塞进一个节点。解决在提示词里限制每个节点的文字长度比如「每个节点文字不超过 10 个汉字详细说明放在节点外的注释里」。如果已经生成了长文本节点手动拆分把一个大节点拆成两三个短节点用--串联。流程图的graph TD布局对节点数量敏感超过 15 个节点建议拆成两张图。5. 进阶技巧把图表生成嵌进文档流水线5.1 用模板变量控制图表样式的一致性团队出图最怕风格不统一这张图是深色主题那张图是浅色这张图标题居中那张图标题靠左。解决办法是维护一套 Mermaid 初始化配置在每张图代码开头用%%{init: {...}}%%指令注入统一主题%%{init: {theme: base, themeVariables: {primaryColor: #4A90D9, fontFamily: Microsoft YaHei}}}%% xychart-beta title 统一风格示例 x-axis [A, B, C] y-axis 数值 0 -- 100 bar [60, 80, 45]这段init指令可以做成模板DeepSeek 生成代码后由脚本自动插入到每张图的第一行。这样无论模型输出的图表类型是什么配色和字体都保持一致。themeVariables里可配置的变量包括primaryColor、secondaryColor、lineColor、textColor等具体支持哪些变量取决于 Mermaid 版本建议在 Live Editor 里试好再固化到模板。5.2 把生成和渲染封装成可复用的函数如果每天都要跑一遍「拉数据 → 生成图 → 出文档」的流程把上一章的 Python 脚本封装成函数库更省事。我一般会拆成三个函数build_prompt(data, chart_type, style_hint)负责拼提示词call_deepseek(prompt)负责调 API 并提取代码render_and_save(code, path)负责渲染和落盘。主流程只负责读数据、循环调用、收集输出路径。封装之后换数据源只需要改主流程里的读取逻辑图表生成和渲染部分不用动。另一个好处是可以在call_deepseek里加重试机制如果提取到的代码为空或者校验不通过自动重新调用一次最多重试三次。重试时把 temperature 调高一点比如从 0.3 调到 0.5增加输出多样性避免连续三次拿到同样的错误结果。5.3 验证生成质量的三个检查点自动化流程跑起来之后不能完全信任输出。我一般设三个检查点第一代码块提取是否成功提取结果是否以合法的 Mermaid 图表类型关键字开头graph、sequenceDiagram、xychart-beta、pie、classDiagram等第二轴标签数量与数据数组长度是否一致这个用正则匹配就能做第三渲染是否成功mmdc返回码为 0 且输出文件大小大于 0 字节。这三个检查点都通过才把图归档到最终目录。任何一个失败就把原始数据和 DeepSeek 返回内容一起记到日志里方便事后排查是提示词问题还是数据问题。这套检查机制跑顺之后我基本不再逐张看图只在周报里扫一眼缩略图确认没有明显异常。从那以后我每次把 DeepSeek 接入任何生成类流程都强制走一遍「格式校验 → 渲染验证 → 异常记录」这三步不再直接信任模型输出。希望帮到你。本文还有配套的精品资源点击获取