要在markdown中渲染mermaid流程图，必须用`mermaid包裹代码块；支持的编辑器包括github、gitlab、obsidian、typora（v1.0+）、vs code（需插件）和csdn；最简图用graph td定义上下布局，节点文字写在方括号内，判断用{ }，分支标签用|是|、|否|标注，连接线可选实线或虚线，形状可通过符号定制如(( ))、[( )]、> ]等，样式可借classdef统一设置。

要在Markdown文档里直接生成可渲染的流程图，必须用Mermaid语法写在代码块中，编辑器识别```mermaid标记后才会调用JavaScript引擎绘图，缺了这个包裹结构图就根本不会出现。

确认编辑器支持Mermaid

打开你的Markdown编辑器，检查是否原生支持Mermaid：GitHub、GitLab、Obsidian、Typora（v1.0+）、VS Code（装有Markdown Preview Mermaid Support插件）都已内置；CSDN博客编辑器也默认启用。如果预览区不显示图形，先别写代码——【不支持Mermaid的编辑器里敲再多语法也没用】。

在VS Code中没反应？按Ctrl+Shift+P调出命令面板，输入“Mermaid: Toggle Preview”看能否唤出独立预览窗口，能打开说明插件已生效。

写出第一个Mermaid流程图代码块

在Markdown文件中插入三个反引号开头的代码块，并在第一行注明语言为mermaid：

```mermaid

紧接着写图定义语句，最简流程图只需两行：

graph TD

A[开始] --> B[结束]

```

注意：graph TD表示从上到下布局，TD是Top-Down缩写；节点名A、B只是标识符，不显示在图中，方括号里的文字才是最终显示内容。

添加判断分支与连接文本

方法一：用菱形节点表示条件判断

把B节点改成B{是否完成？}，它会自动渲染为菱形；再补两行带标签的连线：

Xlsx To Markdown

文档转 Markdown 转换器 - 将 DOCX、PPTX、Excel 文件转换为 Markdown。用于从 Word 文档、PowerPoint 演示文稿或 E... 提取内容。

下载

B -->|是| C[提交成功]

B -->|否| D[重新填写]

方法二：用虚线箭头强调非主路径

把“重新填写”那条线换成B -.-> D[重新填写]，虚线在视觉上弱化次要分支，避免流程图显得臃肿。

注意：连接线上的文字必须用竖线|包围，且|是|和|否|两侧不能有空格，否则Mermaid解析失败，整张图变空白。

调整节点形状与样式

第一步：替换基础方括号为其他符号

① 把开始节点写成A((启动))→渲染为圆形，适合表示入口点；

② 把数据库操作节点写成E[(用户表)]→渲染为圆柱体，行业通用标识；

③ 把错误处理节点写成F>警告]→渲染为旗帜形，突出异常路径。

第二步：批量修改文字样式（可选）

在代码块末尾加一行classDef error fill:#ffebee,stroke:#f44336,color:#1a237e;，再给F节点加上class F error;，就能让警告节点变成红底白字。