Mermaid是一种基于文本的、类似 Markdown 的代码绘图语言。它的核心理念是“用代码绘图”Diagrams as Code。你不需要使用鼠标去拖拽、对齐图形只需输入简单的文本命令Mermaid 引擎就会自动帮你渲染出结构清晰的图表。核心特点易于维护因为是纯文本你可以像修改代码一样随时修改图表非常适合纳入 Git 等版本控制系统。自动布局你只需定义“节点”和“线条的指向”引擎会自动计算最佳的图形摆放位置。支持广泛能够绘制流程图Flowchart、时序图Sequence Diagram、甘特图Gantt、类图Class Diagram、思维导图Mindmap等十几种图表。如何在 VS Code 中打开并编写 Mermaid 文件在 VS Code 中我们通常将 Mermaid 代码嵌入到 Markdown.md文件中进行编写和查看。请按照以下步骤配置和使用第一步安装预览插件VS Code 默认支持 Markdown 文本但要实时看到图表渲染效果需要安装一个扩展插件。点击 VS Code 左侧边栏的Extensions扩展图标快捷键CtrlShiftX或CmdShiftX。在搜索框中输入Markdown Preview Mermaid Support。点击Install安装。第二步新建并编写文件在 VS Code 中新建一个文件保存为demo.md确保后缀是.md。在文件中使用 Markdown 的代码块语法来包裹 Mermaid 代码并且必须在开头声明语言为mermaid注意全部小写。你可以尝试粘贴以下示例代码Markdownmermaid flowchart LR A[编写文本代码] -- B(插件实时解析) B -- C{语法正确?} C --|是| D[渲染出精美图表] C --|否| E[抛出解析错误]#### 第三步开启侧边栏预览 1. 保持你的 .md 文件处于打开状态。 2. 点击 VS Code 编辑器**右上角**的 **Open Preview to the Side向侧边打开预览** 按钮图标通常是一个分栏的 Markdown 符号或带放大镜的纸张。 3. 此时编辑器右侧会弹出一个实时同步的预览窗口直接把刚刚的代码转换成可视化的流程图。 --- ### 日常编写的“黄金守则” 为了避免你在编写时遇到报错请牢记以下三条避坑指南 1. **类型声明独占一行**形如 flowchart TD 或 sequenceDiagram 的图表类型声明必须单独写在第一行后面**不能**直接跟注释或代码。 2. **特殊符号加双引号**如果节点的文字中包含英文括号 ()、方括号 [] 等 Mermaid 的保留关键字必须用双引号把文字括起来例如A[调用函数(main)]。 3. **标准换行与分割**在图形节点内换行请使用 br/画分割线请使用 hr/。