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-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），仅供参考

mermaid-live-editor：免费在线 Mermaid 图表编辑器，几行文本即可预览、导出并分享

相关推荐

Sandboxie 启动失败修复指南：5 分钟恢复驱动、服务与沙箱的完整教程

Notepad--：跨平台文本编辑器，目录级查找替换、大日志实时跟踪与文件对比一次配齐

Dism++ 使用指南：Windows 系统清理、备份与更新管理

更多资讯

10款免费网络安全抓包工具详解与选型指南

MySQL高可用架构实战：主主复制+HAProxy+Keepalived

灰度放量与准入控制：GATER五段式门控框架落地实践

Hive在电商大数据处理中的核心应用与优化策略

Node-RED 集成 InfluxDB v2.x 实战：写入查询闭环与生产避坑指南

如何准确获取真实屏幕分辨率：跨平台实战指南

今日更新

猫狗目标检测数据集：VOC/COCO/YOLO三格式一体化实战包

HDU2017多校标程复现：算法竞赛工程化真题沙盒

Codex Sandbox 隔离环境拆解：AI Agent 的临时实验室如何运作

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？