vscode-mermaid-preview 实战指南手把手从 0 到 1 在 VS Code 里画 Mermaid 图表【免费下载链接】vscode-mermaid-previewPreviews Mermaid diagrams项目地址: https://gitcode.com/gh_mirrors/vs/vscode-mermaid-previewvscode-mermaid-preview 是 Mermaid.js 官方团队维护的 VS Code 插件让你在编辑器里写完图表代码就能立刻看到成品。这篇文章会像同事带新人一样带你把编写、预览、导出、协作这一整条 Mermaid 图表绘制链路完整走一遍。一个真实的下午反复切窗口的烦恼先讲一件我自己的糗事。上周要给一份技术方案配系统流程图我开着画图工具、又开着文档编辑器两头来回切。改一个节点名字得先回到工具里改再截图、粘贴、重新排版同事发来的图更是五花八门——有人用在线编辑器有人用 PPT有人直接截屏合并文档时恨不得把每张图都重画一遍。后来换上vscode-mermaid-preview这件事就变成了一行代码的事。它的核心思路是把图表的源代码和渲染结果放在同一个窗口里你写什么图表立刻长成什么样。下面我们从零开始把它用起来。三分钟上手让第一张流程图出现在屏幕上安装没什么好说的打开 VS Code 扩展面板搜 Mermaid Preview点击安装即可。装好后新建一个文件命名为first.mmd——这个扩展名插件会自动识别为 Mermaid 语言模式资源管理器里还会带上 Mermaid 的小图标一眼就能认出来。往文件里粘这么几行注意看编辑器右上角插件已经把窗口分成了两栏左边是代码右边是实时渲染的流程图。你每敲一个字符、每改一个箭头方向右边的图立刻跟着变——这种所见即所得的体验就像一台带预览屏的打字机敲下去立刻看到字。左边改代码右边图就变这就是 vscode-mermaid-preview 的实时预览几个小提示.mmd文件自带完整的语法高亮错误行会用红色波浪线标出来鼠标悬停还能看到出错原因如果插件没有自动激活点右下角的语言选择器手动选 Mermaid 即可。也可以打开命令面板CtrlShiftP输入 Mermaid Preview: Create Diagram直接新建一个带模板的图表文件。在 VS Code 中画出常用图表四种真实场景在 VS Code 中画流程图只是起点这个插件支持的图表类型超过 20 种。下面挑四个最常见的场景给出可以直接抄的Mermaid 图表示例。流程图梳理业务分支、逻辑判断上面刚演示过不再重复。序列图描述接口调用、消息传递的时间顺序写接口文档、梳理业务流程最常用ER 图设计数据库表结构时实体、字段、关系一目了然甘特图项目排期、任务规划用文字就能描述时间轴写完右侧预览立即渲染。图太大看不过来按住鼠标左键可以拖拽平移滚轮缩放预览面板上还有重置按钮一键恢复适应屏幕的大小而且缩放状态在你编辑时不会被重置。图表特别复杂时可以多用subgraph把相关节点圈成一组相当于给图表分文件夹结构立刻清爽不少。用文字描述消息流转序列图即刻成型这类用文本写图的方式还有一个隐藏好处图表就是代码能进 Git 做版本管理团队里谁改了什么清清楚楚再也不会出现我明明更新了图文档里还是旧版的尴尬。让图表走进文档与团队Markdown、导出与云端协作图表画好了下一步是让它流动起来。在 Markdown 里直接渲染。写技术文档时只要用标准的mermaid在设置里确认 Enable Markdown Preview 处于开启状态如果同时装了多个 Markdown 相关扩展先禁用其他扩展做排除测试。5. 预览和代码不同步。保存文件CtrlS后图表会自动更新个别情况下渲染进程会卡住切一下标签页或重启预览即可。遇到说不清的问题打开开发者工具Help → Toggle Developer Tools看控制台报错再把报错贴给 AI或者到项目 Issues 里搜一搜——八成已经有前人踩过同一个坑。从今天起让图表变成代码的一部分现在回头看那个反复切窗口的下午问题的本质是图表和代码被人为拆开了。vscode-mermaid-preview把两者合到了一起——图表是文本文本进版本库库里的变化随时渲染成图。学会它之后不管是写接口文档、设计数据库、做项目排期还是画系统架构都不再需要打开另一个软件这个动作了。如果还想再深入推荐两个项目内的资料核心功能说明在 docs/MermaidFreeFeatures.md云端、AI、同步等高级特性在 docs/MermaidAdvancedFeatures.mdsyntaxes/目录里存放着各类图表语言的语法定义翻一翻能学到不少冷门写法更新日志在 CHANGELOG.md每次大版本都值得扫一眼。工具就位语法不难剩下的就是动手了。去建一个.mmd文件把今天文章里的示例粘进去画出你的第一张 Mermaid 图表吧。【免费下载链接】vscode-mermaid-previewPreviews Mermaid diagrams项目地址: https://gitcode.com/gh_mirrors/vs/vscode-mermaid-preview创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考