企业官网建设流程全解析

图表不该被"画"出来：Mermaid Live Editor 把画图变成写作

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor

大多数人都误解了画图这件事：它的瓶颈从来不在"画"，而在"改"。而 Mermaid Live Editor——Mermaid.js 官方推出的免费在线编辑器——恰好就是为"改"而生的。它用"写文字"的方式制作流程图、时序图、甘特图，适合所有写文档、写技术方案、做汇报的人。这篇文章不列功能清单，也不罗列参数，只沿着一个反直觉的结论往下走：图表也许根本不该被"画"出来，而是该被"写"出来。

想想你上一次改图，都改了什么

回忆一下你做上一张图的完整过程。真正耗时间的，是拖拽那一下吗？不是。

是改。

客户说按钮文案换个词，你双击文本框删掉两个字，然后发现整个布局都歪了；产品说流程里少个分支，你推倒半张画布重新连线；过了两周你自己打开文件，看到"v2_最终_真的最终版"，已经不敢动任何一个节点。拖拽软件的第一笔永远是最轻松的，折磨人的是第二十一分钟。

而文字图表的改法完全不同。删两个字，就是删两个字；加一个节点，就是在文本里补一行；箭头方向错了，把-->换成<--。图表自己重新排版，你不需要手动对齐任何一根线。

更妙的是，正因为图是文本，它就有了文本的一切待遇：能放进 Git，能被 diff，谁在什么时候改了什么，一目了然。架构图终于可以跟着代码库一起被 review，而不是孤零零躺在某个网盘的文件夹里。它甚至能直接写进 Markdown 文档，PR 里再也不用单独上传一张截图。

这才是它最被低估的能力——不是"画得快"，而是"改得起"。

第一个词决定一切：一套语法走天下

另一个常见误解是：用文字画图，等于背语法、记快捷键，门槛高得吓人。实际打开编辑器你会发现，需要记的东西少得可怜。

新建图表，在左侧粘贴这几行：

sequenceDiagram participant 用户 participant 前端 participant 后端 用户->>前端: 点击登录 前端->>后端: POST /login 后端-->>前端: 返回 token

右侧立刻生成一张时序图：三个参与方从左到右排开，实线箭头是请求，虚线箭头是返回，冒号后面是消息内容。就这么几件事。

更关键的是这套语法的"入口"——第一行。sequenceDiagram是时序图，换成graph TD就是流程图，换成gantt就是甘特图，换成pie就是饼图。第一个词决定图表类型，后面的行全是同一套"谁连接谁"的表达逻辑。

打个比方：你不是在学十种画图软件，你只是在学一门语言里的十种句型。学会了主语、谓语、宾语，剩下的全是换词。

语法写错了也不用慌。你每敲下一个字符，右侧预览几乎同步更新，出错的行会被直接标出来——不用等到导出时才对着空画布发呆。

一张 URL 就是一个协作单位

图画好了，怎么交给别人？这一步是很多在线工具做得最差的环节，但 Live Editor 给了一个干净的答案：点开 Share 面板，你会得到两类链接。

• 只读链接：对方打开只能查看，适合给领导或客户过目；
• 可编辑链接：对方打开直接进入编辑器，改完还能再生成一条新链接发回给你。

不需要传文件，不需要建账号，不需要发微信压缩包。产品经理把可编辑链接丢给开发，开发改完丢回一条新链接，全程只有一个 URL 在传递。想要更正式一点，Share 面板还能生成一段 iframe 嵌入代码，把图表嵌进博客、wiki 或内部文档，主题、宽高、是否显示工具栏都能定制。

这背后有个朴素的设计：你画的图本来就被压缩进了 URL 里。整张图的代码被序列化、压缩、塞进链接，对方打开链接，还原出的是同一个编辑器状态。一张 URL，就是一份可运行的文档。

写坏了？历史记录兜底

既然是"写"，就难免写坏。好在编辑器上方有个历史记录面板，分三个页签：手动保存的 Saved、自动记录时间线的 Timeline，以及外部加载过的版本 Revisions。

改坏了？切到 Timeline，一键回到几分钟前。它不像文档编辑器的撤销那样只管上一步，而是颗粒度到整个图表的某个历史版本——今天上午的版本、昨晚的版本，都在。就像给每一次"写"都拍了快照，随时可以反悔，不用心疼重来。

对于把图表当文字来用的人，这个兜底几乎是必需品：写作最重要的安全感，是知道草稿永远丢不了。

想搬回自己服务器？一条命令的事

如果"数据存在别人的服务器上"让你不安，项目提供了 Docker 镜像：

docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor

一条命令，整套编辑器就运行在你自己的服务器上，图和配置都不离开你的地盘。

想动手改代码也行：克隆仓库（https://gitcode.com/GitHub_Trending/me/mermaid-live-editor）后执行pnpm install和pnpm dev即可本地启动。源码是 SvelteKit 写的，编辑器组件集中在src/lib/components/，核心状态与序列化逻辑在src/lib/util/，结构清晰，想深入研究的读者可以从这两个目录逛起。

别急着换工具，先试三分钟

回到开头那句：图表不该被"画"出来。

我知道你手头可能正用着一款趁手的拖拽软件。这篇文章不劝你立刻迁移，那既没必要也不现实。只建议你做一件事：下次需要画任何一张图时，先别打开那个拖拽软件，去 Mermaid Live Editor 里试着用文字把它写出来。

如果三分钟后你还是觉得拖拽顺手，那它确实不适合你，关掉就好；但如果它让你第一次意识到"图表原来可以这么轻"，那恭喜你，你多了一个新的思考工具。

工具并没有变魔术。变的是你表达结构的方式——你不再"画"一张图，而是"写"一张图。而表达方式，往往决定了一个人愿不愿意把一件事真正想清楚。至少对写技术文档的人来说，图表从此不再是画布上的副产品，而是和代码一样，可以被修改、被追踪、被反复打磨的日常文本。

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor