3分钟把Mermaid用起来的完整指南用文字画出流程图、时序图和甘特图【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 是一个用文字生成图表的工具你在文档里写几行 Markdown 风格的文本它就能渲染出流程图、时序图、甘特图、ER 图等 20 多种图形。如果你正被文档画一张图要开图形软件、改一次图要重导一次折磨它就是为你准备的。第一关最快上手路径3分钟画出第一张图你不用先装任何东西。Mermaid 的语法就是第一行声明图表类型后面写内容所以最短路径是直接在你的 Markdown 文档里插一个代码块在支持 Mermaid 的 Markdown 平台里这个代码块会被直接渲染成一张自上而下的流程图。你马上会看到改一行文字图就变了不存在重新画图这个动作。如果你要在自己的网页里用装一下 npm 包需要 Node 16然后给图表套一个pre classmermaid标签再调用一次mermaid.initialize()浏览器打开就能看到渲染结果npm install mermaid细节在 使用指南 和 新手入门 里有逐步说明。想先不碰代码仓库里还带了本地演示页clone 下来即可跑git clone https://gitcode.com/GitHub_Trending/me/mermaid cd mermaid pnpm install pnpm run dev官方在线编辑器则把代码、配置、预览分成三个面板左边打字右边出图还带编辑历史和导出按钮适合用来试语法第二关我这种情况该用哪种图新手最常卡住的不是语法而是我手头这个东西该画成什么。用这张对照表直接做决策你要表达的东西选哪种图语法开头语法文档审批流、处理流程、带判断分支的步骤流程图 flowchartgraph TDflowchart.md多个系统/角色之间按时间顺序的交互时序图 sequencesequenceDiagramsequenceDiagram.md表与表、实体与实体的关系ER 图erDiagramentityRelationshipDiagram.md项目排期、任务先后与工期甘特图 ganttganttgantt.md类、属性、方法、继承关系类图 classclassDiagramclassDiagram.md订单/设备的状态流转状态图 statestateDiagram-v2stateDiagram.md占比、份额如流量来源饼图 piepiepie.md时间线、历史事件时间轴 timelinetimelinetimeline.md完整清单思维导图、用户旅程、象限图、Sankey 图等 20 余种见 语法总览。第三关三个真实工作场景场景一技术文档里补一张架构流程图怎么用文档里画架构最省事的写法是流程图加subgraph分组前端后端各包一层中间一条线连起来用完你得到什么一张能直接进文档评审的分组架构图。后面模块改名、拆服务你只改文本diff 里一眼能看出结构变化——这就是 Mermaid 解决的核心问题文档跟得上开发节奏。场景二排期会上给一张不会骗人的甘特图怎么用甘特图支持excludes声明非工作日周末和节假日会从工期计算里剔掉图上用红色竖线标出用完你得到什么一张自动算好工期的时间线。加了excludes weekends后5 个工作日和5 个日历日不再混为一谈排期争论少了大半。场景三给 API 文档画一张交互时序图怎么用时序图里-是实线箭头请求--是虚线箭头响应写四行就能画清楚一次请求的完整往返用完你得到什么一张比调用链 A 调 B 再调 C精确得多的图——谁在哪个时间点发了什么、谁响应全在图面上。类图同理把类名、属性、方法写成文本就能得到下面这种标准 UML 风格产出第四关新手最容易卡住的坑语法总览页专门列了会弄坏图表的词新手 90% 的报错都出在下面几条拼写错误会让整张图渲染失败而配置项写错却会静默忽略——所以图没出来先查拼写图出来但样式没变先查配置名。end是保留字。节点叫 End 或流程里写了end就会把流程图、时序图弄崩解法是把标签用引号包起来如A[end review]。注释里别写{}。%%注释里出现花括号会和指令语法冲突让渲染器误判。标签里的特殊字符括号、引号、换行会破坏语法统一用双引号把标签包起来最稳。暗色主题要两个开关theme: dark只改配色再配darkMode: true才连背景一起变暗只设一个就会出现深色元素浮在白底上的错乱感。frontmatter 配置大小写敏感缩进必须一致格式写错同样会直接崩图。想给单张图换主题把 YAML 放在---之间就行更细的排障问题怎么加标题、怎么换行、怎么绑定点击事件等可以翻 FAQ配置项全表见 配置文档主题变量逐个解释见 主题文档。第五关给团队的落地清单按顺序做每一步都有明确产出把图表源码存进 Git 仓库。.mmd文件进版本控制后图表的每次修改都有 diff、有作者、可回溯评审时直接看文本差异。统一主题。在mermaid.initialize({ theme: base, themeVariables: {...} })里定一套品牌色和字体全团队文档视觉一致只改base主题这一项不会和其他内置主题打架。给文档配最小示例库。挑 3 种高频图流程、时序、甘特各写一个 5 行内的模板新人复制模板改文字即可不用背语法。导出走官方在线编辑器。PNG、SVG、Markdown 链接都能导出PNG 尺寸可调不想装环境的人试语法也用它。网站集成用pre classmermaid。每份图表定义单独放一个标签startOnLoad: true让页面加载时自动渲染不用手写渲染调用。Mermaid 的本质就是把画图降级成打字语法一天能学会之后的每一次修改都是几行文本的事。先挑你文档里最旧的一张图用它重画一遍——这就是最好的起步。【免费下载链接】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），仅供参考 3分钟把Mermaid用起来的完整指南：用文字画出流程图、时序图和甘特图
3分钟把Mermaid用起来的完整指南用文字画出流程图、时序图和甘特图【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 是一个用文字生成图表的工具你在文档里写几行 Markdown 风格的文本它就能渲染出流程图、时序图、甘特图、ER 图等 20 多种图形。如果你正被文档画一张图要开图形软件、改一次图要重导一次折磨它就是为你准备的。第一关最快上手路径3分钟画出第一张图你不用先装任何东西。Mermaid 的语法就是第一行声明图表类型后面写内容所以最短路径是直接在你的 Markdown 文档里插一个代码块在支持 Mermaid 的 Markdown 平台里这个代码块会被直接渲染成一张自上而下的流程图。你马上会看到改一行文字图就变了不存在重新画图这个动作。如果你要在自己的网页里用装一下 npm 包需要 Node 16然后给图表套一个pre classmermaid标签再调用一次mermaid.initialize()浏览器打开就能看到渲染结果npm install mermaid细节在 使用指南 和 新手入门 里有逐步说明。想先不碰代码仓库里还带了本地演示页clone 下来即可跑git clone https://gitcode.com/GitHub_Trending/me/mermaid cd mermaid pnpm install pnpm run dev官方在线编辑器则把代码、配置、预览分成三个面板左边打字右边出图还带编辑历史和导出按钮适合用来试语法第二关我这种情况该用哪种图新手最常卡住的不是语法而是我手头这个东西该画成什么。用这张对照表直接做决策你要表达的东西选哪种图语法开头语法文档审批流、处理流程、带判断分支的步骤流程图 flowchartgraph TDflowchart.md多个系统/角色之间按时间顺序的交互时序图 sequencesequenceDiagramsequenceDiagram.md表与表、实体与实体的关系ER 图erDiagramentityRelationshipDiagram.md项目排期、任务先后与工期甘特图 ganttganttgantt.md类、属性、方法、继承关系类图 classclassDiagramclassDiagram.md订单/设备的状态流转状态图 statestateDiagram-v2stateDiagram.md占比、份额如流量来源饼图 piepiepie.md时间线、历史事件时间轴 timelinetimelinetimeline.md完整清单思维导图、用户旅程、象限图、Sankey 图等 20 余种见 语法总览。第三关三个真实工作场景场景一技术文档里补一张架构流程图怎么用文档里画架构最省事的写法是流程图加subgraph分组前端后端各包一层中间一条线连起来用完你得到什么一张能直接进文档评审的分组架构图。后面模块改名、拆服务你只改文本diff 里一眼能看出结构变化——这就是 Mermaid 解决的核心问题文档跟得上开发节奏。场景二排期会上给一张不会骗人的甘特图怎么用甘特图支持excludes声明非工作日周末和节假日会从工期计算里剔掉图上用红色竖线标出用完你得到什么一张自动算好工期的时间线。加了excludes weekends后5 个工作日和5 个日历日不再混为一谈排期争论少了大半。场景三给 API 文档画一张交互时序图怎么用时序图里-是实线箭头请求--是虚线箭头响应写四行就能画清楚一次请求的完整往返用完你得到什么一张比调用链 A 调 B 再调 C精确得多的图——谁在哪个时间点发了什么、谁响应全在图面上。类图同理把类名、属性、方法写成文本就能得到下面这种标准 UML 风格产出第四关新手最容易卡住的坑语法总览页专门列了会弄坏图表的词新手 90% 的报错都出在下面几条拼写错误会让整张图渲染失败而配置项写错却会静默忽略——所以图没出来先查拼写图出来但样式没变先查配置名。end是保留字。节点叫 End 或流程里写了end就会把流程图、时序图弄崩解法是把标签用引号包起来如A[end review]。注释里别写{}。%%注释里出现花括号会和指令语法冲突让渲染器误判。标签里的特殊字符括号、引号、换行会破坏语法统一用双引号把标签包起来最稳。暗色主题要两个开关theme: dark只改配色再配darkMode: true才连背景一起变暗只设一个就会出现深色元素浮在白底上的错乱感。frontmatter 配置大小写敏感缩进必须一致格式写错同样会直接崩图。想给单张图换主题把 YAML 放在---之间就行更细的排障问题怎么加标题、怎么换行、怎么绑定点击事件等可以翻 FAQ配置项全表见 配置文档主题变量逐个解释见 主题文档。第五关给团队的落地清单按顺序做每一步都有明确产出把图表源码存进 Git 仓库。.mmd文件进版本控制后图表的每次修改都有 diff、有作者、可回溯评审时直接看文本差异。统一主题。在mermaid.initialize({ theme: base, themeVariables: {...} })里定一套品牌色和字体全团队文档视觉一致只改base主题这一项不会和其他内置主题打架。给文档配最小示例库。挑 3 种高频图流程、时序、甘特各写一个 5 行内的模板新人复制模板改文字即可不用背语法。导出走官方在线编辑器。PNG、SVG、Markdown 链接都能导出PNG 尺寸可调不想装环境的人试语法也用它。网站集成用pre classmermaid。每份图表定义单独放一个标签startOnLoad: true让页面加载时自动渲染不用手写渲染调用。Mermaid 的本质就是把画图降级成打字语法一天能学会之后的每一次修改都是几行文本的事。先挑你文档里最旧的一张图用它重画一遍——这就是最好的起步。【免费下载链接】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），仅供参考