0
0

Mermaid安装及绘制流程图

Mermaid 插件的安装

卸载 Hexo 默认的渲染器

默认的 Hexo 安装包括一个 MarkDown 渲染器插件，该插件使用 

hexo-renderer-marked

，而 

hexo-renderer-markdown-it

是一款用于 Markdown 解析和渲染的插件，用于替换 Hexo 默认自带的 Markdown 渲染器，提供了更丰富的 Markdown 解析和渲染，替换命令如下：

npm un hexo-renderer-marked --save

npm i hexo-renderer-markdown-it --save

添加 Mermaid 支持

Mermaid 是一个支持 MarkDown 的流行的 

js

图标库。具有直接在Markdown中画流程图，甘特图，序列图等功能。

  • 使用 hexo-filter-mermaid-diagrams 的 Hexo 插件来实现相应的功能，在 Hexo 根目录执行如下命令安装：
npminstall hexo-filter-mermaid-diagrams --save
  • 修改在 Matery 主题目录 layout/_partial/ 下的 footer.ejs 文件，文末添加如下内容：
<%if(theme.mermaid.enable){%><script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script><script>if(window.mermaid){
      mermaid.initialize({theme:'forest'});}</script><%}%>
  • 在 Hexo 根目录文件下 _config.yml 配置文件添加如下内容：
# mermaid chart。 依赖hexo-tag-mermaidmermaid:## mermaid url https://github.com/knsv/mermaidenable:true  # default falseversion: "latest" # default v7.1.2options:# find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js#startOnload: true  // default true

执行 

hexo clean && hexo g

重新生成博客文件，在博文中使用含有 

mermaid

标签的代码块包裹 mermaid 正文内容 。

Mermaid 的配置

hexo-renderer-markdown-it

的所有配置，均在 Hexo 的根目录下配置文件

_config.yml

中进行配置。

简单配置

hexo-renderer-markdown-it

提供三种简单配置方式（配置级别）zero 、default 、commonmark 。

在 Hexo 的_config.yml 文件中可以配置以下内容：

# Markdown-it config# markdown: 'zero'# markdown: 'default'# markdown: 'commonmark'

每种简单配置其默认的一些设置：

  • zero ：禁用大多数解析器功能。仅支持斜体和粗体，甚至不支持所有原始 MarkDown 功能。
  • default（GFM）：解析器的行为类似于 GitHub 规范。
  • commonmark ：提供比 zero 预设更多的功能， 此设置将强制插件使用最新的 CommonMark 规范。

警告 ：选择一种简单配置，将阻止您使用任何附带的插件。

高级配置

hexo-renderer-markdown-it

提供的高级配置，是对简单配置的详细定制。在 Hexo 的根目录下 

_config.yml

文件中配置以下内容（官方提供的完整配置，没有特殊需要不用再次修改）。

# Markdown-it configmarkdown:render:html:truexhtmlOut:falsebreaks:truelinkify:truetypographer:truequotes:'“”‘’'plugins:- markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:level:2collisionSuffix:'v'permalink:truepermalinkClass: header-anchor
    permalinkSymbol: ¶ # anchors 符号
  1. 渲染器（render）
# Markdown-it configmarkdown:render:html:truexhtmlOut:falsebreaks:truelinkify:truetypographer:truequotes:'“”‘’'

html ：定义文档中的 HTML 内容是否应转义或传递给最终结果。

html:true # 不转义 HTML 内容html:false # 转义 HTML 内容，使标签作为文本输出

xhtmlOut ：定义解析器是否将导出完全兼容 XHTML 的标记。

xhtmlOut:true # 必须使用完全的 XHTML 代码，换行必须为 xhtmlOut:false # 不必必使用完全的 XHTML 代码，换行可以为

breaks ：使源文件中的换行符被解析为标记，每次按 Enter 键都会创建换行符。

breaks:true # 每次会车换行相当于一个标签breaks:false # Pa,每次会车换行会被忽略

linkify ：解析器能够将直接粘贴到文本中的链接内联。

linkify: true # 类似链接的文本，作为链接输出
linkify: false # 类似链接的文本，依然作为文本输出

typographer：可以替换常见的排版元素。

typographer: true # 替换常见的排版元素
typographer: false # 不替换常见的排版元素

quotes ：定义单引号、双引号如何被替换。

quotes: '“”‘’' # 'single'、"double" 变成 ‘single’、“double”
quotes: '«»“”' # 'single'、"double" 变成 “single”、«single»
  1. 插件（plugins）

hexo-renderer-markdown-it 默认集成 5 个markdown-it 插件。

# Markdown-it configmarkdown:plugins:- markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup

markdown-it-abbr ：缩写插件。

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

The HTML specification
is maintained by the W3C.

markdown-it-footnote ：脚注插件。

basic footnote[^1]
here is an inline footnote[^2](inline footnote)
and another one[^3]
and another one[^4]

[^1]: basic footnote content
[^3]: paragraph footnote content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)

markdown-it-ins ：插入插件（下划线插件）。

++inserted++

++inserted++

markdown-it-sub：下标插件。

H~2~O => H2O

H20

markdown-it-sup ：上标插件。

e^th^

eth

  1. 锚（anchors）
# Markdown-it configmarkdown:anchors:level:2collisionSuffix:'v'permalink:truepermalinkClass: header-anchor
    permalinkSymbol: ¶

level ：生成 Heading ID 的标题等级。

  • collisionSuffix ：Heading ID 重复时，数字的后缀
  • permalink ：‘true’ ，则创建一个锚标记，除标题外还有一个固定链接
  • permalinkClass ：用于固定链接锚标记的样式
  • permalinkSymbol ：用于固定链接标记的符号
  • 参考 hexo-renderer-markdown-it 官网

绘制流程图

简介

所有流程图都由 

节点

、

几何形状

和 

边

、

箭头

/ 

线

组成。mermaid 定义了这些节点和边的制作和交互方式，还支持不同类型的箭头、多方向箭头以及与子图的连接。

节点

  • 默认节点。

默认节点展示在方格中，作为节点对象，也作为节点的名字。

#mermaid-svg-XyYjg5fLgZqGrWEh {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh .error-icon{fill:#552222;}#mermaid-svg-XyYjg5fLgZqGrWEh .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-XyYjg5fLgZqGrWEh .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-XyYjg5fLgZqGrWEh .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-XyYjg5fLgZqGrWEh .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-XyYjg5fLgZqGrWEh .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-XyYjg5fLgZqGrWEh .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-XyYjg5fLgZqGrWEh .marker{fill:#333333;stroke:#333333;}#mermaid-svg-XyYjg5fLgZqGrWEh .marker.cross{stroke:#333333;}#mermaid-svg-XyYjg5fLgZqGrWEh svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-XyYjg5fLgZqGrWEh .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh .cluster-label text{fill:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh .cluster-label span{color:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh .label text,#mermaid-svg-XyYjg5fLgZqGrWEh span{fill:#333;color:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh .node rect,#mermaid-svg-XyYjg5fLgZqGrWEh .node circle,#mermaid-svg-XyYjg5fLgZqGrWEh .node ellipse,#mermaid-svg-XyYjg5fLgZqGrWEh .node polygon,#mermaid-svg-XyYjg5fLgZqGrWEh .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-XyYjg5fLgZqGrWEh .node .label{text-align:center;}#mermaid-svg-XyYjg5fLgZqGrWEh .node.clickable{cursor:pointer;}#mermaid-svg-XyYjg5fLgZqGrWEh .arrowheadPath{fill:#333333;}#mermaid-svg-XyYjg5fLgZqGrWEh .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-XyYjg5fLgZqGrWEh .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-XyYjg5fLgZqGrWEh .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-XyYjg5fLgZqGrWEh .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-XyYjg5fLgZqGrWEh .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-XyYjg5fLgZqGrWEh .cluster text{fill:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh .cluster span{color:#333;}#mermaid-svg-XyYjg5fLgZqGrWEh div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-XyYjg5fLgZqGrWEh :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点/文本

mermaid 语法如下：

flowchart LR
    节点/文本
  • 重命名节点。

默认节点对象就是节点的名称，可以使用 

node[

xxx

]

的形式来设置节点的别名。

#mermaid-svg-zXmQRFk3yduwuwt2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 .error-icon{fill:#552222;}#mermaid-svg-zXmQRFk3yduwuwt2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-zXmQRFk3yduwuwt2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-zXmQRFk3yduwuwt2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-zXmQRFk3yduwuwt2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-zXmQRFk3yduwuwt2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-zXmQRFk3yduwuwt2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-zXmQRFk3yduwuwt2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-zXmQRFk3yduwuwt2 .marker.cross{stroke:#333333;}#mermaid-svg-zXmQRFk3yduwuwt2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-zXmQRFk3yduwuwt2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 .cluster-label text{fill:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 .cluster-label span{color:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 .label text,#mermaid-svg-zXmQRFk3yduwuwt2 span{fill:#333;color:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 .node rect,#mermaid-svg-zXmQRFk3yduwuwt2 .node circle,#mermaid-svg-zXmQRFk3yduwuwt2 .node ellipse,#mermaid-svg-zXmQRFk3yduwuwt2 .node polygon,#mermaid-svg-zXmQRFk3yduwuwt2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-zXmQRFk3yduwuwt2 .node .label{text-align:center;}#mermaid-svg-zXmQRFk3yduwuwt2 .node.clickable{cursor:pointer;}#mermaid-svg-zXmQRFk3yduwuwt2 .arrowheadPath{fill:#333333;}#mermaid-svg-zXmQRFk3yduwuwt2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-zXmQRFk3yduwuwt2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-zXmQRFk3yduwuwt2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-zXmQRFk3yduwuwt2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-zXmQRFk3yduwuwt2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-zXmQRFk3yduwuwt2 .cluster text{fill:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 .cluster span{color:#333;}#mermaid-svg-zXmQRFk3yduwuwt2 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-zXmQRFk3yduwuwt2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
框中的文本

mermaid 语法如下：

flowchart LR
    node[框中的文本]

流程图展开的方向

  • 设置从上到下的方向（TD or TB）。

#mermaid-svg-3C7oZftQxRVHTCIt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3C7oZftQxRVHTCIt .error-icon{fill:#552222;}#mermaid-svg-3C7oZftQxRVHTCIt .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-3C7oZftQxRVHTCIt .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-3C7oZftQxRVHTCIt .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-3C7oZftQxRVHTCIt .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-3C7oZftQxRVHTCIt .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-3C7oZftQxRVHTCIt .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-3C7oZftQxRVHTCIt .marker{fill:#333333;stroke:#333333;}#mermaid-svg-3C7oZftQxRVHTCIt .marker.cross{stroke:#333333;}#mermaid-svg-3C7oZftQxRVHTCIt svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-3C7oZftQxRVHTCIt .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-3C7oZftQxRVHTCIt .cluster-label text{fill:#333;}#mermaid-svg-3C7oZftQxRVHTCIt .cluster-label span{color:#333;}#mermaid-svg-3C7oZftQxRVHTCIt .label text,#mermaid-svg-3C7oZftQxRVHTCIt span{fill:#333;color:#333;}#mermaid-svg-3C7oZftQxRVHTCIt .node rect,#mermaid-svg-3C7oZftQxRVHTCIt .node circle,#mermaid-svg-3C7oZftQxRVHTCIt .node ellipse,#mermaid-svg-3C7oZftQxRVHTCIt .node polygon,#mermaid-svg-3C7oZftQxRVHTCIt .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-3C7oZftQxRVHTCIt .node .label{text-align:center;}#mermaid-svg-3C7oZftQxRVHTCIt .node.clickable{cursor:pointer;}#mermaid-svg-3C7oZftQxRVHTCIt .arrowheadPath{fill:#333333;}#mermaid-svg-3C7oZftQxRVHTCIt .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-3C7oZftQxRVHTCIt .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-3C7oZftQxRVHTCIt .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-3C7oZftQxRVHTCIt .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-3C7oZftQxRVHTCIt .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-3C7oZftQxRVHTCIt .cluster text{fill:#333;}#mermaid-svg-3C7oZftQxRVHTCIt .cluster span{color:#333;}#mermaid-svg-3C7oZftQxRVHTCIt div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-3C7oZftQxRVHTCIt :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始

结束

mermaid 语法如下：

flowchart TD
    开始 --> 结束
  • 设置从左到右的方向（LR）。

#mermaid-svg-rNGuGiZt9mnY8fIa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa .error-icon{fill:#552222;}#mermaid-svg-rNGuGiZt9mnY8fIa .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rNGuGiZt9mnY8fIa .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-rNGuGiZt9mnY8fIa .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rNGuGiZt9mnY8fIa .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rNGuGiZt9mnY8fIa .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rNGuGiZt9mnY8fIa .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rNGuGiZt9mnY8fIa .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rNGuGiZt9mnY8fIa .marker.cross{stroke:#333333;}#mermaid-svg-rNGuGiZt9mnY8fIa svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rNGuGiZt9mnY8fIa .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa .cluster-label text{fill:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa .cluster-label span{color:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa .label text,#mermaid-svg-rNGuGiZt9mnY8fIa span{fill:#333;color:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa .node rect,#mermaid-svg-rNGuGiZt9mnY8fIa .node circle,#mermaid-svg-rNGuGiZt9mnY8fIa .node ellipse,#mermaid-svg-rNGuGiZt9mnY8fIa .node polygon,#mermaid-svg-rNGuGiZt9mnY8fIa .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rNGuGiZt9mnY8fIa .node .label{text-align:center;}#mermaid-svg-rNGuGiZt9mnY8fIa .node.clickable{cursor:pointer;}#mermaid-svg-rNGuGiZt9mnY8fIa .arrowheadPath{fill:#333333;}#mermaid-svg-rNGuGiZt9mnY8fIa .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-rNGuGiZt9mnY8fIa .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-rNGuGiZt9mnY8fIa .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-rNGuGiZt9mnY8fIa .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-rNGuGiZt9mnY8fIa .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-rNGuGiZt9mnY8fIa .cluster text{fill:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa .cluster span{color:#333;}#mermaid-svg-rNGuGiZt9mnY8fIa div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-rNGuGiZt9mnY8fIa :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始

