企业官网建设流程全解析

vscode-mermaid-preview 实战指南：手把手从 0 到 1 在 VS Code 里画 Mermaid 图表

【免费下载链接】vscode-mermaid-previewPreviews Mermaid diagrams项目地址: https://gitcode.com/gh_mirrors/vs/vscode-mermaid-preview

vscode-mermaid-preview 是 Mermaid.js 官方团队维护的 VS Code 插件，让你在编辑器里写完图表代码就能立刻看到成品。这篇文章会像同事带新人一样，带你把编写、预览、导出、协作这一整条 Mermaid 图表绘制链路完整走一遍。

一个真实的下午：反复切窗口的烦恼

先讲一件我自己的糗事。上周要给一份技术方案配系统流程图，我开着画图工具、又开着文档编辑器，两头来回切。改一个节点名字，得先回到工具里改，再截图、粘贴、重新排版；同事发来的图更是五花八门——有人用在线编辑器，有人用 PPT，有人直接截屏，合并文档时恨不得把每张图都重画一遍。

后来换上vscode-mermaid-preview，这件事就变成了一行代码的事。它的核心思路是把图表的"源代码"和渲染结果放在同一个窗口里：你写什么，图表立刻长成什么样。下面我们从零开始把它用起来。

三分钟上手：让第一张流程图出现在屏幕上

安装没什么好说的，打开 VS Code 扩展面板，搜 "Mermaid Preview"，点击安装即可。装好后新建一个文件，命名为first.mmd——这个扩展名插件会自动识别为 Mermaid 语言模式，资源管理器里还会带上 Mermaid 的小图标，一眼就能认出来。

往文件里粘这么几行：

注意看编辑器右上角：插件已经把窗口分成了两栏，左边是代码，右边是实时渲染的流程图。你每敲一个字符、每改一个箭头方向，右边的图立刻跟着变——这种"所见即所得"的体验，就像一台带预览屏的打字机，敲下去立刻看到字。

左边改代码，右边图就变，这就是 vscode-mermaid-preview 的实时预览

几个小提示：.mmd文件自带完整的语法高亮，错误行会用红色波浪线标出来，鼠标悬停还能看到出错原因；如果插件没有自动激活，点右下角的语言选择器手动选 "Mermaid" 即可。也可以打开命令面板（Ctrl+Shift+P），输入 "Mermaid Preview: Create Diagram"，直接新建一个带模板的图表文件。

在 VS Code 中画出常用图表：四种真实场景

"在 VS Code 中画流程图"只是起点，这个插件支持的图表类型超过 20 种。下面挑四个最常见的场景，给出可以直接抄的Mermaid 图表示例。

流程图：梳理业务分支、逻辑判断，上面刚演示过，不再重复。

序列图：描述接口调用、消息传递的时间顺序，写接口文档、梳理业务流程最常用：

ER 图：设计数据库表结构时，实体、字段、关系一目了然：

甘特图：项目排期、任务规划，用文字就能描述时间轴：

写完右侧预览立即渲染。图太大看不过来？按住鼠标左键可以拖拽平移，滚轮缩放，预览面板上还有"重置"按钮一键恢复适应屏幕的大小，而且缩放状态在你编辑时不会被重置。图表特别复杂时，可以多用subgraph把相关节点圈成一组，相当于给图表"分文件夹"，结构立刻清爽不少。

用文字描述消息流转，序列图即刻成型

这类"用文本写图"的方式还有一个隐藏好处：图表就是代码，能进 Git 做版本管理，团队里谁改了什么清清楚楚，再也不会出现"我明明更新了图，文档里还是旧版"的尴尬。

让图表走进文档与团队：Markdown、导出与云端协作

图表画好了，下一步是让它"流动"起来。

在 Markdown 里直接渲染。写技术文档时，只要用标准的mermaid；在设置里确认 "Enable Markdown Preview" 处于开启状态；如果同时装了多个 Markdown 相关扩展，先禁用其他扩展做排除测试。

5. 预览和代码不同步。保存文件（Ctrl+S）后图表会自动更新，个别情况下渲染进程会卡住，切一下标签页或重启预览即可。遇到说不清的问题，打开开发者工具（Help → Toggle Developer Tools）看控制台报错，再把报错贴给 AI，或者到项目 Issues 里搜一搜——八成已经有前人踩过同一个坑。

从今天起，让图表变成代码的一部分

现在回头看那个反复切窗口的下午，问题的本质是：图表和代码被人为拆开了。vscode-mermaid-preview把两者合到了一起——图表是文本，文本进版本库，库里的变化随时渲染成图。学会它之后，不管是写接口文档、设计数据库、做项目排期，还是画系统架构，都不再需要"打开另一个软件"这个动作了。

如果还想再深入，推荐两个项目内的资料：核心功能说明在 docs/MermaidFreeFeatures.md，云端、AI、同步等高级特性在 docs/MermaidAdvancedFeatures.md；syntaxes/目录里存放着各类图表语言的语法定义，翻一翻能学到不少冷门写法；更新日志在 CHANGELOG.md，每次大版本都值得扫一眼。

工具就位，语法不难，剩下的就是动手了。去建一个.mmd文件，把今天文章里的示例粘进去，画出你的第一张 Mermaid 图表吧。

【免费下载链接】vscode-mermaid-previewPreviews Mermaid diagrams项目地址: https://gitcode.com/gh_mirrors/vs/vscode-mermaid-preview