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-live-editor 换了一个思路让图表本身成为文本。它是一个免费在线的 Mermaid 图表编辑器Mermaid 是用文本语法描述图表的工具你在左侧敲几行代码右侧的流程图、时序图、甘特图就实时画出来画完之后可以直接下载图片也可以把链接发给别人全程不用注册。画一张能跟着逻辑走的流程图打开编辑页就是左右两栏左边代码区右边预览区中间可以拖动分隔条调整比例。代码区带了语法高亮和补全桌面端用 Monaco 编辑器移动端用 CodeMirror写错语法时会在代码区直接标出出错位置预览也随之暂停更新改对即恢复。不知道从哪下手的话左下角的 Sample Diagrams 卡片按类型提供示例Flowchart、Class、Sequence、Gantt、Entity Relationship、State、Mindmap 等点一下就把示例代码填进编辑器。最简的一张流程图长这样graph LR A[接收需求] -- B[设计] B -- C[开发] -- D[测试] D --|不通过| C D --|通过| E[发布]两个让图更好读的小技巧节点太多时用subgraph把相关节点分组比如把网关、服务、数据库各归一组时序图里参与者太长时用participant U as 用户给它起个直观的显示名。如何导出PNG、SVG 和 Markdown 三种拿法画完之后所有导出操作都集中在左下方的Actions卡片里点PNG或SVG直接下载当前图表。PNG 的尺寸有三档Auto 自动适配或者手动指定 Width / Height方便控制它放进文档或幻灯片之后的实际大小两个按钮旁各有一个外链入口分别指向 mermaid.ink 和 Kroki 这两个远程渲染服务点开会得到同一张图的在线地址图由服务器渲染托管你不用自己存文件Copy Markdown复制的是一段 Markdown 图片代码粘进技术文档即可直接引用这张图。拿两种链接只读的给观众可编辑的给同事这张工具最核心的设计藏在地址栏里URL 的 hash 部分就是整张图表的状态——代码和配置先经过 deflate 压缩再 Base64 编码序列化逻辑在 src/lib/util/serde.ts所以大图对应的链接也不会特别长而且图表内容不需要服务器存储从不离开你的浏览器。同一张图因此能发出两种链接只读链接/view 页面对方只能看图不能改适合发给评审方和团队群里可编辑链接/edit 页面对方拿到后可以直接改改完把新链接回传给你一轮协作就闭环了不用来回传图片文件。架构变了怎么办改文本代码就行。图、分享链接、嵌入片段全部由同一个 URL 驱动评审方打开链接看到的永远是最新版本图不会过期。把活图嵌入博客iframe 与 Web component 两种方式需要图表长期挂在网站或博客上的话用顶部工具栏的Share按钮打开分享对话框下半部分是 Embed 区域可以选主题theme、外观classic / handDrawn / neo、浅色或深色、宽高还能开关缩放控件和背景网格生成的嵌入片段有两种格式可切换iframe和mermaid-embed自定义元素都是复制即可用勾选 Preview 还能在对话框里先看看嵌入后的效果。粘进博客之后读者拿到的不是一张静态截图而是一张可以缩放、可以平移的活图。历史面板每 1 分钟自动存档改飞了也能找回编辑器里的 History 面板点顶栏的时钟图标展开分两个标签页Timeline整个会话期间每 1 分钟自动保存一个快照最多保留 30 条每一行都带一个独立链接可以直接在新标签页打开对比Manual点 Save 手动给当前状态打个书签之后随时一键恢复。整份历史还能导出为 JSON 文件换台电脑再导入回来做过的版本不会丢。打开别人的链接时它先替你查一遍配置分享链接里除了代码还带着 Mermaid 配置而配置里可能藏有危险项放宽安全等级、__开头的原型污染键、带 HTML 或url(data:)的值潜在的 XSS 向量。加载来自 URL 的状态时编辑器会先过一遍 src/lib/util/sanitize.ts 的安检发现风险项会弹窗列出具体内容确认后剔除如果你信任链接来源点取消则原样保留。来源不明的链接可以放心点开。本地跑起来克隆后两条命令项目基于 SvelteKit Svelte 5 构建MIT 协议开源用 Docker 也能直接起。本地开发需要 Node.js 24 及以上版本和 pnpmgit clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev启动后打开 http://localhost:3000 就是和线上同一套编辑器。想参与贡献的话两个目录最值得先读src/lib/components/ 放编辑器、预览、Actions、Share 等界面组件src/lib/util/ 放状态管理、URL 序列化、渲染与安检等核心逻辑。页面路由在 src/routes/端到端测试在 tests/。有图要画、有图要分享的时候打开编辑器敲上第一行代码一分钟就能把图画完发出去。【免费下载链接】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），仅供参考