结束

mermaid 语法如下：

flowchart LR
    开始 --> 结束
  • 设置从下到上的方向（DT or BT）。

#mermaid-svg-XJCcExrJNmLYNZbS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-XJCcExrJNmLYNZbS .error-icon{fill:#552222;}#mermaid-svg-XJCcExrJNmLYNZbS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-XJCcExrJNmLYNZbS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-XJCcExrJNmLYNZbS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-XJCcExrJNmLYNZbS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-XJCcExrJNmLYNZbS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-XJCcExrJNmLYNZbS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-XJCcExrJNmLYNZbS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-XJCcExrJNmLYNZbS .marker.cross{stroke:#333333;}#mermaid-svg-XJCcExrJNmLYNZbS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-XJCcExrJNmLYNZbS .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-XJCcExrJNmLYNZbS .cluster-label text{fill:#333;}#mermaid-svg-XJCcExrJNmLYNZbS .cluster-label span{color:#333;}#mermaid-svg-XJCcExrJNmLYNZbS .label text,#mermaid-svg-XJCcExrJNmLYNZbS span{fill:#333;color:#333;}#mermaid-svg-XJCcExrJNmLYNZbS .node rect,#mermaid-svg-XJCcExrJNmLYNZbS .node circle,#mermaid-svg-XJCcExrJNmLYNZbS .node ellipse,#mermaid-svg-XJCcExrJNmLYNZbS .node polygon,#mermaid-svg-XJCcExrJNmLYNZbS .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-XJCcExrJNmLYNZbS .node .label{text-align:center;}#mermaid-svg-XJCcExrJNmLYNZbS .node.clickable{cursor:pointer;}#mermaid-svg-XJCcExrJNmLYNZbS .arrowheadPath{fill:#333333;}#mermaid-svg-XJCcExrJNmLYNZbS .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-XJCcExrJNmLYNZbS .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-XJCcExrJNmLYNZbS .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-XJCcExrJNmLYNZbS .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-XJCcExrJNmLYNZbS .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-XJCcExrJNmLYNZbS .cluster text{fill:#333;}#mermaid-svg-XJCcExrJNmLYNZbS .cluster span{color:#333;}#mermaid-svg-XJCcExrJNmLYNZbS div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-XJCcExrJNmLYNZbS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始

结束

mermaid 语法如下：

flowchart BT
    开始 --> 结束
  • 设置从右到左的方向（RL）。

#mermaid-svg-kVlgQhWdFBXLhIg5 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .error-icon{fill:#552222;}#mermaid-svg-kVlgQhWdFBXLhIg5 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-kVlgQhWdFBXLhIg5 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .marker.cross{stroke:#333333;}#mermaid-svg-kVlgQhWdFBXLhIg5 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-kVlgQhWdFBXLhIg5 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .cluster-label text{fill:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .cluster-label span{color:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .label text,#mermaid-svg-kVlgQhWdFBXLhIg5 span{fill:#333;color:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .node rect,#mermaid-svg-kVlgQhWdFBXLhIg5 .node circle,#mermaid-svg-kVlgQhWdFBXLhIg5 .node ellipse,#mermaid-svg-kVlgQhWdFBXLhIg5 .node polygon,#mermaid-svg-kVlgQhWdFBXLhIg5 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-kVlgQhWdFBXLhIg5 .node .label{text-align:center;}#mermaid-svg-kVlgQhWdFBXLhIg5 .node.clickable{cursor:pointer;}#mermaid-svg-kVlgQhWdFBXLhIg5 .arrowheadPath{fill:#333333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-kVlgQhWdFBXLhIg5 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-kVlgQhWdFBXLhIg5 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-kVlgQhWdFBXLhIg5 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-kVlgQhWdFBXLhIg5 .cluster text{fill:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 .cluster span{color:#333;}#mermaid-svg-kVlgQhWdFBXLhIg5 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-kVlgQhWdFBXLhIg5 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始

结束

mermaid 语法如下：

flowchart RL
    开始 --> 结束

流程图的展开方向总结如下表:

符号说明流程图展开方向

TB

top to bottom上到下

TD

top-down/same as top to bottom上到下

BT

bottom to top下到上

RL

right to left右到左

LR

left to right左到右

节点的形状

  • 矩形节点。

#mermaid-svg-7wGzkkaw6m6h9Sdo {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .error-icon{fill:#552222;}#mermaid-svg-7wGzkkaw6m6h9Sdo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7wGzkkaw6m6h9Sdo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .marker.cross{stroke:#333333;}#mermaid-svg-7wGzkkaw6m6h9Sdo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7wGzkkaw6m6h9Sdo .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .cluster-label text{fill:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .cluster-label span{color:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .label text,#mermaid-svg-7wGzkkaw6m6h9Sdo span{fill:#333;color:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .node rect,#mermaid-svg-7wGzkkaw6m6h9Sdo .node circle,#mermaid-svg-7wGzkkaw6m6h9Sdo .node ellipse,#mermaid-svg-7wGzkkaw6m6h9Sdo .node polygon,#mermaid-svg-7wGzkkaw6m6h9Sdo .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7wGzkkaw6m6h9Sdo .node .label{text-align:center;}#mermaid-svg-7wGzkkaw6m6h9Sdo .node.clickable{cursor:pointer;}#mermaid-svg-7wGzkkaw6m6h9Sdo .arrowheadPath{fill:#333333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-7wGzkkaw6m6h9Sdo .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-7wGzkkaw6m6h9Sdo .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-7wGzkkaw6m6h9Sdo .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-7wGzkkaw6m6h9Sdo .cluster text{fill:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo .cluster span{color:#333;}#mermaid-svg-7wGzkkaw6m6h9Sdo div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-7wGzkkaw6m6h9Sdo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
矩形节点

mermaid 语法如下：

flowchart LR
     矩形节点

#mermaid-svg-hU5pIvNl1v8pn7Bm {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .error-icon{fill:#552222;}#mermaid-svg-hU5pIvNl1v8pn7Bm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hU5pIvNl1v8pn7Bm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .marker.cross{stroke:#333333;}#mermaid-svg-hU5pIvNl1v8pn7Bm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hU5pIvNl1v8pn7Bm .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .cluster-label text{fill:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .cluster-label span{color:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .label text,#mermaid-svg-hU5pIvNl1v8pn7Bm span{fill:#333;color:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .node rect,#mermaid-svg-hU5pIvNl1v8pn7Bm .node circle,#mermaid-svg-hU5pIvNl1v8pn7Bm .node ellipse,#mermaid-svg-hU5pIvNl1v8pn7Bm .node polygon,#mermaid-svg-hU5pIvNl1v8pn7Bm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-hU5pIvNl1v8pn7Bm .node .label{text-align:center;}#mermaid-svg-hU5pIvNl1v8pn7Bm .node.clickable{cursor:pointer;}#mermaid-svg-hU5pIvNl1v8pn7Bm .arrowheadPath{fill:#333333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-hU5pIvNl1v8pn7Bm .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-hU5pIvNl1v8pn7Bm .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-hU5pIvNl1v8pn7Bm .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-hU5pIvNl1v8pn7Bm .cluster text{fill:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm .cluster span{color:#333;}#mermaid-svg-hU5pIvNl1v8pn7Bm div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-hU5pIvNl1v8pn7Bm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
矩形节点

mermaid 语法如下：

flowchart RL
    node[矩形节点]
  • 圆角边形节点。

#mermaid-svg-LiSBOQJwL9D6w4Qf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .error-icon{fill:#552222;}#mermaid-svg-LiSBOQJwL9D6w4Qf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LiSBOQJwL9D6w4Qf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .marker.cross{stroke:#333333;}#mermaid-svg-LiSBOQJwL9D6w4Qf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LiSBOQJwL9D6w4Qf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .cluster-label text{fill:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .cluster-label span{color:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .label text,#mermaid-svg-LiSBOQJwL9D6w4Qf span{fill:#333;color:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .node rect,#mermaid-svg-LiSBOQJwL9D6w4Qf .node circle,#mermaid-svg-LiSBOQJwL9D6w4Qf .node ellipse,#mermaid-svg-LiSBOQJwL9D6w4Qf .node polygon,#mermaid-svg-LiSBOQJwL9D6w4Qf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LiSBOQJwL9D6w4Qf .node .label{text-align:center;}#mermaid-svg-LiSBOQJwL9D6w4Qf .node.clickable{cursor:pointer;}#mermaid-svg-LiSBOQJwL9D6w4Qf .arrowheadPath{fill:#333333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-LiSBOQJwL9D6w4Qf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-LiSBOQJwL9D6w4Qf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-LiSBOQJwL9D6w4Qf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-LiSBOQJwL9D6w4Qf .cluster text{fill:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf .cluster span{color:#333;}#mermaid-svg-LiSBOQJwL9D6w4Qf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-LiSBOQJwL9D6w4Qf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
圆角边节点

mermaid 语法如下：

flowchart LR
    node(圆角边节点)
  • 球场形节点。

#mermaid-svg-YISmBy6lz9zUN9EW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YISmBy6lz9zUN9EW .error-icon{fill:#552222;}#mermaid-svg-YISmBy6lz9zUN9EW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-YISmBy6lz9zUN9EW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-YISmBy6lz9zUN9EW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-YISmBy6lz9zUN9EW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-YISmBy6lz9zUN9EW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-YISmBy6lz9zUN9EW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-YISmBy6lz9zUN9EW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-YISmBy6lz9zUN9EW .marker.cross{stroke:#333333;}#mermaid-svg-YISmBy6lz9zUN9EW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-YISmBy6lz9zUN9EW .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-YISmBy6lz9zUN9EW .cluster-label text{fill:#333;}#mermaid-svg-YISmBy6lz9zUN9EW .cluster-label span{color:#333;}#mermaid-svg-YISmBy6lz9zUN9EW .label text,#mermaid-svg-YISmBy6lz9zUN9EW span{fill:#333;color:#333;}#mermaid-svg-YISmBy6lz9zUN9EW .node rect,#mermaid-svg-YISmBy6lz9zUN9EW .node circle,#mermaid-svg-YISmBy6lz9zUN9EW .node ellipse,#mermaid-svg-YISmBy6lz9zUN9EW .node polygon,#mermaid-svg-YISmBy6lz9zUN9EW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-YISmBy6lz9zUN9EW .node .label{text-align:center;}#mermaid-svg-YISmBy6lz9zUN9EW .node.clickable{cursor:pointer;}#mermaid-svg-YISmBy6lz9zUN9EW .arrowheadPath{fill:#333333;}#mermaid-svg-YISmBy6lz9zUN9EW .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-YISmBy6lz9zUN9EW .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-YISmBy6lz9zUN9EW .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-YISmBy6lz9zUN9EW .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-YISmBy6lz9zUN9EW .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-YISmBy6lz9zUN9EW .cluster text{fill:#333;}#mermaid-svg-YISmBy6lz9zUN9EW .cluster span{color:#333;}#mermaid-svg-YISmBy6lz9zUN9EW div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-YISmBy6lz9zUN9EW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
体育场状节点

mermaid 语法如下：

flowchart LR
    node([体育场状节点])
  • 子程序形节点。

#mermaid-svg-B0VwiQuFTvKkHEcU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU .error-icon{fill:#552222;}#mermaid-svg-B0VwiQuFTvKkHEcU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-B0VwiQuFTvKkHEcU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-B0VwiQuFTvKkHEcU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-B0VwiQuFTvKkHEcU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-B0VwiQuFTvKkHEcU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-B0VwiQuFTvKkHEcU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-B0VwiQuFTvKkHEcU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-B0VwiQuFTvKkHEcU .marker.cross{stroke:#333333;}#mermaid-svg-B0VwiQuFTvKkHEcU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-B0VwiQuFTvKkHEcU .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU .cluster-label text{fill:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU .cluster-label span{color:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU .label text,#mermaid-svg-B0VwiQuFTvKkHEcU span{fill:#333;color:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU .node rect,#mermaid-svg-B0VwiQuFTvKkHEcU .node circle,#mermaid-svg-B0VwiQuFTvKkHEcU .node ellipse,#mermaid-svg-B0VwiQuFTvKkHEcU .node polygon,#mermaid-svg-B0VwiQuFTvKkHEcU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-B0VwiQuFTvKkHEcU .node .label{text-align:center;}#mermaid-svg-B0VwiQuFTvKkHEcU .node.clickable{cursor:pointer;}#mermaid-svg-B0VwiQuFTvKkHEcU .arrowheadPath{fill:#333333;}#mermaid-svg-B0VwiQuFTvKkHEcU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-B0VwiQuFTvKkHEcU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-B0VwiQuFTvKkHEcU .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-B0VwiQuFTvKkHEcU .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-B0VwiQuFTvKkHEcU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-B0VwiQuFTvKkHEcU .cluster text{fill:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU .cluster span{color:#333;}#mermaid-svg-B0VwiQuFTvKkHEcU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-B0VwiQuFTvKkHEcU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
子程序形节

