把整张图塞进一个链接:Mermaid Live Editor 在线图表编辑器

把整张图塞进一个链接: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,这个免费的在线图表编辑器,打算用文字把这张图重新画出来。图不存服务器,它藏在地址栏的 # 片段里多数协作工具把图存在服务器,给你一个查看地址。这个工具不一样。每敲一个字符,页面都会把当前的图代码、主题、缩放参数打包成一小段文字,压缩、编码后,贴进 URL 的 # 片段里。对方打开链接,页面把它解开,图就出现了。链接本身,就是这张图。这个机制在 src/lib/util/state.svelte.ts:它汇总页面状态,交给 src/lib/util/serde.ts 做压缩和编码,再写进地址栏。类似寄重要文件:不是留一个仓库编号,而是把文件直接贴在快递盒上手递过去,对方到了就能拆。不用注册账号,不用传文件,地址栏全带着。改一个字符,片段就变,不同版本的链接天然不同。把链接发给对方,对方打开就是同一张图;他改完,再把新链接发回来。手写第一张图:贴上 6 行文字,图立刻出现打开编辑页,在左侧代码区贴上这段:graph TD A[用户点击购买] -- B{有库存?} B --|有| C[创建订单并扣库存] B --|无| D[提示已售罄] C -- E[发送订单邮件]右侧立刻出现一张从上往下的流程图:五个节点,一个菱形判断,两条分支。这套写法覆盖了最常见的图形元素:节点、判断、分支标签、箭头。写错一个字符,那一行会被标红,底部面板会指出是哪一行。不用等到导出才发现出错。时序图、甘特图、类图,用的都是同一套谁连着谁的写法,会这个就会那些。点一下就能回到上一版:编辑器自带时间线想回到之前某个版本,用编辑区上方的 History 面板。它有三个页签,最常用的是 Timeline:每隔一分钟自动存一版,保留最近 30 个。像相机开了连拍:你不用按快门,相机每隔一分钟替你拍一张。改崩了怎么办?在时间线上找到那个时间点,点一下,图就变回那一刻的样子。Saved 页签是手动快照,你觉得这版能用就存一次;Revisions 存的是从 Gist 等来源加载时留下的修订记录。这些存档想带去另一台电脑,导出成一个 JSON 文件,新机器上再导回来即可。逻辑在 src/lib/components/History/,一分钟的间隔和 30 个上限都写成常量,方便核对。把图放进代码库,diff 里看谁改了什么图就是一个 .mmd 文本文件。它像代码文件一样进仓库,每次改动都会留下 diff:谁加了哪个节点、什么时候换了箭头方向,一眼看清。审图和审代码用的是同一个流程。图还能直接写进 Markdown,提 PR 时不必再单独上传一张截图。担心图要经过公共服务的,可以用官方 Docker 镜像部署到自己的服务器,一条命令启动:docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor想动手改源码,执行git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor,再pnpm install、pnpm dev,本地就能跑起来。如果你的图是上百个节点、还要精修排版的海报,自动布局替代不了手工微调,拖拽画布仍有位置。这个工具更擅长流程图、时序图、甘特图这类结构清晰、经常要改的图。第一步:用文字画一张图,把链接发出去下次要画图,先用文字把它说出来:打开编辑页,画一个三节点的流程图,再故意改一次箭头,把新链接发出去。试了觉得不合适,关掉它,回去用拖拽的,不亏。【免费下载链接】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），仅供参考