Mermaid Live Editor：开会画流程图不用再装 Visio，浏览器里就能搞定

每次开会聊到流程，最烦的就是临时要画张图。Visio 装了吃灰，在线工具要么收费、要么上传公司资料心里没底，PPT 里拖箭头拖到血压高。最近我试了个叫 Mermaid Live Editor 的免费在线工具，打开浏览器就能画，还能把白板上的草图直接转成可编辑代码，办公场景意外地合适。

什么是 Mermaid

Mermaid 是一个开源的图表绘制方案，用类似 Markdown 的文本语法来定义流程图、时序图、架构图这些。它基于 JavaScript，2019 年拿过 JS Open Source Awards 的「The most exciting use of technology」奖项，MIT 协议开源，GitHub 上 stars 很多。简单说就是「写文字就能出图」，不需要像传统工具那样拖拖拽拽，改图时直接改几行文本，版本管理也特别友好。

Mermaid Live Editor 实测

Mermaid Live Editor 是 Mermaid 官方出的在线编辑器，网址是 Mermaid Live Editor。我实测下来，下面几个特点对办公人群挺讨喜。

特性	说明
免费免安装	打开浏览器直接用，没有下载和注册门槛
33 种图表类型	流程图、时序图、类图、甘特图、思维导图、桑基图等都有
实时渲染	左边写代码，右边立刻出图，改字同步更新
浏览器端处理	图表数据不上传服务器，适合画内部资料
多格式导出	支持 PNG、SVG、PDF 和 MMD（Mermaid 原生代码）
可分享链接	生成 URL 直接发给同事，对方打开就是同一份图

为什么办公人群值得用

真正好用的点不是花里胡哨，就两个，快，不打扰。我平时主要用在这么几个地方。

• 会议纪要里的流程图，边开会边写，5 分钟出图
• 项目排期甘特图，改日期直接改文本，不用重新拖时间轴
• 系统交互时序图，开发文档配图神器
• 组织架构图，节点增减就是加一行减一行
• 用户旅程图，比 PPT 整齐，比 Visio 轻量

手绘草图也能转代码

这次我最想提的是它顶部的 Sketch to Mermaid 功能。你可以把白板上的手绘草图、纸上的流程图拍照上传，甚至直接粘贴截图，再加一句上下文说明，它就能帮你生成 Mermaid 代码。生成后贴回编辑器里微调一下布局，就能导出正式图表。评论区那句「搭配手绘转 mermaid，简直完美」说的就是这个，开会时随手画一画，会后不用从零重画。

重要的是支持中文，直接在上方切换就行。

上手建议和避坑

• 第一次用可以直接点左下角的 Examples，复制官方示例改文字，比自己硬背语法快
• 中文节点记得用方括号包起来，例如 A[收到需求]
• 复杂图建议先在大纲里把节点和箭头关系理清楚，再写代码，不然容易越写越乱
• 手绘识别对清晰线条效果才好，歪歪扭扭的草图识别完要手动修

我现在画一些不太复杂的流程图，基本不会先开 Visio 了，Mermaid Live Editor 免费、够用、还不用担心文件存在别人服务器上。如果你也经常被流程图折磨，花十分钟试一下，大概率能省不少事。

你现在开会画流程图用什么工具？有没有更好用的，留言告诉我。

如果在公众号无法看到本文所涉链接，可回复「菊座」或阅读原文查看。