mermaid 语法如下：

flowchart LR
    node[[子程序形节点]]
  • 圆柱形节点。

#mermaid-svg-NGy91hLDHTdrSk4q {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-NGy91hLDHTdrSk4q .error-icon{fill:#552222;}#mermaid-svg-NGy91hLDHTdrSk4q .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-NGy91hLDHTdrSk4q .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-NGy91hLDHTdrSk4q .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-NGy91hLDHTdrSk4q .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-NGy91hLDHTdrSk4q .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-NGy91hLDHTdrSk4q .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-NGy91hLDHTdrSk4q .marker{fill:#333333;stroke:#333333;}#mermaid-svg-NGy91hLDHTdrSk4q .marker.cross{stroke:#333333;}#mermaid-svg-NGy91hLDHTdrSk4q svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-NGy91hLDHTdrSk4q .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-NGy91hLDHTdrSk4q .cluster-label text{fill:#333;}#mermaid-svg-NGy91hLDHTdrSk4q .cluster-label span{color:#333;}#mermaid-svg-NGy91hLDHTdrSk4q .label text,#mermaid-svg-NGy91hLDHTdrSk4q span{fill:#333;color:#333;}#mermaid-svg-NGy91hLDHTdrSk4q .node rect,#mermaid-svg-NGy91hLDHTdrSk4q .node circle,#mermaid-svg-NGy91hLDHTdrSk4q .node ellipse,#mermaid-svg-NGy91hLDHTdrSk4q .node polygon,#mermaid-svg-NGy91hLDHTdrSk4q .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NGy91hLDHTdrSk4q .node .label{text-align:center;}#mermaid-svg-NGy91hLDHTdrSk4q .node.clickable{cursor:pointer;}#mermaid-svg-NGy91hLDHTdrSk4q .arrowheadPath{fill:#333333;}#mermaid-svg-NGy91hLDHTdrSk4q .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-NGy91hLDHTdrSk4q .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-NGy91hLDHTdrSk4q .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-NGy91hLDHTdrSk4q .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-NGy91hLDHTdrSk4q .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-NGy91hLDHTdrSk4q .cluster text{fill:#333;}#mermaid-svg-NGy91hLDHTdrSk4q .cluster span{color:#333;}#mermaid-svg-NGy91hLDHTdrSk4q div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-NGy91hLDHTdrSk4q :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
圆柱形节点

mermaid 语法如下：

flowchart LR
    node[(圆柱形节点)]
  • 圆形节点。

#mermaid-svg-9hQWT8UhhPVsALry {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9hQWT8UhhPVsALry .error-icon{fill:#552222;}#mermaid-svg-9hQWT8UhhPVsALry .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9hQWT8UhhPVsALry .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9hQWT8UhhPVsALry .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9hQWT8UhhPVsALry .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9hQWT8UhhPVsALry .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9hQWT8UhhPVsALry .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9hQWT8UhhPVsALry .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9hQWT8UhhPVsALry .marker.cross{stroke:#333333;}#mermaid-svg-9hQWT8UhhPVsALry svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9hQWT8UhhPVsALry .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9hQWT8UhhPVsALry .cluster-label text{fill:#333;}#mermaid-svg-9hQWT8UhhPVsALry .cluster-label span{color:#333;}#mermaid-svg-9hQWT8UhhPVsALry .label text,#mermaid-svg-9hQWT8UhhPVsALry span{fill:#333;color:#333;}#mermaid-svg-9hQWT8UhhPVsALry .node rect,#mermaid-svg-9hQWT8UhhPVsALry .node circle,#mermaid-svg-9hQWT8UhhPVsALry .node ellipse,#mermaid-svg-9hQWT8UhhPVsALry .node polygon,#mermaid-svg-9hQWT8UhhPVsALry .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9hQWT8UhhPVsALry .node .label{text-align:center;}#mermaid-svg-9hQWT8UhhPVsALry .node.clickable{cursor:pointer;}#mermaid-svg-9hQWT8UhhPVsALry .arrowheadPath{fill:#333333;}#mermaid-svg-9hQWT8UhhPVsALry .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9hQWT8UhhPVsALry .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9hQWT8UhhPVsALry .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9hQWT8UhhPVsALry .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9hQWT8UhhPVsALry .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9hQWT8UhhPVsALry .cluster text{fill:#333;}#mermaid-svg-9hQWT8UhhPVsALry .cluster span{color:#333;}#mermaid-svg-9hQWT8UhhPVsALry div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9hQWT8UhhPVsALry :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
圆形节点

mermaid 语法如下：

flowchart LR
    node((圆形节点))
  • 非对称形节点。

#mermaid-svg-p94lVvmYyocpvD1U {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-p94lVvmYyocpvD1U .error-icon{fill:#552222;}#mermaid-svg-p94lVvmYyocpvD1U .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-p94lVvmYyocpvD1U .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-p94lVvmYyocpvD1U .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-p94lVvmYyocpvD1U .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-p94lVvmYyocpvD1U .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-p94lVvmYyocpvD1U .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-p94lVvmYyocpvD1U .marker{fill:#333333;stroke:#333333;}#mermaid-svg-p94lVvmYyocpvD1U .marker.cross{stroke:#333333;}#mermaid-svg-p94lVvmYyocpvD1U svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-p94lVvmYyocpvD1U .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-p94lVvmYyocpvD1U .cluster-label text{fill:#333;}#mermaid-svg-p94lVvmYyocpvD1U .cluster-label span{color:#333;}#mermaid-svg-p94lVvmYyocpvD1U .label text,#mermaid-svg-p94lVvmYyocpvD1U span{fill:#333;color:#333;}#mermaid-svg-p94lVvmYyocpvD1U .node rect,#mermaid-svg-p94lVvmYyocpvD1U .node circle,#mermaid-svg-p94lVvmYyocpvD1U .node ellipse,#mermaid-svg-p94lVvmYyocpvD1U .node polygon,#mermaid-svg-p94lVvmYyocpvD1U .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-p94lVvmYyocpvD1U .node .label{text-align:center;}#mermaid-svg-p94lVvmYyocpvD1U .node.clickable{cursor:pointer;}#mermaid-svg-p94lVvmYyocpvD1U .arrowheadPath{fill:#333333;}#mermaid-svg-p94lVvmYyocpvD1U .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-p94lVvmYyocpvD1U .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-p94lVvmYyocpvD1U .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-p94lVvmYyocpvD1U .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-p94lVvmYyocpvD1U .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-p94lVvmYyocpvD1U .cluster text{fill:#333;}#mermaid-svg-p94lVvmYyocpvD1U .cluster span{color:#333;}#mermaid-svg-p94lVvmYyocpvD1U div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-p94lVvmYyocpvD1U :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
非对称形节点

mermaid 语法如下：

flowchart LR
    node>非对称形节点]
  • 菱形节点。

#mermaid-svg-kshKTT5Uwbw2WHzY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY .error-icon{fill:#552222;}#mermaid-svg-kshKTT5Uwbw2WHzY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-kshKTT5Uwbw2WHzY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-kshKTT5Uwbw2WHzY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-kshKTT5Uwbw2WHzY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-kshKTT5Uwbw2WHzY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-kshKTT5Uwbw2WHzY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-kshKTT5Uwbw2WHzY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-kshKTT5Uwbw2WHzY .marker.cross{stroke:#333333;}#mermaid-svg-kshKTT5Uwbw2WHzY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-kshKTT5Uwbw2WHzY .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY .cluster-label text{fill:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY .cluster-label span{color:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY .label text,#mermaid-svg-kshKTT5Uwbw2WHzY span{fill:#333;color:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY .node rect,#mermaid-svg-kshKTT5Uwbw2WHzY .node circle,#mermaid-svg-kshKTT5Uwbw2WHzY .node ellipse,#mermaid-svg-kshKTT5Uwbw2WHzY .node polygon,#mermaid-svg-kshKTT5Uwbw2WHzY .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-kshKTT5Uwbw2WHzY .node .label{text-align:center;}#mermaid-svg-kshKTT5Uwbw2WHzY .node.clickable{cursor:pointer;}#mermaid-svg-kshKTT5Uwbw2WHzY .arrowheadPath{fill:#333333;}#mermaid-svg-kshKTT5Uwbw2WHzY .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-kshKTT5Uwbw2WHzY .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-kshKTT5Uwbw2WHzY .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-kshKTT5Uwbw2WHzY .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-kshKTT5Uwbw2WHzY .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-kshKTT5Uwbw2WHzY .cluster text{fill:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY .cluster span{color:#333;}#mermaid-svg-kshKTT5Uwbw2WHzY div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-kshKTT5Uwbw2WHzY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
菱形节点

mermaid 语法如下：

flowchart LR
    node{菱形节点}
  • 六角形节点。

#mermaid-svg-64TsfAb63vyl1drU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-64TsfAb63vyl1drU .error-icon{fill:#552222;}#mermaid-svg-64TsfAb63vyl1drU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-64TsfAb63vyl1drU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-64TsfAb63vyl1drU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-64TsfAb63vyl1drU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-64TsfAb63vyl1drU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-64TsfAb63vyl1drU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-64TsfAb63vyl1drU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-64TsfAb63vyl1drU .marker.cross{stroke:#333333;}#mermaid-svg-64TsfAb63vyl1drU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-64TsfAb63vyl1drU .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-64TsfAb63vyl1drU .cluster-label text{fill:#333;}#mermaid-svg-64TsfAb63vyl1drU .cluster-label span{color:#333;}#mermaid-svg-64TsfAb63vyl1drU .label text,#mermaid-svg-64TsfAb63vyl1drU span{fill:#333;color:#333;}#mermaid-svg-64TsfAb63vyl1drU .node rect,#mermaid-svg-64TsfAb63vyl1drU .node circle,#mermaid-svg-64TsfAb63vyl1drU .node ellipse,#mermaid-svg-64TsfAb63vyl1drU .node polygon,#mermaid-svg-64TsfAb63vyl1drU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-64TsfAb63vyl1drU .node .label{text-align:center;}#mermaid-svg-64TsfAb63vyl1drU .node.clickable{cursor:pointer;}#mermaid-svg-64TsfAb63vyl1drU .arrowheadPath{fill:#333333;}#mermaid-svg-64TsfAb63vyl1drU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-64TsfAb63vyl1drU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-64TsfAb63vyl1drU .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-64TsfAb63vyl1drU .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-64TsfAb63vyl1drU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-64TsfAb63vyl1drU .cluster text{fill:#333;}#mermaid-svg-64TsfAb63vyl1drU .cluster span{color:#333;}#mermaid-svg-64TsfAb63vyl1drU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-64TsfAb63vyl1drU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
六角形节点

mermaid 语法如下：

flowchart LR
    node{{六角形节点}}
  • 平行四边形节点。

#mermaid-svg-TtKHP7IMOI9rCMIv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv .error-icon{fill:#552222;}#mermaid-svg-TtKHP7IMOI9rCMIv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TtKHP7IMOI9rCMIv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TtKHP7IMOI9rCMIv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TtKHP7IMOI9rCMIv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TtKHP7IMOI9rCMIv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TtKHP7IMOI9rCMIv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TtKHP7IMOI9rCMIv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TtKHP7IMOI9rCMIv .marker.cross{stroke:#333333;}#mermaid-svg-TtKHP7IMOI9rCMIv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TtKHP7IMOI9rCMIv .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv .cluster-label text{fill:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv .cluster-label span{color:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv .label text,#mermaid-svg-TtKHP7IMOI9rCMIv span{fill:#333;color:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv .node rect,#mermaid-svg-TtKHP7IMOI9rCMIv .node circle,#mermaid-svg-TtKHP7IMOI9rCMIv .node ellipse,#mermaid-svg-TtKHP7IMOI9rCMIv .node polygon,#mermaid-svg-TtKHP7IMOI9rCMIv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TtKHP7IMOI9rCMIv .node .label{text-align:center;}#mermaid-svg-TtKHP7IMOI9rCMIv .node.clickable{cursor:pointer;}#mermaid-svg-TtKHP7IMOI9rCMIv .arrowheadPath{fill:#333333;}#mermaid-svg-TtKHP7IMOI9rCMIv .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-TtKHP7IMOI9rCMIv .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-TtKHP7IMOI9rCMIv .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-TtKHP7IMOI9rCMIv .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-TtKHP7IMOI9rCMIv .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-TtKHP7IMOI9rCMIv .cluster text{fill:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv .cluster span{color:#333;}#mermaid-svg-TtKHP7IMOI9rCMIv div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-TtKHP7IMOI9rCMIv :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
平行四边形

平行四边形

mermaid 语法如下：

flowchart TD
    node1[/平行四边形/]
    node2[\平行四边形\]
  • 梯形节点。

