3 分钟画出第一张流程图Mermaid 在线编辑器 mermaid-live-editor 新手实战手册【免费下载链接】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-editor换个思路左边写几行文本右边立刻出图免费、免安装全程浏览器完成。先搞清楚这个免费图表编辑器适合谁一句话结论只要你会打中文字就能用它画技术图。你不需要装任何软件打开网页就能用支持的图型覆盖面广流程图、时序图、类图、甘特图、ER 图、状态图、思维导图等左侧面板里都有现成样例可点核心体验是双栏实时预览左边是代码编辑区右边是渲染出的 SVG 图形你每敲完一行右侧就会跟着刷新桌面端用 Monaco 编辑器就是 VS Code 里那套内核有语法高亮、自动补全和错误标记写代码的体验和你平时在 IDE 里差不多。它适合的典型用户写技术文档的工程师、要给需求画流程的产品同学、做课件要插几张流程图的老师。共同点是图要快、要能改、要能分享而不是要精细到像素级的设计稿。一条完整工作流从打开页面到拿到图片下面这条主线你照着点一遍就能走通。打开页面认识三个区域进入编辑器后界面就分三块左侧代码区、右侧预览区、以及若干工具卡片样例、导出、分享。第一次用不用急着写先点点左侧的 Sample Diagrams 面板里面按图型分组列好了 Flowchart、Sequence、Class 等模板点一下模板按钮示例代码就直接填进编辑器右侧同步出图——相当于官方帮你把第一行代码写好了。输入语法3 分钟出图Mermaid 的语法就是几行纯文本。一张最简单的流程图长这样把这段粘贴到左侧你会看到第一行graph TD声明了这是一张自上而下的流程图之后每行描述一个节点和它指向谁。改文字、加节点、换分支右侧预览实时跟进。方向也可以随时换TB竖排、BT底朝上、LR从左到右、RL从右到左改第一个词就行。点击预览区缩放和拖拽图画大了别担心。在右侧预览区滚动鼠标滚轮可以缩放按住拖拽可以平移看细节和看全局都能照顾到。导出 SVG / PNG或生成分享链接画完的最后一步打开 Actions 卡片点 Download 可以把当前图存成 SVG 或 PNGPNG 还能先选宽度、背景色再导出复制地址栏里的链接发给同事对方打开看到的就是你现在这张图因为图表内容被压缩编码进了 URL 本身还可以生成只读查看链接方便对方只看不改。整条链路就是访问 → 选模板 → 写语法 → 实时预览 → 导出/分享五步闭环前四步通常一分钟内能走完。三个高频场景各配一段可直接抄的代码场景一画系统架构图给新项目出架构图时用subgraph把前后端模块分组层次马上清晰需要调整时只动文本加一个缓存层就是加一行节点、两行箭头图自动重排。场景二画时序图解释时序图怎么画想讲清楚一次请求经过了谁时序图最直白participant 声明角色箭头写动作实线箭头-表示请求虚线--表示响应看懂这两个符号时序图的基本功就到位了。场景三用 style 给图上色汇报用的图想重点突出某个节点几行style就够fill控制底色、stroke控制边框、stroke-width控制粗细。技巧是别全图都上色只给关键路径 2~3 个节点加样式重点反而更跳。避坑清单遇到这些现象按步骤排查现象预览区一片空白或者出现错误标记排查步骤先看底部是否显示了具体报错文字——编辑器会在代码区用红色标记标出出错的那一行报错信息里通常带出行号检查括号和引号是否成对A[开始]的方括号少一个都会挂检查缩进subgraph ... end必须成对闭合内层节点缩进对齐还不确定问题在哪把代码逐段注释掉保留能跑的部分再逐段加回来几轮就能锁到出错的那一行。建议练手时从 5 行以内的小图开始再往上加复杂度出错成本最低。现象图太大预览区只能看到一角排查步骤先在预览区滚轮缩小 拖拽平移确认全貌若节点超过二三十个考虑拆成 2~3 张子图分别画或者把同层节点收进subgraph压缩纵向空间换布局方向试试竖排太长的图改成LR横排常常立刻舒展。现象导出的图放 PPT 里模糊或被拉变形排查步骤要矢量、要无损缩放比如放大到整页 A3选 SVG要贴进 PPT、Word 这类不方便嵌 SVG 的场景选 PNG导出 PNG 时别用默认尺寸硬导先在 Actions 面板里把宽度调大再下载源文件分辨率够放大才不糊。本地部署与定制Docker 一条命令配置几个变量用 Docker 拉起来跑如果想在局域网或内网里给大家提供一个实例发布镜像一条命令就够docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor跑起来后浏览器访问localhost:8000即可。注意官方镜像里的环境变量是构建期写死的运行时改不了要自定义就自己 build。自己搭建开发环境项目基于 Svelte KitNode 要求 24用 pnpm 管理依赖。克隆仓库地址https://gitcode.com/GitHub_Trending/me/mermaid-live-editor后pnpm install pnpm dev -- --open然后打开localhost:3000。也可以走容器化开发仓库根目录提供了docker-compose.yml执行docker compose up --build后同样访问 3000 端口。可定制的配置项构建期通过MERMAID_前缀的变量控制行为常用的有MERMAID_RENDERER_URL渲染服务地址控制导出的 PNG/SVG 链接指向哪里设成空串可以直接关掉这两个链接MERMAID_KROKI_RENDERER_URLKroki 实例地址默认https://kroki.io同样可置空禁用MERMAID_ANALYTICS_URLMERMAID_DOMAIN接入 Plausible 统计默认关闭MERMAID_IS_ENABLED_MERMAID_CHART_LINKS设为true后出现 Mermaid Chart 入口和推广横幅。改完这些变量重新构建镜像即可生效说明见仓库根目录的 README.md。继续深入文档、示例与参与贡献学语法Mermaid 官方文档覆盖了每种图型的完整语法和示例从流程图读到时序图两三个晚上能建立语法框架抄示例编辑器左侧的 Sample Diagrams 面板本身就是一座小示例库每个图型都配了真实样例代码来自mermaid-js/examples面板逻辑在 src/lib/components/Preset.svelte参与开源整个项目是 Svelte Kit 应用核心状态管理在 src/lib/util/state.svelte.tsURL 编解码也就是分享链接的实现在 src/lib/util/serde.ts。看到 bug 或有想法提 Issue 或 Pull Request 都欢迎项目对贡献者是明确开放的。动手就完事了一张流程图从粘贴语法到导出 PNG你可以控制在 3 分钟以内。现在打开 mermaid-live-editor把场景一那段架构图代码贴进去改改节点文字导出成 SVG——你的第一张技术图就到手了。后面的事就是让图越来越少地占你的时间。【免费下载链接】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），仅供参考