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-editorMermaid Live Editor 是官方的在线 mermaid 图表编辑器左边写文本右边立刻出图画完把代码压进链接分享只发一条 URL不用来回传文件。它替你解决了什么麻烦跟同事讲一个流程画图工具画好、导出图片、发过去逻辑一变再导一次对方还想改都没法改。或者你早就会写 mermaid但为了预览一张图专门搭本地渲染环境不值当。这个项目是官方实现不是第三方仿站SvelteKit 框架开发桌面端用 Monaco 编辑器VS Code 里那套编辑组件MIT 协议开源。第一次跑起来最短路径三步浏览器打开 mermaid.live左侧编辑区自带一段示例流程图把示例改成自己的代码。graph TD A[开始] -- B{是否可行} B --|是| C[执行] B --|否| D[重新评估] D -- B右边预览随改随刷新语法写错时报错位置直接标在编辑区对应行不用猜错在哪。3 个真正好用的地方改代码等于改图大图的报错还指到行图就是文本流程变了不用重画改完代码链接重新生成即可。节点多的大图也不怕语法错误会定位到具体行号并标出来修起来不用全文扫。SVG 拿矢量PNG 拿位图Actions 区域里 PNG 和 SVG 各一个下载按钮同一张图两种格式一次导齐。PNG 还能按宽度或高度指定导出尺寸默认 1080 像素两个按钮旁边各配一个外链按钮走 mermaid.ink 渲染服务用不了就切 Kroki 链接。只读链接给人看图可编辑链接给人改图代码和配置会压缩编码进 URL 本身不上传服务器。Share 面板给出两种链接/view 是只读页面/edit 让对方改完回传一条新链接协作一轮就闭环。自己跑一份需要 Node.js 当前 LTS 版本和 pnpm三行命令git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev仓库里的 README 还给了 docker run 和 docker compose 两种跑法渲染服务地址等配置项都写在构建参数里。几个老手才知道的细节Actions 区域有 Copy Markdown 按钮复制的是一条 mermaid.ink 图片的 markdown 代码贴进 README 直接渲染同一区域还能粘贴 Gist URL 把代码拉进来继续编辑。History 面板里有本地自动记录的 Timeline刷新页面后之前的版本还在找不回改坏的那一步时先翻翻它。谁用得最顺手【维护技术文档的开发者】架构图跟着代码频繁变贴的图总是过期把图写成文本改完重发链接比开画图工具快。【排计划的项目经理】甘特图时间线常调浏览器里直接预览把 /view 只读链接丢给团队即可。【需要微调图表的协作者】打开 /edit 链接改几处回传新链接不用从零重画。边界说明如果你习惯拖拽节点画画布这里会别扭——mermaid 是文本不是画布。画、预览、分享挤在一个页面里打开 mermaid.live 试一次就行想弄清链接是怎么装下整张图的读读 src/lib/util/serde.ts 这段压缩编码的实现。【免费下载链接】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），仅供参考