#mermaid-svg-myzfmfJcPdhuRhHO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-myzfmfJcPdhuRhHO .error-icon{fill:#552222;}#mermaid-svg-myzfmfJcPdhuRhHO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-myzfmfJcPdhuRhHO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-myzfmfJcPdhuRhHO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-myzfmfJcPdhuRhHO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-myzfmfJcPdhuRhHO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-myzfmfJcPdhuRhHO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-myzfmfJcPdhuRhHO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-myzfmfJcPdhuRhHO .marker.cross{stroke:#333333;}#mermaid-svg-myzfmfJcPdhuRhHO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-myzfmfJcPdhuRhHO .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-myzfmfJcPdhuRhHO .cluster-label text{fill:#333;}#mermaid-svg-myzfmfJcPdhuRhHO .cluster-label span{color:#333;}#mermaid-svg-myzfmfJcPdhuRhHO .label text,#mermaid-svg-myzfmfJcPdhuRhHO span{fill:#333;color:#333;}#mermaid-svg-myzfmfJcPdhuRhHO .node rect,#mermaid-svg-myzfmfJcPdhuRhHO .node circle,#mermaid-svg-myzfmfJcPdhuRhHO .node ellipse,#mermaid-svg-myzfmfJcPdhuRhHO .node polygon,#mermaid-svg-myzfmfJcPdhuRhHO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-myzfmfJcPdhuRhHO .node .label{text-align:center;}#mermaid-svg-myzfmfJcPdhuRhHO .node.clickable{cursor:pointer;}#mermaid-svg-myzfmfJcPdhuRhHO .arrowheadPath{fill:#333333;}#mermaid-svg-myzfmfJcPdhuRhHO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-myzfmfJcPdhuRhHO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-myzfmfJcPdhuRhHO .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-myzfmfJcPdhuRhHO .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-myzfmfJcPdhuRhHO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-myzfmfJcPdhuRhHO .cluster text{fill:#333;}#mermaid-svg-myzfmfJcPdhuRhHO .cluster span{color:#333;}#mermaid-svg-myzfmfJcPdhuRhHO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-myzfmfJcPdhuRhHO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
上梯形

下梯形

mermaid 语法如下：

flowchart TD
    A[/上梯形\]
    B[\下梯形/]
  • 环形节点。

#mermaid-svg-MCZ6AhWDmPfaphwi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi .error-icon{fill:#552222;}#mermaid-svg-MCZ6AhWDmPfaphwi .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MCZ6AhWDmPfaphwi .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-MCZ6AhWDmPfaphwi .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MCZ6AhWDmPfaphwi .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MCZ6AhWDmPfaphwi .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MCZ6AhWDmPfaphwi .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MCZ6AhWDmPfaphwi .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MCZ6AhWDmPfaphwi .marker.cross{stroke:#333333;}#mermaid-svg-MCZ6AhWDmPfaphwi svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MCZ6AhWDmPfaphwi .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi .cluster-label text{fill:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi .cluster-label span{color:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi .label text,#mermaid-svg-MCZ6AhWDmPfaphwi span{fill:#333;color:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi .node rect,#mermaid-svg-MCZ6AhWDmPfaphwi .node circle,#mermaid-svg-MCZ6AhWDmPfaphwi .node ellipse,#mermaid-svg-MCZ6AhWDmPfaphwi .node polygon,#mermaid-svg-MCZ6AhWDmPfaphwi .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-MCZ6AhWDmPfaphwi .node .label{text-align:center;}#mermaid-svg-MCZ6AhWDmPfaphwi .node.clickable{cursor:pointer;}#mermaid-svg-MCZ6AhWDmPfaphwi .arrowheadPath{fill:#333333;}#mermaid-svg-MCZ6AhWDmPfaphwi .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-MCZ6AhWDmPfaphwi .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-MCZ6AhWDmPfaphwi .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-MCZ6AhWDmPfaphwi .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-MCZ6AhWDmPfaphwi .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-MCZ6AhWDmPfaphwi .cluster text{fill:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi .cluster span{color:#333;}#mermaid-svg-MCZ6AhWDmPfaphwi div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-MCZ6AhWDmPfaphwi :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
环形节点

mermaid 语法如下：

flowchart TD
    node((环形节点))

节点形状总结如下表：

形状Mermaid 符号矩形

xxx

/ 

node[xxx]

圆形

(xxx)

球场形

([xxx])

子程序形

[[xxx]]

圆柱形

[(xxx)]

非对称形

>xxx]

菱形

{xxx}

六角形

{{xxx}}

平行四边形

[/xxx/]

/ 

[\xxx\]

梯形

[/xxx\]

/ 

[\xxx/]

环形

((xxx))

节点间的连接

可以连接两个节点通过一条线，可以设置不同类型的线和带有文字的线，节点可以使用

链接/边

连接，可以具有不同类型的链接或将文本字符串附加到链接。

  • 实线直接连接。

#mermaid-svg-ERJyVWA7CmdbKBS7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .error-icon{fill:#552222;}#mermaid-svg-ERJyVWA7CmdbKBS7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ERJyVWA7CmdbKBS7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .marker.cross{stroke:#333333;}#mermaid-svg-ERJyVWA7CmdbKBS7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ERJyVWA7CmdbKBS7 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .cluster-label text{fill:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .cluster-label span{color:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .label text,#mermaid-svg-ERJyVWA7CmdbKBS7 span{fill:#333;color:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .node rect,#mermaid-svg-ERJyVWA7CmdbKBS7 .node circle,#mermaid-svg-ERJyVWA7CmdbKBS7 .node ellipse,#mermaid-svg-ERJyVWA7CmdbKBS7 .node polygon,#mermaid-svg-ERJyVWA7CmdbKBS7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ERJyVWA7CmdbKBS7 .node .label{text-align:center;}#mermaid-svg-ERJyVWA7CmdbKBS7 .node.clickable{cursor:pointer;}#mermaid-svg-ERJyVWA7CmdbKBS7 .arrowheadPath{fill:#333333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ERJyVWA7CmdbKBS7 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ERJyVWA7CmdbKBS7 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ERJyVWA7CmdbKBS7 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ERJyVWA7CmdbKBS7 .cluster text{fill:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 .cluster span{color:#333;}#mermaid-svg-ERJyVWA7CmdbKBS7 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ERJyVWA7CmdbKBS7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

mermaid 语法如下：

flowchart LR
    A --- B
  • 单方向箭头的实线连接。
  1. 从左到右方向。

#mermaid-svg-208ApdFX1EtrvzRA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-208ApdFX1EtrvzRA .error-icon{fill:#552222;}#mermaid-svg-208ApdFX1EtrvzRA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-208ApdFX1EtrvzRA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-208ApdFX1EtrvzRA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-208ApdFX1EtrvzRA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-208ApdFX1EtrvzRA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-208ApdFX1EtrvzRA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-208ApdFX1EtrvzRA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-208ApdFX1EtrvzRA .marker.cross{stroke:#333333;}#mermaid-svg-208ApdFX1EtrvzRA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-208ApdFX1EtrvzRA .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-208ApdFX1EtrvzRA .cluster-label text{fill:#333;}#mermaid-svg-208ApdFX1EtrvzRA .cluster-label span{color:#333;}#mermaid-svg-208ApdFX1EtrvzRA .label text,#mermaid-svg-208ApdFX1EtrvzRA span{fill:#333;color:#333;}#mermaid-svg-208ApdFX1EtrvzRA .node rect,#mermaid-svg-208ApdFX1EtrvzRA .node circle,#mermaid-svg-208ApdFX1EtrvzRA .node ellipse,#mermaid-svg-208ApdFX1EtrvzRA .node polygon,#mermaid-svg-208ApdFX1EtrvzRA .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-208ApdFX1EtrvzRA .node .label{text-align:center;}#mermaid-svg-208ApdFX1EtrvzRA .node.clickable{cursor:pointer;}#mermaid-svg-208ApdFX1EtrvzRA .arrowheadPath{fill:#333333;}#mermaid-svg-208ApdFX1EtrvzRA .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-208ApdFX1EtrvzRA .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-208ApdFX1EtrvzRA .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-208ApdFX1EtrvzRA .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-208ApdFX1EtrvzRA .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-208ApdFX1EtrvzRA .cluster text{fill:#333;}#mermaid-svg-208ApdFX1EtrvzRA .cluster span{color:#333;}#mermaid-svg-208ApdFX1EtrvzRA div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-208ApdFX1EtrvzRA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

mermaid 语法如下：

flowchart LR
    A-->B

2.从右到左方向。

#mermaid-svg-fi1jElmhmKItNnH3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fi1jElmhmKItNnH3 .error-icon{fill:#552222;}#mermaid-svg-fi1jElmhmKItNnH3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-fi1jElmhmKItNnH3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-fi1jElmhmKItNnH3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-fi1jElmhmKItNnH3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-fi1jElmhmKItNnH3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-fi1jElmhmKItNnH3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-fi1jElmhmKItNnH3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-fi1jElmhmKItNnH3 .marker.cross{stroke:#333333;}#mermaid-svg-fi1jElmhmKItNnH3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-fi1jElmhmKItNnH3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-fi1jElmhmKItNnH3 .cluster-label text{fill:#333;}#mermaid-svg-fi1jElmhmKItNnH3 .cluster-label span{color:#333;}#mermaid-svg-fi1jElmhmKItNnH3 .label text,#mermaid-svg-fi1jElmhmKItNnH3 span{fill:#333;color:#333;}#mermaid-svg-fi1jElmhmKItNnH3 .node rect,#mermaid-svg-fi1jElmhmKItNnH3 .node circle,#mermaid-svg-fi1jElmhmKItNnH3 .node ellipse,#mermaid-svg-fi1jElmhmKItNnH3 .node polygon,#mermaid-svg-fi1jElmhmKItNnH3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-fi1jElmhmKItNnH3 .node .label{text-align:center;}#mermaid-svg-fi1jElmhmKItNnH3 .node.clickable{cursor:pointer;}#mermaid-svg-fi1jElmhmKItNnH3 .arrowheadPath{fill:#333333;}#mermaid-svg-fi1jElmhmKItNnH3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-fi1jElmhmKItNnH3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-fi1jElmhmKItNnH3 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-fi1jElmhmKItNnH3 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-fi1jElmhmKItNnH3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-fi1jElmhmKItNnH3 .cluster text{fill:#333;}#mermaid-svg-fi1jElmhmKItNnH3 .cluster span{color:#333;}#mermaid-svg-fi1jElmhmKItNnH3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-fi1jElmhmKItNnH3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

mermaid 语法如下：

flowchart RL
    A-->B
  1. 从上到下方向。

#mermaid-svg-Ui7MzUaji1UutGDZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ .error-icon{fill:#552222;}#mermaid-svg-Ui7MzUaji1UutGDZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Ui7MzUaji1UutGDZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Ui7MzUaji1UutGDZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Ui7MzUaji1UutGDZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Ui7MzUaji1UutGDZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Ui7MzUaji1UutGDZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Ui7MzUaji1UutGDZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Ui7MzUaji1UutGDZ .marker.cross{stroke:#333333;}#mermaid-svg-Ui7MzUaji1UutGDZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Ui7MzUaji1UutGDZ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ .cluster-label text{fill:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ .cluster-label span{color:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ .label text,#mermaid-svg-Ui7MzUaji1UutGDZ span{fill:#333;color:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ .node rect,#mermaid-svg-Ui7MzUaji1UutGDZ .node circle,#mermaid-svg-Ui7MzUaji1UutGDZ .node ellipse,#mermaid-svg-Ui7MzUaji1UutGDZ .node polygon,#mermaid-svg-Ui7MzUaji1UutGDZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Ui7MzUaji1UutGDZ .node .label{text-align:center;}#mermaid-svg-Ui7MzUaji1UutGDZ .node.clickable{cursor:pointer;}#mermaid-svg-Ui7MzUaji1UutGDZ .arrowheadPath{fill:#333333;}#mermaid-svg-Ui7MzUaji1UutGDZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Ui7MzUaji1UutGDZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Ui7MzUaji1UutGDZ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Ui7MzUaji1UutGDZ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Ui7MzUaji1UutGDZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Ui7MzUaji1UutGDZ .cluster text{fill:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ .cluster span{color:#333;}#mermaid-svg-Ui7MzUaji1UutGDZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Ui7MzUaji1UutGDZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

mermaid 语法如下：

flowchart TB
    A-->B
  1. 从下到上方向。

#mermaid-svg-WDLMIRnZesM99aFo {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WDLMIRnZesM99aFo .error-icon{fill:#552222;}#mermaid-svg-WDLMIRnZesM99aFo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WDLMIRnZesM99aFo .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WDLMIRnZesM99aFo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WDLMIRnZesM99aFo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WDLMIRnZesM99aFo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WDLMIRnZesM99aFo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WDLMIRnZesM99aFo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WDLMIRnZesM99aFo .marker.cross{stroke:#333333;}#mermaid-svg-WDLMIRnZesM99aFo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WDLMIRnZesM99aFo .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WDLMIRnZesM99aFo .cluster-label text{fill:#333;}#mermaid-svg-WDLMIRnZesM99aFo .cluster-label span{color:#333;}#mermaid-svg-WDLMIRnZesM99aFo .label text,#mermaid-svg-WDLMIRnZesM99aFo span{fill:#333;color:#333;}#mermaid-svg-WDLMIRnZesM99aFo .node rect,#mermaid-svg-WDLMIRnZesM99aFo .node circle,#mermaid-svg-WDLMIRnZesM99aFo .node ellipse,#mermaid-svg-WDLMIRnZesM99aFo .node polygon,#mermaid-svg-WDLMIRnZesM99aFo .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WDLMIRnZesM99aFo .node .label{text-align:center;}#mermaid-svg-WDLMIRnZesM99aFo .node.clickable{cursor:pointer;}#mermaid-svg-WDLMIRnZesM99aFo .arrowheadPath{fill:#333333;}#mermaid-svg-WDLMIRnZesM99aFo .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WDLMIRnZesM99aFo .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WDLMIRnZesM99aFo .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-WDLMIRnZesM99aFo .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-WDLMIRnZesM99aFo .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WDLMIRnZesM99aFo .cluster text{fill:#333;}#mermaid-svg-WDLMIRnZesM99aFo .cluster span{color:#333;}#mermaid-svg-WDLMIRnZesM99aFo div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WDLMIRnZesM99aFo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

