mermaid 图表完全指南：在浏览器里编辑、导出、分享

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 editormermaid 在线编辑器负责 mermaid 图表编辑这件事打开浏览器输入代码图就在右边出现画完直接导出或把链接发出去。 图在文档里总是对不上架构图画完三个月流程变了原始文件却难找。导出成图片后改一个节点得回原工具重画同事想微调文件来回传好几轮。绕开这些麻烦的办法很直接把图写成文本。mermaid 流程图在线编辑就是这条路线——图本身只是几行代码图文永远同步。️ 打开浏览器三步把图画出来① 用浏览器打开在线版。默认双栏布局左边代码编辑区右边预览区编辑区自带示例图表可以直接改。② 在编辑区输入图的描述例如一段简单的流程图graph TD A[开始] -- B{是否可行} B --|是| C[执行] B --|否| D[重新评估] D -- B C -- E[完成]右侧随即画出判定节点 B以及否分支回到 B 的回退线。③ 到顶部的 Actions 区域把当前图下载为 SVG 或 PNG一次完成 mermaid 导出 SVG该区域还提供 mermaid.ink 与 Kroki 的远程渲染链接可直接取用。想把图发给别人最省事的是 mermaid 链接分享——复制地址栏即可。✨ 编辑、导出、分享各管一段实时渲染与语法提示编辑区每次改动都会触发重新校验和渲染语法错误直接在代码里标出行号。底层是 SvelteKit桌面端接 Monaco、移动端接 CodeMirror项目以 MIT 协议开源。多格式导出Actions 里的 SVG/PNG 本地下载适合插图进文档mermaid.ink 与 Kroki 给出的是远程图片地址矢量、位图、远程图三种形态按需取用。URL 编码分享代码和配置被编码进 URL链接本身成为分享介质。只读链接打开即看图可编辑链接则让同事改完后回传一条新链接。 两个写法让图更清楚节点一多用 subgraph 把相关的框在一起层次一目了然graph TB subgraph 前端 A[界面] -- B[状态管理] end B -- C[API]想表达先后交互时时序图里给参与者起个别名sequenceDiagram participant U as 用户 U-S: 请求数据 S--U: 返回结果participant 后跟 as 和显示名图里出现的就是直观的中文名字。这两种写法在 mermaid 流程图在线编辑里输入即出效果。 想改源码环境这样搭前置要求是 Node.js 与 pnpm装好后一条命令启动本地开发git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev界面相关的编辑器、预览区等组件集中在 src/lib/components/状态管理、URL 序列化和渲染封装等工具函数在 src/lib/util/。分工清晰改功能时很快能定位其中序列化逻辑直接决定 mermaid 链接分享的编码是否正确改动时多留个心眼。下次要 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），仅供参考