想画流程图又不想拖拽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 Live Editor界面简单到一眼能看完左边是代码编辑区右边是实时预览区。你每敲下一个字符右侧图表几乎同步刷新语法写错了编辑器直接在你出错的那一行标出来而不是等你导出时才对着空画布发呆。这种感觉很像在餐馆点菜而不是自己下厨。拖拽式画图像自己下厨备料、切菜、摆盘都要亲力亲为想改口味就得重新下锅而在这里你只需要在菜单上写下红烧肉、微辣后厨会自动把菜端上来——改菜单只是划掉一行字的事。五分钟画出一张可用的流程图只需要记三个符号不用注册不用选模板新建一张在线流程图只需要三步。第一步把下面这几行代码粘进左侧编辑器graph TD A[开始] -- B[填写账号密码] B -- C{验证通过?} C --|是| D[进入首页] C --|否| B第二步看右边。一张流程分明的图已经躺在那里了。第三步改两个字试试——把填写账号密码改成输入邮箱验证码观察图表自己重新排版。这几行代码值得逐行认识graph TD声明这是一张自上而下Top Down的流程图方括号[开始]是普通节点花括号{验证通过?}是判断节点箭头--表示流向|是|、|否|是分支上的标签。你只需要记住方括号是框、花括号是岔路口、箭头是路这一句话就握住了 Mermaid 语法中最核心的八成。这套语法是通用的。学会了流程图时序图、甘特图、饼图、类图都能触类旁通因为它们共用同一套谁连接谁的表达逻辑。想系统过一遍语法官方文档值得花十分钟浏览你会在上面找到用文字画流程图的全部素材。修改零成本是文本图表最被低估的一张牌拖拽画图最大的隐性成本其实是改。改文字要重排挪节点要重新对齐改到第三轮时你的文件名就变成了最终版_v3_真的最终版.mmd。而文本图表的每一次改动都只是一次普通的文字编辑删两个字、加一个节点、把箭头方向反过来剩下的交给渲染器。更妙的是正因为它是文本它可以放进 Git 做版本管理、可以被 diff——谁在什么时候改了什么一目了然。写技术文档的人应该能感受到这种降维打击架构图终于可以跟着代码库一起被 review、被追踪而不是孤零零躺在某个网盘的文件夹里。它甚至可以直接写进 Markdown 文档PR 里再也不用单独上传一张截图。改坏了也别慌历史记录像文档撤销但颗粒度是整张图Live Editor 还替写这个动作兜了底。编辑区上方有个历史记录面板分三个页签Saved手动书签看到满意的一版就点一下保存Timeline自动时间线每过一分钟就自动给当前状态拍一张快照你什么都不用做Revisions从别人发来的链接里恢复过的版本也会被留在这里。手滑删掉一大段、改出一张面目全非的图打开 Timeline 回到几分钟前。它像文档编辑器的撤销但颗粒度是整个图表的历史版本不用心疼重来。想研究自动快照是怎么实现的可以从项目里的src/lib/components/History/目录逛起那是整套历史记录的前端所在。一张 URL 就是一个协作单位图画好了怎么交给别人点开 Share 面板你会拿到两类链接只读链接对方打开只能查看适合给领导或客户过目可编辑链接对方打开直接进入编辑器改完还能生成一条新链接发回给你。这构成了一个完整的协作闭环产品经理把可编辑链接丢给开发开发改完丢回一条新链接全程不传文件、不建账号。Share 面板还能生成一段 iframe 嵌入代码主题、宽高、是否显示工具栏都能定制——把它嵌进博客、wiki 或内部文档一张图就活在了你的文章里。有个细节值得多说一句你画的图并不会上传到任何人的服务器。Share 面板里写得很直白——你创建的图表内容永远不会离开你的浏览器。整张图被压缩编码进那一长串 URL 里链接即内容链接即交付。新手最容易踩的三个坑第一次用 Mermaid 在线编辑器你大概率会掉进这三个坑觉得语法很难。其实入门只需要三个符号方括号、花括号、箭头。先把流程图玩熟其他图自然触类旁通别一上来就啃高级图型。只盯着预览不看报错信息。语法出错时编辑器不仅会标红出错行还会在底部给出具体提示——学会读这行提示比死记语法进步快得多。试图一次画对。别怕写错Timeline 每分钟自动留档把想到的先写出来错了再改反正有后悔药。把成品交出去导出、嵌入与自己部署需要交付成品时可以直接导出 SVG 或 PNG 文件代码本身可以存成.mmd文件随时重新打开继续编辑。也可以直接复制 Markdown 片段贴进文档格式都不用调。如果你对数据存在别人的服务器上有顾虑项目提供了 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考