mermaid 语法如下：

flowchart BT
    A-->B
  • 带文本的节点连接。

#mermaid-svg-OQEtp4LJXGsczrlf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OQEtp4LJXGsczrlf .error-icon{fill:#552222;}#mermaid-svg-OQEtp4LJXGsczrlf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-OQEtp4LJXGsczrlf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-OQEtp4LJXGsczrlf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-OQEtp4LJXGsczrlf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-OQEtp4LJXGsczrlf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-OQEtp4LJXGsczrlf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-OQEtp4LJXGsczrlf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-OQEtp4LJXGsczrlf .marker.cross{stroke:#333333;}#mermaid-svg-OQEtp4LJXGsczrlf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-OQEtp4LJXGsczrlf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-OQEtp4LJXGsczrlf .cluster-label text{fill:#333;}#mermaid-svg-OQEtp4LJXGsczrlf .cluster-label span{color:#333;}#mermaid-svg-OQEtp4LJXGsczrlf .label text,#mermaid-svg-OQEtp4LJXGsczrlf span{fill:#333;color:#333;}#mermaid-svg-OQEtp4LJXGsczrlf .node rect,#mermaid-svg-OQEtp4LJXGsczrlf .node circle,#mermaid-svg-OQEtp4LJXGsczrlf .node ellipse,#mermaid-svg-OQEtp4LJXGsczrlf .node polygon,#mermaid-svg-OQEtp4LJXGsczrlf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-OQEtp4LJXGsczrlf .node .label{text-align:center;}#mermaid-svg-OQEtp4LJXGsczrlf .node.clickable{cursor:pointer;}#mermaid-svg-OQEtp4LJXGsczrlf .arrowheadPath{fill:#333333;}#mermaid-svg-OQEtp4LJXGsczrlf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-OQEtp4LJXGsczrlf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-OQEtp4LJXGsczrlf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-OQEtp4LJXGsczrlf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-OQEtp4LJXGsczrlf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-OQEtp4LJXGsczrlf .cluster text{fill:#333;}#mermaid-svg-OQEtp4LJXGsczrlf .cluster span{color:#333;}#mermaid-svg-OQEtp4LJXGsczrlf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-OQEtp4LJXGsczrlf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

文本

A

B

mermaid 语法如下：

flowchart LR
    A-- 文本 ---B
    A---|文本|B
  • 单方向箭头的文本线。
  1. 从左到右方向。

#mermaid-svg-dfCiH69ZliDYfqmD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dfCiH69ZliDYfqmD .error-icon{fill:#552222;}#mermaid-svg-dfCiH69ZliDYfqmD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dfCiH69ZliDYfqmD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-dfCiH69ZliDYfqmD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dfCiH69ZliDYfqmD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dfCiH69ZliDYfqmD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dfCiH69ZliDYfqmD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dfCiH69ZliDYfqmD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dfCiH69ZliDYfqmD .marker.cross{stroke:#333333;}#mermaid-svg-dfCiH69ZliDYfqmD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dfCiH69ZliDYfqmD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-dfCiH69ZliDYfqmD .cluster-label text{fill:#333;}#mermaid-svg-dfCiH69ZliDYfqmD .cluster-label span{color:#333;}#mermaid-svg-dfCiH69ZliDYfqmD .label text,#mermaid-svg-dfCiH69ZliDYfqmD span{fill:#333;color:#333;}#mermaid-svg-dfCiH69ZliDYfqmD .node rect,#mermaid-svg-dfCiH69ZliDYfqmD .node circle,#mermaid-svg-dfCiH69ZliDYfqmD .node ellipse,#mermaid-svg-dfCiH69ZliDYfqmD .node polygon,#mermaid-svg-dfCiH69ZliDYfqmD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dfCiH69ZliDYfqmD .node .label{text-align:center;}#mermaid-svg-dfCiH69ZliDYfqmD .node.clickable{cursor:pointer;}#mermaid-svg-dfCiH69ZliDYfqmD .arrowheadPath{fill:#333333;}#mermaid-svg-dfCiH69ZliDYfqmD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-dfCiH69ZliDYfqmD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dfCiH69ZliDYfqmD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-dfCiH69ZliDYfqmD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-dfCiH69ZliDYfqmD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-dfCiH69ZliDYfqmD .cluster text{fill:#333;}#mermaid-svg-dfCiH69ZliDYfqmD .cluster span{color:#333;}#mermaid-svg-dfCiH69ZliDYfqmD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-dfCiH69ZliDYfqmD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

文本

A

B

mermaid 语法如下：

flowchart LR
    A-->|文本|B
    A-- 文本 -->B
  1. 从右到左方向。

#mermaid-svg-8MTETSJt2jFMPXPk {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8MTETSJt2jFMPXPk .error-icon{fill:#552222;}#mermaid-svg-8MTETSJt2jFMPXPk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8MTETSJt2jFMPXPk .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8MTETSJt2jFMPXPk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8MTETSJt2jFMPXPk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8MTETSJt2jFMPXPk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8MTETSJt2jFMPXPk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8MTETSJt2jFMPXPk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8MTETSJt2jFMPXPk .marker.cross{stroke:#333333;}#mermaid-svg-8MTETSJt2jFMPXPk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8MTETSJt2jFMPXPk .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8MTETSJt2jFMPXPk .cluster-label text{fill:#333;}#mermaid-svg-8MTETSJt2jFMPXPk .cluster-label span{color:#333;}#mermaid-svg-8MTETSJt2jFMPXPk .label text,#mermaid-svg-8MTETSJt2jFMPXPk span{fill:#333;color:#333;}#mermaid-svg-8MTETSJt2jFMPXPk .node rect,#mermaid-svg-8MTETSJt2jFMPXPk .node circle,#mermaid-svg-8MTETSJt2jFMPXPk .node ellipse,#mermaid-svg-8MTETSJt2jFMPXPk .node polygon,#mermaid-svg-8MTETSJt2jFMPXPk .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8MTETSJt2jFMPXPk .node .label{text-align:center;}#mermaid-svg-8MTETSJt2jFMPXPk .node.clickable{cursor:pointer;}#mermaid-svg-8MTETSJt2jFMPXPk .arrowheadPath{fill:#333333;}#mermaid-svg-8MTETSJt2jFMPXPk .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8MTETSJt2jFMPXPk .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8MTETSJt2jFMPXPk .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-8MTETSJt2jFMPXPk .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-8MTETSJt2jFMPXPk .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8MTETSJt2jFMPXPk .cluster text{fill:#333;}#mermaid-svg-8MTETSJt2jFMPXPk .cluster span{color:#333;}#mermaid-svg-8MTETSJt2jFMPXPk div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8MTETSJt2jFMPXPk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

文本

A

B

mermaid 语法如下：

flowchart RL
    A-->|文本|B
    A-- 文本 -->B
  1. 从上到下方向。

#mermaid-svg-BFLl8amKgYfKRfou {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-BFLl8amKgYfKRfou .error-icon{fill:#552222;}#mermaid-svg-BFLl8amKgYfKRfou .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BFLl8amKgYfKRfou .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-BFLl8amKgYfKRfou .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BFLl8amKgYfKRfou .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BFLl8amKgYfKRfou .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BFLl8amKgYfKRfou .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BFLl8amKgYfKRfou .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BFLl8amKgYfKRfou .marker.cross{stroke:#333333;}#mermaid-svg-BFLl8amKgYfKRfou svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BFLl8amKgYfKRfou .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-BFLl8amKgYfKRfou .cluster-label text{fill:#333;}#mermaid-svg-BFLl8amKgYfKRfou .cluster-label span{color:#333;}#mermaid-svg-BFLl8amKgYfKRfou .label text,#mermaid-svg-BFLl8amKgYfKRfou span{fill:#333;color:#333;}#mermaid-svg-BFLl8amKgYfKRfou .node rect,#mermaid-svg-BFLl8amKgYfKRfou .node circle,#mermaid-svg-BFLl8amKgYfKRfou .node ellipse,#mermaid-svg-BFLl8amKgYfKRfou .node polygon,#mermaid-svg-BFLl8amKgYfKRfou .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-BFLl8amKgYfKRfou .node .label{text-align:center;}#mermaid-svg-BFLl8amKgYfKRfou .node.clickable{cursor:pointer;}#mermaid-svg-BFLl8amKgYfKRfou .arrowheadPath{fill:#333333;}#mermaid-svg-BFLl8amKgYfKRfou .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-BFLl8amKgYfKRfou .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-BFLl8amKgYfKRfou .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-BFLl8amKgYfKRfou .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-BFLl8amKgYfKRfou .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-BFLl8amKgYfKRfou .cluster text{fill:#333;}#mermaid-svg-BFLl8amKgYfKRfou .cluster span{color:#333;}#mermaid-svg-BFLl8amKgYfKRfou div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-BFLl8amKgYfKRfou :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

文本

A

B

mermaid 语法如下：

flowchart TB
    A-->|文本|B
    A-- 文本 -->B
  1. 从下到上方向。

#mermaid-svg-RGXLF8VubkHq6xBC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-RGXLF8VubkHq6xBC .error-icon{fill:#552222;}#mermaid-svg-RGXLF8VubkHq6xBC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-RGXLF8VubkHq6xBC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-RGXLF8VubkHq6xBC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-RGXLF8VubkHq6xBC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-RGXLF8VubkHq6xBC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-RGXLF8VubkHq6xBC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-RGXLF8VubkHq6xBC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-RGXLF8VubkHq6xBC .marker.cross{stroke:#333333;}#mermaid-svg-RGXLF8VubkHq6xBC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-RGXLF8VubkHq6xBC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-RGXLF8VubkHq6xBC .cluster-label text{fill:#333;}#mermaid-svg-RGXLF8VubkHq6xBC .cluster-label span{color:#333;}#mermaid-svg-RGXLF8VubkHq6xBC .label text,#mermaid-svg-RGXLF8VubkHq6xBC span{fill:#333;color:#333;}#mermaid-svg-RGXLF8VubkHq6xBC .node rect,#mermaid-svg-RGXLF8VubkHq6xBC .node circle,#mermaid-svg-RGXLF8VubkHq6xBC .node ellipse,#mermaid-svg-RGXLF8VubkHq6xBC .node polygon,#mermaid-svg-RGXLF8VubkHq6xBC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-RGXLF8VubkHq6xBC .node .label{text-align:center;}#mermaid-svg-RGXLF8VubkHq6xBC .node.clickable{cursor:pointer;}#mermaid-svg-RGXLF8VubkHq6xBC .arrowheadPath{fill:#333333;}#mermaid-svg-RGXLF8VubkHq6xBC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-RGXLF8VubkHq6xBC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-RGXLF8VubkHq6xBC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-RGXLF8VubkHq6xBC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-RGXLF8VubkHq6xBC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-RGXLF8VubkHq6xBC .cluster text{fill:#333;}#mermaid-svg-RGXLF8VubkHq6xBC .cluster span{color:#333;}#mermaid-svg-RGXLF8VubkHq6xBC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-RGXLF8VubkHq6xBC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

文本

A

B

mermaid 语法如下：

flowchart BT
    A-->|文本|B
    A-- 文本 -->B
  • 虚线和带文本的虚线。
  1. 水平方向。

#mermaid-svg-ifwLmekEWsX9qb8N {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ifwLmekEWsX9qb8N .error-icon{fill:#552222;}#mermaid-svg-ifwLmekEWsX9qb8N .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ifwLmekEWsX9qb8N .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ifwLmekEWsX9qb8N .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ifwLmekEWsX9qb8N .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ifwLmekEWsX9qb8N .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ifwLmekEWsX9qb8N .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ifwLmekEWsX9qb8N .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ifwLmekEWsX9qb8N .marker.cross{stroke:#333333;}#mermaid-svg-ifwLmekEWsX9qb8N svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ifwLmekEWsX9qb8N .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ifwLmekEWsX9qb8N .cluster-label text{fill:#333;}#mermaid-svg-ifwLmekEWsX9qb8N .cluster-label span{color:#333;}#mermaid-svg-ifwLmekEWsX9qb8N .label text,#mermaid-svg-ifwLmekEWsX9qb8N span{fill:#333;color:#333;}#mermaid-svg-ifwLmekEWsX9qb8N .node rect,#mermaid-svg-ifwLmekEWsX9qb8N .node circle,#mermaid-svg-ifwLmekEWsX9qb8N .node ellipse,#mermaid-svg-ifwLmekEWsX9qb8N .node polygon,#mermaid-svg-ifwLmekEWsX9qb8N .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ifwLmekEWsX9qb8N .node .label{text-align:center;}#mermaid-svg-ifwLmekEWsX9qb8N .node.clickable{cursor:pointer;}#mermaid-svg-ifwLmekEWsX9qb8N .arrowheadPath{fill:#333333;}#mermaid-svg-ifwLmekEWsX9qb8N .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ifwLmekEWsX9qb8N .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ifwLmekEWsX9qb8N .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ifwLmekEWsX9qb8N .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ifwLmekEWsX9qb8N .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ifwLmekEWsX9qb8N .cluster text{fill:#333;}#mermaid-svg-ifwLmekEWsX9qb8N .cluster span{color:#333;}#mermaid-svg-ifwLmekEWsX9qb8N div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ifwLmekEWsX9qb8N :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

