mermaid-live-editor:免费在线 mermaid 编辑器,浏览器里改代码即时出图

mermaid-live-editor:免费在线 mermaid 编辑器,浏览器里改代码即时出图【免费下载链接】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 代码,右侧预览实时渲染,链接可直接分享,不用装软件、不用注册账号——这就是 mermaid-live-editor:官方开源的 mermaid 实时编辑器。如果你经常在文档里放流程图、时序图,却讨厌用画图工具重画,它很适合你。 它替你省掉的事免安装免账号,打开浏览器就能画,MIT 协议开源,桌面端编辑器用的就是 Monaco。整张图的状态压缩进 URL,链接即图纸,不用来回传文件。历史每 60 秒自动存档,最多留 30 个版本,误操作时从 History 面板一键找回。 最快上手路径浏览器打开 mermaid.live,左侧编辑区自带一段示例流程图;想私有化部署,则按最后两步本地跑。删掉示例,换成自己的代码。最小流程图只需 5 行:graph LR A[下单] -- B{有库存} B --|是| C[发货] B --|否| D[通知仓库]右侧预览随改动即时刷新;语法写错时,报错位置直接标在左侧编辑区。想本地跑一份,node 24 环境下两行命令:git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev然后浏览器打开 http://localhost:3000 即可使用。 适合谁,不适合谁适合把架构图、流程图贴进技术文档的开发者:图就是文本,逻辑变了改代码、重新生成链接。适合要同步甘特图排期的项目经理:把只读链接发给团队,对方浏览器里直接看,不用传文件。别拿它画非 mermaid 图表:白板式自由布局、像素级手动摆位它不支持,只覆盖 mermaid 支持的图表类型和自动布局。 实际怎么用画服务调用链时,改用 sequenceDiagram 实时渲染表达谁调用谁时,时序图比流程图清楚。左侧写 sequenceDiagram,每条消息就是一行代码;调用链变了,增删一行,右侧图立刻跟着变。对方只看不改时,复制视图链接发过去图整个都在 URL 里。给看图的人生成 view 链接,给要动手的人生成 edit 链接;对方改完后回传一条新链接,一轮协作只走两条链接,全程没有文件。内网连不了外网时,用 Docker 自托管一份见 README 的 Docker 章节:镜像起来后 8000 端口即是完整服务;构建时还能把远程渲染服务指向自建实例,或干脆关闭远程链接。 一个小技巧误删了代码不用慌:History 每 60 秒自动存档一次,最多保留 30 个版本,打开历史面板选回旧版本即可,实现见 historyState.svelte.ts。现在打开 mermaid.live,把第一行 mermaid 代码贴进去试试;或者跑上面两行命令,起一份自己的私有实例。【免费下载链接】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），仅供参考