用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流程图实时预览把晨会纪要变成图打开编辑器右侧预览区挂着一张圣诞节购物流程图——这是它自带的示例正好用来试手。我把示例代码清空敲下第一行graph TD A[开始] -- B[处理数据] B -- C{判断条件} C --|是| D[执行操作] C --|否| E[结束]最后一个字符落下的同时右侧已经多出一张图。不是点击刷新后是同时。方括号里的字、箭头上的标签改哪个图跟着改哪个。它没有保存按钮。你不需要主动想起保存这件事——编辑器在你停手约一秒后重新渲染渲染慢的时候它会自己降速等一等细节藏在autoSync.ts那一百五十毫秒的阈值里。这大概是我第一次觉得工具可以安静到让人忘记它的存在。十点半一条mermaid分享链接同事自己动手改图晨会流程图需要传给隔壁组的同事。按照以往的习惯我应该导出图片放进文档再等对方提一堆这里能不能改一下的修改意见。这次我只发了一条链接。同事点开看到的不是一张死图而是和我这边一模一样的编辑界面。他对我说你直接改改完把新链接发我。——这句话我只说了前半句后半句是编辑器的功劳。整个图表被压缩进链接本身对方改完生成一条新链接回传给我一来一回图就定稿了。链接就是文件。这句话我后来想了很久直到那天下午才真正相信分享和协作原来可以只是发一个 URL这么轻的事。午饭后mermaid甘特图三行代码讲清排期下午有个项目会要过排期。我原本准备了一张表格数字密密麻麻讲起来自己都费劲。想起编辑器支持多种图表类型我试着把排期写成甘特图。gantt关键词开头日期写在方括号里剩下的交给它。两分钟一张横条图把谁在什么时候干什么摊在所有人面前。会上没人再问第三周是哪个阶段因为图里写得很清楚。流程图、时序图、甘特图都共用一套语法学会一个其他只是换关键词的事。下午四点半mermaid语法报错红标记替我指出行号改一张时序图时我漏了一个右括号。第一版报错信息是冷冰冰的一段英文我正准备逐行找问题编辑器已经在错误面板里给出了具体行号代码区对应位置浮起红色的错误标记。试了两次我完全不再看错误正文——跟着红标记走就行。修完之后误删的一段分支图又让我出了一身冷汗但这次我多了一重保险编辑器每隔一分钟会自动存一次快照。打开 History 面板的 Timeline 标签十分钟前的版本就躺在那里点一下原样回来。晚上七点换主题换手绘风导出PNG和SVG晚上的活是给文档配图。同一张架构图我试着把主题从默认换成 dark整个页面跟着变暗图表配色同步切换再把样式从 classic 换成 handDrawn所有框线瞬间变成手绘笔触严肃的技术图一下子有了人情味。十几个主题里我最终挑了一版最衬文档气质的。导出也很干脆——PNG 一张SVG 一张文件名自动带上日期时间。手绘模式下导出编辑器还会悄悄修一下文字被裁切的问题这属于它自己处理的小麻烦用户不需要知道。夜里十点嵌进博客链接里藏着一整个图表博客要发一篇带交互图表的技术文章。传统做法是插图但这次我选了另一个出口Share 面板里有一组嵌入代码iframe 和 Web Component 两种格式任选。粘贴进页面读者看到的是一张可以直接缩放、可以继续编辑的活图不是截图。整个白天我都没注意到一件最重要的事Share 面板底部写着一句话——你创建的图表内容不会离开浏览器。所有数据被压缩进链接、存在本地服务器自始至终没有经手我的图。关灯前它替你记着每一分钟合上电脑前我打开 History 的 Timeline 标签一整天的创作轨迹按分钟排开晨会的流程图、午后的甘特图、傍晚的时序图每一版都在。这个页面没有逼我注册、没有弹窗广告、没有导出水印它只是安静地记着然后在我需要的时候原样交还。这个编辑器本身也是开源的用 SvelteKit 写成从源码克隆下来跑两条命令就能在本地起一个git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor pnpm install pnpm dev -- --open想把它部署成团队内部服务官方也准备了现成的容器镜像。但我猜大多数人和我一样并不需要部署什么——打开网页把想法画成图发给该看的人就足够了。第二天早上我打开电脑第一件事还是打开那个页面。这一次不是为了画图我只是想看看昨天那版流程图Timeline 里还记不记得。【免费下载链接】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），仅供参考