A

B

mermaid 语法如下：

flowchart LR
   A-.->B
   B-. 文本 .-> A
  1. 竖直方向。

#mermaid-svg-pXhDDPf7OQDTcxkY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY .error-icon{fill:#552222;}#mermaid-svg-pXhDDPf7OQDTcxkY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pXhDDPf7OQDTcxkY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pXhDDPf7OQDTcxkY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pXhDDPf7OQDTcxkY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pXhDDPf7OQDTcxkY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pXhDDPf7OQDTcxkY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pXhDDPf7OQDTcxkY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pXhDDPf7OQDTcxkY .marker.cross{stroke:#333333;}#mermaid-svg-pXhDDPf7OQDTcxkY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pXhDDPf7OQDTcxkY .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY .cluster-label text{fill:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY .cluster-label span{color:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY .label text,#mermaid-svg-pXhDDPf7OQDTcxkY span{fill:#333;color:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY .node rect,#mermaid-svg-pXhDDPf7OQDTcxkY .node circle,#mermaid-svg-pXhDDPf7OQDTcxkY .node ellipse,#mermaid-svg-pXhDDPf7OQDTcxkY .node polygon,#mermaid-svg-pXhDDPf7OQDTcxkY .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pXhDDPf7OQDTcxkY .node .label{text-align:center;}#mermaid-svg-pXhDDPf7OQDTcxkY .node.clickable{cursor:pointer;}#mermaid-svg-pXhDDPf7OQDTcxkY .arrowheadPath{fill:#333333;}#mermaid-svg-pXhDDPf7OQDTcxkY .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-pXhDDPf7OQDTcxkY .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-pXhDDPf7OQDTcxkY .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-pXhDDPf7OQDTcxkY .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-pXhDDPf7OQDTcxkY .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-pXhDDPf7OQDTcxkY .cluster text{fill:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY .cluster span{color:#333;}#mermaid-svg-pXhDDPf7OQDTcxkY div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-pXhDDPf7OQDTcxkY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

A

B

mermaid 语法如下：

flowchart TB
   A-.->B
   B-. 文本 .-> A
  • 加粗线。
  1. 水平方向。

#mermaid-svg-Izf0eozb7PN0feJ6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 .error-icon{fill:#552222;}#mermaid-svg-Izf0eozb7PN0feJ6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Izf0eozb7PN0feJ6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Izf0eozb7PN0feJ6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Izf0eozb7PN0feJ6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Izf0eozb7PN0feJ6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Izf0eozb7PN0feJ6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Izf0eozb7PN0feJ6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Izf0eozb7PN0feJ6 .marker.cross{stroke:#333333;}#mermaid-svg-Izf0eozb7PN0feJ6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Izf0eozb7PN0feJ6 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 .cluster-label text{fill:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 .cluster-label span{color:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 .label text,#mermaid-svg-Izf0eozb7PN0feJ6 span{fill:#333;color:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 .node rect,#mermaid-svg-Izf0eozb7PN0feJ6 .node circle,#mermaid-svg-Izf0eozb7PN0feJ6 .node ellipse,#mermaid-svg-Izf0eozb7PN0feJ6 .node polygon,#mermaid-svg-Izf0eozb7PN0feJ6 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Izf0eozb7PN0feJ6 .node .label{text-align:center;}#mermaid-svg-Izf0eozb7PN0feJ6 .node.clickable{cursor:pointer;}#mermaid-svg-Izf0eozb7PN0feJ6 .arrowheadPath{fill:#333333;}#mermaid-svg-Izf0eozb7PN0feJ6 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Izf0eozb7PN0feJ6 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Izf0eozb7PN0feJ6 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Izf0eozb7PN0feJ6 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Izf0eozb7PN0feJ6 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Izf0eozb7PN0feJ6 .cluster text{fill:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 .cluster span{color:#333;}#mermaid-svg-Izf0eozb7PN0feJ6 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Izf0eozb7PN0feJ6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

A

B

mermaid 语法如下：

flowchart LR
   A ==> B
   B == 文本 ==> A
  1. 竖直方向。

#mermaid-svg-cXmNynhhfC2aTF29 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cXmNynhhfC2aTF29 .error-icon{fill:#552222;}#mermaid-svg-cXmNynhhfC2aTF29 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-cXmNynhhfC2aTF29 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-cXmNynhhfC2aTF29 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-cXmNynhhfC2aTF29 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-cXmNynhhfC2aTF29 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-cXmNynhhfC2aTF29 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-cXmNynhhfC2aTF29 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-cXmNynhhfC2aTF29 .marker.cross{stroke:#333333;}#mermaid-svg-cXmNynhhfC2aTF29 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-cXmNynhhfC2aTF29 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-cXmNynhhfC2aTF29 .cluster-label text{fill:#333;}#mermaid-svg-cXmNynhhfC2aTF29 .cluster-label span{color:#333;}#mermaid-svg-cXmNynhhfC2aTF29 .label text,#mermaid-svg-cXmNynhhfC2aTF29 span{fill:#333;color:#333;}#mermaid-svg-cXmNynhhfC2aTF29 .node rect,#mermaid-svg-cXmNynhhfC2aTF29 .node circle,#mermaid-svg-cXmNynhhfC2aTF29 .node ellipse,#mermaid-svg-cXmNynhhfC2aTF29 .node polygon,#mermaid-svg-cXmNynhhfC2aTF29 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-cXmNynhhfC2aTF29 .node .label{text-align:center;}#mermaid-svg-cXmNynhhfC2aTF29 .node.clickable{cursor:pointer;}#mermaid-svg-cXmNynhhfC2aTF29 .arrowheadPath{fill:#333333;}#mermaid-svg-cXmNynhhfC2aTF29 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-cXmNynhhfC2aTF29 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-cXmNynhhfC2aTF29 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-cXmNynhhfC2aTF29 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-cXmNynhhfC2aTF29 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-cXmNynhhfC2aTF29 .cluster text{fill:#333;}#mermaid-svg-cXmNynhhfC2aTF29 .cluster span{color:#333;}#mermaid-svg-cXmNynhhfC2aTF29 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-cXmNynhhfC2aTF29 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

A

B

mermaid 语法如下：

flowchart TB
   A ==> B
   B == 文本 ==> A
  • 自定义的箭头类型。

#mermaid-svg-pB1YK6Uxqo3r1On9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .error-icon{fill:#552222;}#mermaid-svg-pB1YK6Uxqo3r1On9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pB1YK6Uxqo3r1On9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .marker.cross{stroke:#333333;}#mermaid-svg-pB1YK6Uxqo3r1On9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pB1YK6Uxqo3r1On9 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .cluster-label text{fill:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .cluster-label span{color:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .label text,#mermaid-svg-pB1YK6Uxqo3r1On9 span{fill:#333;color:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .node rect,#mermaid-svg-pB1YK6Uxqo3r1On9 .node circle,#mermaid-svg-pB1YK6Uxqo3r1On9 .node ellipse,#mermaid-svg-pB1YK6Uxqo3r1On9 .node polygon,#mermaid-svg-pB1YK6Uxqo3r1On9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pB1YK6Uxqo3r1On9 .node .label{text-align:center;}#mermaid-svg-pB1YK6Uxqo3r1On9 .node.clickable{cursor:pointer;}#mermaid-svg-pB1YK6Uxqo3r1On9 .arrowheadPath{fill:#333333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-pB1YK6Uxqo3r1On9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-pB1YK6Uxqo3r1On9 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-pB1YK6Uxqo3r1On9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-pB1YK6Uxqo3r1On9 .cluster text{fill:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 .cluster span{color:#333;}#mermaid-svg-pB1YK6Uxqo3r1On9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-pB1YK6Uxqo3r1On9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

C

mermaid 语法如下：

flowchart LR
    A --o B
    B --x C
  • 双方向的箭头。

#mermaid-svg-miigDHrr56MqJheJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-miigDHrr56MqJheJ .error-icon{fill:#552222;}#mermaid-svg-miigDHrr56MqJheJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-miigDHrr56MqJheJ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-miigDHrr56MqJheJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-miigDHrr56MqJheJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-miigDHrr56MqJheJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-miigDHrr56MqJheJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-miigDHrr56MqJheJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-miigDHrr56MqJheJ .marker.cross{stroke:#333333;}#mermaid-svg-miigDHrr56MqJheJ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-miigDHrr56MqJheJ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-miigDHrr56MqJheJ .cluster-label text{fill:#333;}#mermaid-svg-miigDHrr56MqJheJ .cluster-label span{color:#333;}#mermaid-svg-miigDHrr56MqJheJ .label text,#mermaid-svg-miigDHrr56MqJheJ span{fill:#333;color:#333;}#mermaid-svg-miigDHrr56MqJheJ .node rect,#mermaid-svg-miigDHrr56MqJheJ .node circle,#mermaid-svg-miigDHrr56MqJheJ .node ellipse,#mermaid-svg-miigDHrr56MqJheJ .node polygon,#mermaid-svg-miigDHrr56MqJheJ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-miigDHrr56MqJheJ .node .label{text-align:center;}#mermaid-svg-miigDHrr56MqJheJ .node.clickable{cursor:pointer;}#mermaid-svg-miigDHrr56MqJheJ .arrowheadPath{fill:#333333;}#mermaid-svg-miigDHrr56MqJheJ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-miigDHrr56MqJheJ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-miigDHrr56MqJheJ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-miigDHrr56MqJheJ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-miigDHrr56MqJheJ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-miigDHrr56MqJheJ .cluster text{fill:#333;}#mermaid-svg-miigDHrr56MqJheJ .cluster span{color:#333;}#mermaid-svg-miigDHrr56MqJheJ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-miigDHrr56MqJheJ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

C

D

mermaid 语法如下：

flowchart LR
    A o--o B
    B <--> C
    C x--x D

节点间的连接线长度方向及类型汇总表如下：

类型长度 1长度 2长度 3实线

--

---

----

带箭头的实线

-->

<---

---->

加粗线

===

====

=====

带箭头的加粗线

==>

<===

<====>

虚线

-.-

-..-

-...-

带箭头的虚线

-.->

<-..-

<-...->
  • 连接链。

一行中（多个节点）可以声明多条线。

#mermaid-svg-TtH3SeGdxA73cwqO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TtH3SeGdxA73cwqO .error-icon{fill:#552222;}#mermaid-svg-TtH3SeGdxA73cwqO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TtH3SeGdxA73cwqO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TtH3SeGdxA73cwqO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TtH3SeGdxA73cwqO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TtH3SeGdxA73cwqO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TtH3SeGdxA73cwqO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TtH3SeGdxA73cwqO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TtH3SeGdxA73cwqO .marker.cross{stroke:#333333;}#mermaid-svg-TtH3SeGdxA73cwqO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TtH3SeGdxA73cwqO .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-TtH3SeGdxA73cwqO .cluster-label text{fill:#333;}#mermaid-svg-TtH3SeGdxA73cwqO .cluster-label span{color:#333;}#mermaid-svg-TtH3SeGdxA73cwqO .label text,#mermaid-svg-TtH3SeGdxA73cwqO span{fill:#333;color:#333;}#mermaid-svg-TtH3SeGdxA73cwqO .node rect,#mermaid-svg-TtH3SeGdxA73cwqO .node circle,#mermaid-svg-TtH3SeGdxA73cwqO .node ellipse,#mermaid-svg-TtH3SeGdxA73cwqO .node polygon,#mermaid-svg-TtH3SeGdxA73cwqO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TtH3SeGdxA73cwqO .node .label{text-align:center;}#mermaid-svg-TtH3SeGdxA73cwqO .node.clickable{cursor:pointer;}#mermaid-svg-TtH3SeGdxA73cwqO .arrowheadPath{fill:#333333;}#mermaid-svg-TtH3SeGdxA73cwqO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-TtH3SeGdxA73cwqO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-TtH3SeGdxA73cwqO .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-TtH3SeGdxA73cwqO .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-TtH3SeGdxA73cwqO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-TtH3SeGdxA73cwqO .cluster text{fill:#333;}#mermaid-svg-TtH3SeGdxA73cwqO .cluster span{color:#333;}#mermaid-svg-TtH3SeGdxA73cwqO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-TtH3SeGdxA73cwqO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
文本

文本

A

B

C

mermaid 语法如下：

flowchart LR
   A -- 文本 --> B -- 文本 --> C

可以在同一行中声明多个节点链路。

