Mermaid在线编辑器3行文本到一张可分享的图【免费下载链接】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在线编辑器是一款免费的网页端工具左侧输入文本右侧实时渲染图形最后拿到一个链接或一张图片。无论是要在线绘制流程图还是找一款免费时序图工具整条链路都在浏览器内完成无需安装无需账号。3行文本到一张可分享的图一个最小示例就能说清完整链路graph TD A[提交审批] -- B{主管批准?} B --|是| C[执行] B --|否| D[退回修改]把这几行打进左侧代码栏右侧预览区实时出图没有构建过程也没有页面刷新。图表代码本身只留在浏览器里页面明确写着内容不会离开浏览器而生成分享链接时代码会被编码进 URL对方在自己浏览器打开即可渲染出同样的图。提示语法写错时编辑区底部会出现带图标的 Syntax error 提示条并附错误说明只有错误持续存在约3秒才会弹出快速打字时不会来回闪动。常见原因是箭头符号写反、括号不配对顺着提示定位修改即可不必通读全文。按场景选图什么问题配什么图选型依据是要说明什么问题而不是哪种图更好看。架构类内容在 Mermaid架构图教程 里通常也是流程图加子图subgraph的组合。要说明的问题图表类型典型用途步骤与分支判断流程图审批流程、业务分支、系统组件关系多方之间的先后调用时序图前后端接口、服务间调用、登录鉴权对象结构与继承关系类图遗留代码梳理、设计文档时间排期与里程碑甘特图项目计划、版本排期编辑器内置了流程图、时序图、甘特图等常见类型的样例选中后直接覆盖成自己的内容即可开始。布局不合适时可以声明方向自上而下、从左到右等节点多时用子图把相关部分分组整图的可读性会明显改善。从打开页面到拿到链接整条路径是一次连续操作页面打开即是双栏布局桌面端使用 Monaco 编辑器也就是 VS Code 的同款内核带语法高亮和错误检查移动端自动切换为轻量编辑形态。代码区旁还有配置项切过去可以用 JSON 编辑主题、外观这类全局渲染设置。输入代码的同时预览持续更新大图用滚轮缩放、按住拖拽平移底部工具条可微调比例。确认图表无误后顶部操作区给出两条出路下载图片或生成链接。链接分查看和编辑两种编辑链接可以把内容改完再把新链接发回适合多人协作。Share 对话框里还能生成 iframe 与 Web Component 两种嵌入代码粘进文档站或内网 wiki 就能内嵌展示。导出SVG还是PNGSVG 是矢量格式放大不糊适合网页和需要打印的技术文档PNG 是位图导出面板可选像素尺寸适合直接贴进 PPT 或即时消息。对方只是快速看一眼时直接发链接即可省掉下载环节。提示超大图表如果缩放和平移仍显得拥挤考虑拆成几个子图分别绘制再组合。编辑器对单图大小没有硬性上限但过于复杂的单图渲染会明显变慢拆分也更便于后期维护。自建部署与开发环境Docker自建 内网无法访问公网服务时官方镜像一条命令即可启动docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor启动后访问 8000 端口。发布镜像按默认环境变量构建运行时不能覆盖这些变量渲染服务地址等参数在 Dockerfile 中以构建参数的形式定义需要定制就自行构建镜像。本地跑起开发环境项目基于 SvelteKit 与 pnpm克隆仓库后安装依赖并启动git clone https://gitcode.com/GitHub_Trending/me/mermaid-live-editor cd mermaid-live-editor pnpm install pnpm dev -- --open热更新页面随即可用。也可以在容器里直接开发docker compose up --build后打开 localhost:3000。继续深入文档、社区与一个小任务各图表类型的完整语法以 Mermaid 官方文档为准每种类型都带可复制的示例。编辑器自身实现的核心状态与渲染逻辑在src/lib/目录导出逻辑见 Actions.svelte分享链接生成见 Share.svelte编辑器初始化见 monacoExtra.ts。社区主阵地是项目 Discord问题与改进建议直接以 Issue 或 Pull Request 提交到仓库。小任务挑一个你每周都会经历的过程比如报销审批、bug 上报或晨会分工用 Mermaid在线编辑器 在 5 分钟内画出对应流程图再通过分享链接发给一位同事让对方基于编辑链接补上遗漏的分支。【免费下载链接】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），仅供参考