如何 3 分钟上手 Mermaid 图表一张流程图、3 种核心语法与完整项目集成指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid文档写完三个月没人再看架构图改了五版却找不到最初为什么这么画的——这是大多数团队都踩过的坑。Mermaid 是 JavaScript 侧的一个图表库用类 Markdown 的文本描述生成流程图、时序图这类图随代码一起进版本库。这份 Mermaid 教程按上手顺序走先在 Live Editor 里出图再补核心语法最后接进项目。 从 Live Editor 开始3 分钟出第一张流程图推荐入口是官方在线编辑器 Live Editormermaid.live浏览器打开就能画不用装任何东西也没有本地环境要配。在左侧输入下面 5 行右侧立即出图flowchart LR A[提交代码] -- B[跑 CI] B --|通过| C[合并主干] B --|失败| A几个马上能用上的点改一个字预览立刻刷新语法错了会有报错提示适合边试边学代码会自动编码进 URL 地址栏刷新页面内容不丢换台电脑打开还能接着画画完点复制把代码带进项目——后面所有集成用的都是这段文本不依赖编辑器本身。 核心语法流程图、时序图、类图的最小写法三种图覆盖日常大部分需求各记住一个模板就行。流程图节点形状 箭头 边标签形状[ ]矩形、( )圆角、{ }菱形判断、(( ))圆形、[( )]圆柱代表数据库连线--有向--双向竖线|文字|给边打标签同一行链式写多个节点能少写一半代码。flowchart TD A[收到请求] -- B{已登录?} B --|是| C[返回数据] B --|否| D[跳转登录页]时序图参与者 消息箭头participant声明参与者-实线请求--虚线响应左右两个符号之间写self: 内容表示自调用。sequenceDiagram 浏览器-网关: 登录请求 网关-认证服务: 校验凭证 认证服务--网关: 签发 JWT 网关--浏览器: 200 token类图属性方法 关系箭头大括号内每行一个成员-私有、公开|--继承、--*组合、..依赖。classDiagram class 用户 { -String 用户名 登录() } class 管理员 用户 |-- 管理员其余类型不再逐个展开需要时查这张速查表类型一句话用途最小语法stateDiagram-v2状态机、工作流迁移[*] -- 就绪gantt项目排期、任务时间线section 设计 一行任务pie占比分布pie title 分布 A : 50mindmap知识结构、头脑风暴root((主题)) 缩进分支erDiagram数据库实体与关系A \|\|--o\| B : 拥有timeline时间轴事件timeline 年份分行quadrantChart优先级四象限x-axis 快--慢 点userJourney用户旅程体验评分section 步骤metrics集成到项目CDN 与 NPM 两条路把图接进自己产品里两条路CDN 引入适合静态页和快速验证npm 装包适合工程化项目能跟着构建流程走。两种方式拿到的 API 一致都从initialize开始。script typemodule import mermaid from https://cdn.jsdelivr.net/npm/mermaid11.9.0/dist/mermaid.esm.min.mjs; mermaid.initialize({ theme: default, securityLevel: strict }); /scriptnpm install mermaidinitialize只需要盯住四个关键项theme内置 default / forest / dark / neutral 四套、securityLevelstrict 默认最稳loose 才允许节点内交互、startOnLoadfalse 时手动mermaid.render渲染、fontFamily。三个最常见的坑ES module 报错npm 装完 import 失败多半是 package.json 没声明type: module改成 .mjs 后缀或补上声明即可CDN 侧注意要用typemodule的 ESM 文件版本漂移CDN 导入或装包时锁定具体版本号别用 latest大版本升级可能改变默认渲染行为渲染时机目标容器必须已在 DOM 里再调用render把图定义放在 JS 字符串里传参比写在 DOM 里等解析更省心。进阶主题、分享与文档站 / CI 渲染主题与配色theme一键换风格想贴近站点视觉就在themeVariables里微调primaryColor、lineColor这类变量全局统一生效。URL 分享协作Live Editor 会把当前图表编码进 URL把地址发给同事对方打开看到的就是同一张图不用来回贴代码。文档站与 CI 流水线GitHub、GitLab 等平台原生识别mermaid代码块文档站里写图就是敲代码块改文字即改图。配合 mermaid-cli 工具还能把.mmd文件批量转成 SVG 提交进仓库——提交文档的同一张 PR 里CI 顺手把图更新掉不存在文档是新的、图是旧的。学习资源语法细节以官方文档mermaid.js.org 的 Syntax 分区为准本仓库的 demos/ 目录有每种图的独立示例页docs/syntax下则是按图分类的语法文档可直接对照查。适合代码仓库文档、技术博客、CI 自动化生成的图表不适合像素级精确排版、复杂插画类需求交给专业绘图工具。官方文档 mermaid.js.org示例集 mermaid.live。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考