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 官方做的实时编辑器。 项目速览Mermaid Live Editor 的定位很直接编辑、预览、分享三合一。技术栈是 SvelteKit Svelte桌面端内嵌 Monaco 编辑器移动端用 CodeMirrorMIT 协议开源。仓库地址https://link.gitcode.com/i/f8cce19ddb4e5cab568287995739131d功能与部署细节见 README。 最短上手路径打开在线页面默认是双栏布局左边代码区、右边预览区且自带一段示例图表。清空示例输入下面这段graph TD A[开始] -- B{是否可行} B --|是| C[执行] B --|否| D[重新评估] D -- B C -- E[完成]右侧立刻画出判定分支和回退线。接着到 Actions 区域下载 SVG 或 PNG或者直接把地址栏链接发给同事——链接本身就是分享链接因为代码已经编码在里面了。 核心能力清单能力一句话说明适合谁实时渲染代码每敲一下右侧预览就同步刷新所有画 mermaid 图的人双格式导出在 Actions 区把当前图存成 SVG矢量或 PNG位图需要插图进 PPT、文档的人只读分享复制链接发给对方打开即看图对方改不了发布团队、评审场合可编辑分享对方打开链接可继续改改完回传新链接需要协作改图的场景代码辅助mermaid 语法高亮、补全报错位置直接在代码区标出常写图表语法的人外部渲染服务可对接 mermaid.ink、Kroki 获取远程图片链接可通过 Docker 构建参数配置需要把图嵌进外部系统的开发者 实战场景写技术文档的开发者架构图直接以 mermaid 文本维护在文档里逻辑变了改代码就行不再维护一堆过期图片。收益是图和代码永远同步。排项目计划的项目经理甘特图写好后右侧直接看时间线把只读链接丢进团队群。收益是没人再问这图谁发我的、最新版在哪。需要他人微调的协作者发一个可编辑链接过去对方改完回传新链接。收益是一轮协作不用走任何文件传输。️ 进阶玩法节点一多用 subgraph 把相关节点圈成分组层次立刻清楚起来graph TB subgraph 前端 A[界面] -- B[状态管理] end B -- C[API]时序图里用 as 给参与者起显示名对外分享时不用解释 U、S 分别是谁sequenceDiagram participant U as 用户 U-S: 请求数据 S--U: 返回结果 参与贡献本地跑起来只需要 Node.js当前 LTS 版本和 pnpmgit clone https://link.gitcode.com/i/f8cce19ddb4e5cab568287995739131d cd mermaid-live-editor pnpm install pnpm dev -- --open打开 http://localhost:3000 就能看到开发中的编辑器。想读源码两处最值得看编辑器组件在 src/lib/components/状态管理和 URL 序列化逻辑在 src/lib/util/——状态经 pako 压缩编码进地址栏正是分享链接能带着图走的原因。写在最后现在打开 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），仅供参考