#mermaid-svg-1V3LMaNRdPpErabZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1V3LMaNRdPpErabZ .error-icon{fill:#552222;}#mermaid-svg-1V3LMaNRdPpErabZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1V3LMaNRdPpErabZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-1V3LMaNRdPpErabZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1V3LMaNRdPpErabZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1V3LMaNRdPpErabZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1V3LMaNRdPpErabZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1V3LMaNRdPpErabZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1V3LMaNRdPpErabZ .marker.cross{stroke:#333333;}#mermaid-svg-1V3LMaNRdPpErabZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1V3LMaNRdPpErabZ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-1V3LMaNRdPpErabZ .cluster-label text{fill:#333;}#mermaid-svg-1V3LMaNRdPpErabZ .cluster-label span{color:#333;}#mermaid-svg-1V3LMaNRdPpErabZ .label text,#mermaid-svg-1V3LMaNRdPpErabZ span{fill:#333;color:#333;}#mermaid-svg-1V3LMaNRdPpErabZ .node rect,#mermaid-svg-1V3LMaNRdPpErabZ .node circle,#mermaid-svg-1V3LMaNRdPpErabZ .node ellipse,#mermaid-svg-1V3LMaNRdPpErabZ .node polygon,#mermaid-svg-1V3LMaNRdPpErabZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-1V3LMaNRdPpErabZ .node .label{text-align:center;}#mermaid-svg-1V3LMaNRdPpErabZ .node.clickable{cursor:pointer;}#mermaid-svg-1V3LMaNRdPpErabZ .arrowheadPath{fill:#333333;}#mermaid-svg-1V3LMaNRdPpErabZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-1V3LMaNRdPpErabZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-1V3LMaNRdPpErabZ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-1V3LMaNRdPpErabZ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-1V3LMaNRdPpErabZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-1V3LMaNRdPpErabZ .cluster text{fill:#333;}#mermaid-svg-1V3LMaNRdPpErabZ .cluster span{color:#333;}#mermaid-svg-1V3LMaNRdPpErabZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-1V3LMaNRdPpErabZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

C

D

mermaid 语法如下：

flowchart LR
   A --> B & C--> D

可以在一行中描述一个依赖关系。

#mermaid-svg-q1oguwXQi728K4kU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-q1oguwXQi728K4kU .error-icon{fill:#552222;}#mermaid-svg-q1oguwXQi728K4kU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-q1oguwXQi728K4kU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-q1oguwXQi728K4kU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-q1oguwXQi728K4kU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-q1oguwXQi728K4kU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-q1oguwXQi728K4kU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-q1oguwXQi728K4kU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-q1oguwXQi728K4kU .marker.cross{stroke:#333333;}#mermaid-svg-q1oguwXQi728K4kU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-q1oguwXQi728K4kU .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-q1oguwXQi728K4kU .cluster-label text{fill:#333;}#mermaid-svg-q1oguwXQi728K4kU .cluster-label span{color:#333;}#mermaid-svg-q1oguwXQi728K4kU .label text,#mermaid-svg-q1oguwXQi728K4kU span{fill:#333;color:#333;}#mermaid-svg-q1oguwXQi728K4kU .node rect,#mermaid-svg-q1oguwXQi728K4kU .node circle,#mermaid-svg-q1oguwXQi728K4kU .node ellipse,#mermaid-svg-q1oguwXQi728K4kU .node polygon,#mermaid-svg-q1oguwXQi728K4kU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-q1oguwXQi728K4kU .node .label{text-align:center;}#mermaid-svg-q1oguwXQi728K4kU .node.clickable{cursor:pointer;}#mermaid-svg-q1oguwXQi728K4kU .arrowheadPath{fill:#333333;}#mermaid-svg-q1oguwXQi728K4kU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-q1oguwXQi728K4kU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-q1oguwXQi728K4kU .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-q1oguwXQi728K4kU .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-q1oguwXQi728K4kU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-q1oguwXQi728K4kU .cluster text{fill:#333;}#mermaid-svg-q1oguwXQi728K4kU .cluster span{color:#333;}#mermaid-svg-q1oguwXQi728K4kU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-q1oguwXQi728K4kU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

B

C

D

mermaid 语法如下：

flowchart TB
    A & B--> C & D

上图关系如果使用基本语法描述同一个图，则需要四行进行描述。

#mermaid-svg-rwyqEuqrLBKRGOgU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU .error-icon{fill:#552222;}#mermaid-svg-rwyqEuqrLBKRGOgU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rwyqEuqrLBKRGOgU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-rwyqEuqrLBKRGOgU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rwyqEuqrLBKRGOgU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rwyqEuqrLBKRGOgU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rwyqEuqrLBKRGOgU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rwyqEuqrLBKRGOgU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rwyqEuqrLBKRGOgU .marker.cross{stroke:#333333;}#mermaid-svg-rwyqEuqrLBKRGOgU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rwyqEuqrLBKRGOgU .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU .cluster-label text{fill:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU .cluster-label span{color:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU .label text,#mermaid-svg-rwyqEuqrLBKRGOgU span{fill:#333;color:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU .node rect,#mermaid-svg-rwyqEuqrLBKRGOgU .node circle,#mermaid-svg-rwyqEuqrLBKRGOgU .node ellipse,#mermaid-svg-rwyqEuqrLBKRGOgU .node polygon,#mermaid-svg-rwyqEuqrLBKRGOgU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rwyqEuqrLBKRGOgU .node .label{text-align:center;}#mermaid-svg-rwyqEuqrLBKRGOgU .node.clickable{cursor:pointer;}#mermaid-svg-rwyqEuqrLBKRGOgU .arrowheadPath{fill:#333333;}#mermaid-svg-rwyqEuqrLBKRGOgU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-rwyqEuqrLBKRGOgU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-rwyqEuqrLBKRGOgU .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-rwyqEuqrLBKRGOgU .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-rwyqEuqrLBKRGOgU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-rwyqEuqrLBKRGOgU .cluster text{fill:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU .cluster span{color:#333;}#mermaid-svg-rwyqEuqrLBKRGOgU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-rwyqEuqrLBKRGOgU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A

C

D

B

mermaid 语法如下：

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
  • 链路的最小长度。

流程图中默认情况下，连接可以跨越任意数量的列组，但可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接长，在下面的示例中，在来自节点的链接中添加了两个额外的破折号。

#mermaid-svg-wUPXZigC6ILvF8hc {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-wUPXZigC6ILvF8hc .error-icon{fill:#552222;}#mermaid-svg-wUPXZigC6ILvF8hc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wUPXZigC6ILvF8hc .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-wUPXZigC6ILvF8hc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wUPXZigC6ILvF8hc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wUPXZigC6ILvF8hc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wUPXZigC6ILvF8hc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wUPXZigC6ILvF8hc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wUPXZigC6ILvF8hc .marker.cross{stroke:#333333;}#mermaid-svg-wUPXZigC6ILvF8hc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wUPXZigC6ILvF8hc .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-wUPXZigC6ILvF8hc .cluster-label text{fill:#333;}#mermaid-svg-wUPXZigC6ILvF8hc .cluster-label span{color:#333;}#mermaid-svg-wUPXZigC6ILvF8hc .label text,#mermaid-svg-wUPXZigC6ILvF8hc span{fill:#333;color:#333;}#mermaid-svg-wUPXZigC6ILvF8hc .node rect,#mermaid-svg-wUPXZigC6ILvF8hc .node circle,#mermaid-svg-wUPXZigC6ILvF8hc .node ellipse,#mermaid-svg-wUPXZigC6ILvF8hc .node polygon,#mermaid-svg-wUPXZigC6ILvF8hc .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wUPXZigC6ILvF8hc .node .label{text-align:center;}#mermaid-svg-wUPXZigC6ILvF8hc .node.clickable{cursor:pointer;}#mermaid-svg-wUPXZigC6ILvF8hc .arrowheadPath{fill:#333333;}#mermaid-svg-wUPXZigC6ILvF8hc .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-wUPXZigC6ILvF8hc .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-wUPXZigC6ILvF8hc .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-wUPXZigC6ILvF8hc .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-wUPXZigC6ILvF8hc .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-wUPXZigC6ILvF8hc .cluster text{fill:#333;}#mermaid-svg-wUPXZigC6ILvF8hc .cluster span{color:#333;}#mermaid-svg-wUPXZigC6ILvF8hc div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-wUPXZigC6ILvF8hc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
Yes

No

Start

Is it?

OK

Rethink

End

mermaid 语法如下：

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

当链接标签写在链接的中间时，必须在链接的右侧添加额外的破折号，以下示例与前面的示例等效。

#mermaid-svg-LlDOTGmuRDhGtT2m {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m .error-icon{fill:#552222;}#mermaid-svg-LlDOTGmuRDhGtT2m .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LlDOTGmuRDhGtT2m .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-LlDOTGmuRDhGtT2m .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LlDOTGmuRDhGtT2m .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LlDOTGmuRDhGtT2m .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LlDOTGmuRDhGtT2m .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LlDOTGmuRDhGtT2m .marker{fill:#333333;stroke:#333333;}#mermaid-svg-LlDOTGmuRDhGtT2m .marker.cross{stroke:#333333;}#mermaid-svg-LlDOTGmuRDhGtT2m svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LlDOTGmuRDhGtT2m .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m .cluster-label text{fill:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m .cluster-label span{color:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m .label text,#mermaid-svg-LlDOTGmuRDhGtT2m span{fill:#333;color:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m .node rect,#mermaid-svg-LlDOTGmuRDhGtT2m .node circle,#mermaid-svg-LlDOTGmuRDhGtT2m .node ellipse,#mermaid-svg-LlDOTGmuRDhGtT2m .node polygon,#mermaid-svg-LlDOTGmuRDhGtT2m .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LlDOTGmuRDhGtT2m .node .label{text-align:center;}#mermaid-svg-LlDOTGmuRDhGtT2m .node.clickable{cursor:pointer;}#mermaid-svg-LlDOTGmuRDhGtT2m .arrowheadPath{fill:#333333;}#mermaid-svg-LlDOTGmuRDhGtT2m .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-LlDOTGmuRDhGtT2m .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-LlDOTGmuRDhGtT2m .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-LlDOTGmuRDhGtT2m .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-LlDOTGmuRDhGtT2m .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-LlDOTGmuRDhGtT2m .cluster text{fill:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m .cluster span{color:#333;}#mermaid-svg-LlDOTGmuRDhGtT2m div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-LlDOTGmuRDhGtT2m :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
Yes

No

Start

Is it?

OK

Rethink

End

mermaid 语法如下：

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
  • 破坏语法的特殊字符。

为了呈现更麻烦的字符，可以将文本放在引号中。

#mermaid-svg-4SWtOE3c2567NJTO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-4SWtOE3c2567NJTO .error-icon{fill:#552222;}#mermaid-svg-4SWtOE3c2567NJTO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4SWtOE3c2567NJTO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-4SWtOE3c2567NJTO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4SWtOE3c2567NJTO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4SWtOE3c2567NJTO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4SWtOE3c2567NJTO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4SWtOE3c2567NJTO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4SWtOE3c2567NJTO .marker.cross{stroke:#333333;}#mermaid-svg-4SWtOE3c2567NJTO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4SWtOE3c2567NJTO .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-4SWtOE3c2567NJTO .cluster-label text{fill:#333;}#mermaid-svg-4SWtOE3c2567NJTO .cluster-label span{color:#333;}#mermaid-svg-4SWtOE3c2567NJTO .label text,#mermaid-svg-4SWtOE3c2567NJTO span{fill:#333;color:#333;}#mermaid-svg-4SWtOE3c2567NJTO .node rect,#mermaid-svg-4SWtOE3c2567NJTO .node circle,#mermaid-svg-4SWtOE3c2567NJTO .node ellipse,#mermaid-svg-4SWtOE3c2567NJTO .node polygon,#mermaid-svg-4SWtOE3c2567NJTO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4SWtOE3c2567NJTO .node .label{text-align:center;}#mermaid-svg-4SWtOE3c2567NJTO .node.clickable{cursor:pointer;}#mermaid-svg-4SWtOE3c2567NJTO .arrowheadPath{fill:#333333;}#mermaid-svg-4SWtOE3c2567NJTO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-4SWtOE3c2567NJTO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-4SWtOE3c2567NJTO .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-4SWtOE3c2567NJTO .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-4SWtOE3c2567NJTO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-4SWtOE3c2567NJTO .cluster text{fill:#333;}#mermaid-svg-4SWtOE3c2567NJTO .cluster span{color:#333;}#mermaid-svg-4SWtOE3c2567NJTO div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-4SWtOE3c2567NJTO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
重庆(邮电)大学

mermaid 语法如下：

flowchart LR
    node["重庆(邮电)大学 "]
  • 转义字符的实体代码。

可以使用此处示例的语法转义字符。

