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 图表编辑器无需注册、不依赖图片托管产出的是链接而不是要来回传的图片文件。写 5 行文本流程图就出来了 打开在线版会直接落在编辑页左边是代码编辑器桌面端为 Monaco带 Mermaid 语法高亮和补全右边是预览区。清掉默认示例换成你自己的graph LR A[接收需求] -- B[设计] B -- C[开发] C -- D[测试] D --|不通过| C D --|通过| E[发布]每保存一次内容预览就同步刷新语法写错时报错位置直接标在代码区不用点任何渲染。顺手可以养成两个习惯图节点多到看不清时用subgraph按层级分组时序图里参与者名字过长时用participant U as 用户给它起个显示名想让图表不那么工程风工具栏里的 Hand-Drawn 开关可一键切换手绘风格。编辑器还会把本次会话的改动自动记进 History 时间线状态也存在本地关掉页面再打开也不丢。怎么把图表变成能用的图片 ️所有导出动作都在下方的 Actions 卡片里点PNG或SVG直接下载。PNG 支持尺寸选择Auto 按 2 倍分辨率出图Width/Height 则指定一边、另一边按比例缩放放进文档或幻灯片尺寸可控每个下载按钮旁带一个外部链接小箭头点开是 mermaid.ink 或 Kroki 渲染服务给出的同一张图的在线地址Copy Image把 PNG 直接放进剪贴板粘到聊天或文档里就能用Copy Markdown生成带渲染地址的 Markdown 图片代码可直接引用进技术文档。图表代码如果存放在 Gist把 Gist 地址粘进 Actions 的输入框、点 Load Gist就能拉进编辑器继续改。发链接一张图生成三种链接 这个工具的分享逻辑是链接即图表。代码经过 deflate 压缩编码进地址的 hash 部分所以大图对应的链接也不会特别长。三种链接对应三种用途可编辑链接直接复制地址栏 URL。对方打开即可改改完再回传一个新 URL协作闭环完成不用传图片文件只读链接把地址路由从/edit换成/viewhash 保持不变打开的页面只有图表、没有编辑器嵌入链接生成可嵌入片段的入口下一节细说。一点安全说明打开来源不明的分享链接时编辑器会检查链接携带的配置发现风险项会先提示你确认后才剔除再渲染不用担心直接打开。把一张活的图嵌进博客 静态截图放大会糊移动端也更难看清。点Share打开对话框里面有一块 Embed 区域可选主题、外观classic / handDrawn / neo、宽高、浅色或深色模式还能开关缩放控件和背景网格改完可现场预览。然后选格式二选一iframe整段拷贝进页面即用Web component引入embed.js后使用mermaid-embed标签图表代码直接写在标签体内结构更干净。iframe 片段大致长这样iframe srchttps://mermaid.live/embed#pako:... width100% height480 styleborder:0 loadinglazy titleMermaid diagram sandboxallow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox/iframe嵌进页面的是可缩放的活图。架构变了你只需要改 Mermaid 文本、重新生成一段片段读者打开看到的就是最新版文档和图从此不用手动对版本。本地跑起来3 条命令开始参与开发 ️项目基于 SvelteKit 构建MIT 协议开源。装好 Node.js当前 LTS和 pnpm可用corepack enable pnpm安装后git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev -- --open开发服务器会在 http://localhost:3000 启动也支持用 README 中的 Docker 命令跑一个自托管版本。想参与贡献入口不分散界面组件集中在 src/lib/components/Actions、Share、View 等都在其中状态管理、URL 序列化、配置安全过滤在 src/lib/util/核心是state.svelte.ts与serde.ts单元测试与源码同目录*.test.ts端到端测试在 tests/。改完先本地验证一遍pnpm dev预览效果pnpm check和pnpm test过一遍检查。下次要画图的时候打开编辑器敲几行文本图、导出图片和分享链接就在同一个页面里等着被复制。【免费下载链接】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），仅供参考