#mermaid-svg-DRK5T8iMlfUDpxWD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD .error-icon{fill:#552222;}#mermaid-svg-DRK5T8iMlfUDpxWD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-DRK5T8iMlfUDpxWD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-DRK5T8iMlfUDpxWD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-DRK5T8iMlfUDpxWD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-DRK5T8iMlfUDpxWD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-DRK5T8iMlfUDpxWD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-DRK5T8iMlfUDpxWD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-DRK5T8iMlfUDpxWD .marker.cross{stroke:#333333;}#mermaid-svg-DRK5T8iMlfUDpxWD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-DRK5T8iMlfUDpxWD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD .cluster-label text{fill:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD .cluster-label span{color:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD .label text,#mermaid-svg-DRK5T8iMlfUDpxWD span{fill:#333;color:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD .node rect,#mermaid-svg-DRK5T8iMlfUDpxWD .node circle,#mermaid-svg-DRK5T8iMlfUDpxWD .node ellipse,#mermaid-svg-DRK5T8iMlfUDpxWD .node polygon,#mermaid-svg-DRK5T8iMlfUDpxWD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-DRK5T8iMlfUDpxWD .node .label{text-align:center;}#mermaid-svg-DRK5T8iMlfUDpxWD .node.clickable{cursor:pointer;}#mermaid-svg-DRK5T8iMlfUDpxWD .arrowheadPath{fill:#333333;}#mermaid-svg-DRK5T8iMlfUDpxWD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-DRK5T8iMlfUDpxWD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-DRK5T8iMlfUDpxWD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-DRK5T8iMlfUDpxWD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-DRK5T8iMlfUDpxWD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-DRK5T8iMlfUDpxWD .cluster text{fill:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD .cluster span{color:#333;}#mermaid-svg-DRK5T8iMlfUDpxWD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-DRK5T8iMlfUDpxWD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A double quote:"

A dec char:♥

mermaid 语法如下：

    flowchart LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]

给出的数字以 10 为基数，所以 # 可编码为#35;，还支持使用HTML 字符名称。

子图

  • mermaid 定义子图使用下面的方式。
subgraph title
    graph definition
end

下面是一个例子。

#mermaid-svg-u6W0o013hxlFGBKC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-u6W0o013hxlFGBKC .error-icon{fill:#552222;}#mermaid-svg-u6W0o013hxlFGBKC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-u6W0o013hxlFGBKC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-u6W0o013hxlFGBKC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-u6W0o013hxlFGBKC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-u6W0o013hxlFGBKC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-u6W0o013hxlFGBKC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-u6W0o013hxlFGBKC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-u6W0o013hxlFGBKC .marker.cross{stroke:#333333;}#mermaid-svg-u6W0o013hxlFGBKC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-u6W0o013hxlFGBKC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-u6W0o013hxlFGBKC .cluster-label text{fill:#333;}#mermaid-svg-u6W0o013hxlFGBKC .cluster-label span{color:#333;}#mermaid-svg-u6W0o013hxlFGBKC .label text,#mermaid-svg-u6W0o013hxlFGBKC span{fill:#333;color:#333;}#mermaid-svg-u6W0o013hxlFGBKC .node rect,#mermaid-svg-u6W0o013hxlFGBKC .node circle,#mermaid-svg-u6W0o013hxlFGBKC .node ellipse,#mermaid-svg-u6W0o013hxlFGBKC .node polygon,#mermaid-svg-u6W0o013hxlFGBKC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-u6W0o013hxlFGBKC .node .label{text-align:center;}#mermaid-svg-u6W0o013hxlFGBKC .node.clickable{cursor:pointer;}#mermaid-svg-u6W0o013hxlFGBKC .arrowheadPath{fill:#333333;}#mermaid-svg-u6W0o013hxlFGBKC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-u6W0o013hxlFGBKC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-u6W0o013hxlFGBKC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-u6W0o013hxlFGBKC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-u6W0o013hxlFGBKC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-u6W0o013hxlFGBKC .cluster text{fill:#333;}#mermaid-svg-u6W0o013hxlFGBKC .cluster span{color:#333;}#mermaid-svg-u6W0o013hxlFGBKC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-u6W0o013hxlFGBKC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
three

one

c2

c1

two

b2

b1

a2

a1

mermaid 语法如下：

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
  • 为子图设置显式 ID 。

子图设置显示 ID 可以使用下面的方式。

#mermaid-svg-IrBXSEmpmK4f0iqy {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy .error-icon{fill:#552222;}#mermaid-svg-IrBXSEmpmK4f0iqy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IrBXSEmpmK4f0iqy .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-IrBXSEmpmK4f0iqy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IrBXSEmpmK4f0iqy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IrBXSEmpmK4f0iqy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IrBXSEmpmK4f0iqy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IrBXSEmpmK4f0iqy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IrBXSEmpmK4f0iqy .marker.cross{stroke:#333333;}#mermaid-svg-IrBXSEmpmK4f0iqy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IrBXSEmpmK4f0iqy .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy .cluster-label text{fill:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy .cluster-label span{color:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy .label text,#mermaid-svg-IrBXSEmpmK4f0iqy span{fill:#333;color:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy .node rect,#mermaid-svg-IrBXSEmpmK4f0iqy .node circle,#mermaid-svg-IrBXSEmpmK4f0iqy .node ellipse,#mermaid-svg-IrBXSEmpmK4f0iqy .node polygon,#mermaid-svg-IrBXSEmpmK4f0iqy .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IrBXSEmpmK4f0iqy .node .label{text-align:center;}#mermaid-svg-IrBXSEmpmK4f0iqy .node.clickable{cursor:pointer;}#mermaid-svg-IrBXSEmpmK4f0iqy .arrowheadPath{fill:#333333;}#mermaid-svg-IrBXSEmpmK4f0iqy .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-IrBXSEmpmK4f0iqy .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-IrBXSEmpmK4f0iqy .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-IrBXSEmpmK4f0iqy .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-IrBXSEmpmK4f0iqy .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-IrBXSEmpmK4f0iqy .cluster text{fill:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy .cluster span{color:#333;}#mermaid-svg-IrBXSEmpmK4f0iqy div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-IrBXSEmpmK4f0iqy :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
xxx

a2

a1

c1

mermaid 语法如下：

flowchart TB
    c1-->a2
    subgraph ide1 [xxx]
    a1-->a2
    end
  • 设置子图的边。

使用图形类型流程图，还可以如下面的流程图中那样设置子图的边和子图的边。

#mermaid-svg-QZR09cvDx4FaktZR {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-QZR09cvDx4FaktZR .error-icon{fill:#552222;}#mermaid-svg-QZR09cvDx4FaktZR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-QZR09cvDx4FaktZR .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-QZR09cvDx4FaktZR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-QZR09cvDx4FaktZR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-QZR09cvDx4FaktZR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-QZR09cvDx4FaktZR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-QZR09cvDx4FaktZR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-QZR09cvDx4FaktZR .marker.cross{stroke:#333333;}#mermaid-svg-QZR09cvDx4FaktZR svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-QZR09cvDx4FaktZR .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-QZR09cvDx4FaktZR .cluster-label text{fill:#333;}#mermaid-svg-QZR09cvDx4FaktZR .cluster-label span{color:#333;}#mermaid-svg-QZR09cvDx4FaktZR .label text,#mermaid-svg-QZR09cvDx4FaktZR span{fill:#333;color:#333;}#mermaid-svg-QZR09cvDx4FaktZR .node rect,#mermaid-svg-QZR09cvDx4FaktZR .node circle,#mermaid-svg-QZR09cvDx4FaktZR .node ellipse,#mermaid-svg-QZR09cvDx4FaktZR .node polygon,#mermaid-svg-QZR09cvDx4FaktZR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-QZR09cvDx4FaktZR .node .label{text-align:center;}#mermaid-svg-QZR09cvDx4FaktZR .node.clickable{cursor:pointer;}#mermaid-svg-QZR09cvDx4FaktZR .arrowheadPath{fill:#333333;}#mermaid-svg-QZR09cvDx4FaktZR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-QZR09cvDx4FaktZR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-QZR09cvDx4FaktZR .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-QZR09cvDx4FaktZR .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-QZR09cvDx4FaktZR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-QZR09cvDx4FaktZR .cluster text{fill:#333;}#mermaid-svg-QZR09cvDx4FaktZR .cluster span{color:#333;}#mermaid-svg-QZR09cvDx4FaktZR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-QZR09cvDx4FaktZR :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
three

one

c2

c1

two

b2

b1

a2

a1

mermaid 语法如下：

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
  • 设置子图方向。

在 graphtype 流程图中，可以使用方向语句（direction RL/LR/TB/BT）来设置子图将呈现的方向。

#mermaid-svg-g4j2Fle2j63UaMIT {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-g4j2Fle2j63UaMIT .error-icon{fill:#552222;}#mermaid-svg-g4j2Fle2j63UaMIT .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-g4j2Fle2j63UaMIT .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-g4j2Fle2j63UaMIT .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-g4j2Fle2j63UaMIT .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-g4j2Fle2j63UaMIT .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-g4j2Fle2j63UaMIT .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-g4j2Fle2j63UaMIT .marker{fill:#333333;stroke:#333333;}#mermaid-svg-g4j2Fle2j63UaMIT .marker.cross{stroke:#333333;}#mermaid-svg-g4j2Fle2j63UaMIT svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-g4j2Fle2j63UaMIT .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-g4j2Fle2j63UaMIT .cluster-label text{fill:#333;}#mermaid-svg-g4j2Fle2j63UaMIT .cluster-label span{color:#333;}#mermaid-svg-g4j2Fle2j63UaMIT .label text,#mermaid-svg-g4j2Fle2j63UaMIT span{fill:#333;color:#333;}#mermaid-svg-g4j2Fle2j63UaMIT .node rect,#mermaid-svg-g4j2Fle2j63UaMIT .node circle,#mermaid-svg-g4j2Fle2j63UaMIT .node ellipse,#mermaid-svg-g4j2Fle2j63UaMIT .node polygon,#mermaid-svg-g4j2Fle2j63UaMIT .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-g4j2Fle2j63UaMIT .node .label{text-align:center;}#mermaid-svg-g4j2Fle2j63UaMIT .node.clickable{cursor:pointer;}#mermaid-svg-g4j2Fle2j63UaMIT .arrowheadPath{fill:#333333;}#mermaid-svg-g4j2Fle2j63UaMIT .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-g4j2Fle2j63UaMIT .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-g4j2Fle2j63UaMIT .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-g4j2Fle2j63UaMIT .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-g4j2Fle2j63UaMIT .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-g4j2Fle2j63UaMIT .cluster text{fill:#333;}#mermaid-svg-g4j2Fle2j63UaMIT .cluster span{color:#333;}#mermaid-svg-g4j2Fle2j63UaMIT div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-g4j2Fle2j63UaMIT :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
TOP

B1

f1

i1

B2

f2

i2

A

B

mermaid 语法如下：

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

样式配置

在流程图中可以通过 style 关键字配置边框样式，包括填充颜色、边线颜色、边线实虚等等。可参考 

CSS

样式表。

#mermaid-svg-2fiPASDxhdguPAEU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-2fiPASDxhdguPAEU .error-icon{fill:#552222;}#mermaid-svg-2fiPASDxhdguPAEU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2fiPASDxhdguPAEU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-2fiPASDxhdguPAEU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2fiPASDxhdguPAEU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2fiPASDxhdguPAEU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2fiPASDxhdguPAEU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2fiPASDxhdguPAEU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2fiPASDxhdguPAEU .marker.cross{stroke:#333333;}#mermaid-svg-2fiPASDxhdguPAEU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2fiPASDxhdguPAEU .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-2fiPASDxhdguPAEU .cluster-label text{fill:#333;}#mermaid-svg-2fiPASDxhdguPAEU .cluster-label span{color:#333;}#mermaid-svg-2fiPASDxhdguPAEU .label text,#mermaid-svg-2fiPASDxhdguPAEU span{fill:#333;color:#333;}#mermaid-svg-2fiPASDxhdguPAEU .node rect,#mermaid-svg-2fiPASDxhdguPAEU .node circle,#mermaid-svg-2fiPASDxhdguPAEU .node ellipse,#mermaid-svg-2fiPASDxhdguPAEU .node polygon,#mermaid-svg-2fiPASDxhdguPAEU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2fiPASDxhdguPAEU .node .label{text-align:center;}#mermaid-svg-2fiPASDxhdguPAEU .node.clickable{cursor:pointer;}#mermaid-svg-2fiPASDxhdguPAEU .arrowheadPath{fill:#333333;}#mermaid-svg-2fiPASDxhdguPAEU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-2fiPASDxhdguPAEU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-2fiPASDxhdguPAEU .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-2fiPASDxhdguPAEU .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-2fiPASDxhdguPAEU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-2fiPASDxhdguPAEU .cluster text{fill:#333;}#mermaid-svg-2fiPASDxhdguPAEU .cluster span{color:#333;}#mermaid-svg-2fiPASDxhdguPAEU div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-2fiPASDxhdguPAEU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始

结束

mermaid 语法如下：

flowchart LR
     node1(开始)-->node2(结束)
     style node1 fill: #f9f, stroke: #333, stroke-width: 4px;
     style node2 fill: #ccf, stroke: #f66, stroke-width: 2px, stroke-dasharray: 5,5;
  • 参考 Mermaid 官网教程
标签： github git bash
本文转载自: https://blog.csdn.net/qq_46457076/article/details/128678682
版权归原作者 물の韜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Mermaid安装及绘制流程图”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

Ubuntu中安装Maven

Microsoft Cognitive Toolkit (CNTK): 开源深度学习框架

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集：制作UI系统的主菜单界面和选择存档界面

glm的开源模型搭建智能运维平台

Linux系统Docker部署开源在线协作笔记Trilium Notes与远程访问详细教程

Kafka 与 RabbitMQ 的联系

【Linux系统编程】第三十七弹---深入理解System V IPC机制：消息队列、信号量与共享内存的实战解析

文章导航