您当前的位置： 首页 >  ar

Kevin-Dev

暂无认证

  • 0浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- 写作工具】Markdown 流程图

Kevin-Dev 发布时间：2020-05-31 23:03:00 ，浏览量：0

在这里插入图片描述

1. 前言

Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。

Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。

本节将重点介绍如何通过 Mermaid 绘制「流程图」。

流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。

环境说明： 考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。

2. 语法详解 2.1 基本的流程图

流程图由几何图形节点及连接线组成。几何图形节点是流程图内的各元素的载体，通常用形状来区分其属性，例如圆形代表开始或结束、菱形代表判断等。连接线用于描述几何图形节点之间的联系，可能是有向线段，也可能是无向线段等。

在 Markdown 中添加 Mermaid 图形，需要声明 Mermaid 类型的代码块，代码如下：

​```mermaid

​```

基本的流程图包含：流程图布局方向、几何图形和连接线三个部分组成。

实例 1：

基本的竖向流程图。

#mermaid-svg-Bj3Pj1DLVZMPJUZ8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .error-icon{fill:#552222;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .marker.cross{stroke:#333333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .cluster-label text{fill:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .cluster-label span{color:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .label text,#mermaid-svg-Bj3Pj1DLVZMPJUZ8 span{fill:#333;color:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node rect,#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node circle,#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node ellipse,#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node polygon,#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node .label{text-align:center;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .node.clickable{cursor:pointer;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .arrowheadPath{fill:#333333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .cluster text{fill:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 .cluster span{color:#333;}#mermaid-svg-Bj3Pj1DLVZMPJUZ8 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-Bj3Pj1DLVZMPJUZ8 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始
结束

实例 2：

基本的横向流程图。

#mermaid-svg-X1nF2ceV2zNkSXpO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO .error-icon{fill:#552222;}#mermaid-svg-X1nF2ceV2zNkSXpO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-X1nF2ceV2zNkSXpO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-X1nF2ceV2zNkSXpO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-X1nF2ceV2zNkSXpO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-X1nF2ceV2zNkSXpO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-X1nF2ceV2zNkSXpO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-X1nF2ceV2zNkSXpO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-X1nF2ceV2zNkSXpO .marker.cross{stroke:#333333;}#mermaid-svg-X1nF2ceV2zNkSXpO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-X1nF2ceV2zNkSXpO .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO .cluster-label text{fill:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO .cluster-label span{color:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO .label text,#mermaid-svg-X1nF2ceV2zNkSXpO span{fill:#333;color:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO .node rect,#mermaid-svg-X1nF2ceV2zNkSXpO .node circle,#mermaid-svg-X1nF2ceV2zNkSXpO .node ellipse,#mermaid-svg-X1nF2ceV2zNkSXpO .node polygon,#mermaid-svg-X1nF2ceV2zNkSXpO .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-X1nF2ceV2zNkSXpO .node .label{text-align:center;}#mermaid-svg-X1nF2ceV2zNkSXpO .node.clickable{cursor:pointer;}#mermaid-svg-X1nF2ceV2zNkSXpO .arrowheadPath{fill:#333333;}#mermaid-svg-X1nF2ceV2zNkSXpO .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-X1nF2ceV2zNkSXpO .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-X1nF2ceV2zNkSXpO .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-X1nF2ceV2zNkSXpO .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-X1nF2ceV2zNkSXpO .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-X1nF2ceV2zNkSXpO .cluster text{fill:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO .cluster span{color:#333;}#mermaid-svg-X1nF2ceV2zNkSXpO 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-X1nF2ceV2zNkSXpO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
开始
结束
2.2 几何图形节点

2.2.1 默认的节点 几何图形节点是流程图中的核心元素，其要素包括形状和内容。

在 Mermaid 语法中，不加任何修饰的文字内容会被渲染成几何图形节点。

实例 3：

默认的几何图形。

#mermaid-svg-JAbEJH02KrHSYRIx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JAbEJH02KrHSYRIx .error-icon{fill:#552222;}#mermaid-svg-JAbEJH02KrHSYRIx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JAbEJH02KrHSYRIx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JAbEJH02KrHSYRIx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JAbEJH02KrHSYRIx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JAbEJH02KrHSYRIx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JAbEJH02KrHSYRIx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JAbEJH02KrHSYRIx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JAbEJH02KrHSYRIx .marker.cross{stroke:#333333;}#mermaid-svg-JAbEJH02KrHSYRIx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JAbEJH02KrHSYRIx .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-JAbEJH02KrHSYRIx .cluster-label text{fill:#333;}#mermaid-svg-JAbEJH02KrHSYRIx .cluster-label span{color:#333;}#mermaid-svg-JAbEJH02KrHSYRIx .label text,#mermaid-svg-JAbEJH02KrHSYRIx span{fill:#333;color:#333;}#mermaid-svg-JAbEJH02KrHSYRIx .node rect,#mermaid-svg-JAbEJH02KrHSYRIx .node circle,#mermaid-svg-JAbEJH02KrHSYRIx .node ellipse,#mermaid-svg-JAbEJH02KrHSYRIx .node polygon,#mermaid-svg-JAbEJH02KrHSYRIx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JAbEJH02KrHSYRIx .node .label{text-align:center;}#mermaid-svg-JAbEJH02KrHSYRIx .node.clickable{cursor:pointer;}#mermaid-svg-JAbEJH02KrHSYRIx .arrowheadPath{fill:#333333;}#mermaid-svg-JAbEJH02KrHSYRIx .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-JAbEJH02KrHSYRIx .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-JAbEJH02KrHSYRIx .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-JAbEJH02KrHSYRIx .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-JAbEJH02KrHSYRIx .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-JAbEJH02KrHSYRIx .cluster text{fill:#333;}#mermaid-svg-JAbEJH02KrHSYRIx .cluster span{color:#333;}#mermaid-svg-JAbEJH02KrHSYRIx 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-JAbEJH02KrHSYRIx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
几何图形中的文本内容

2.2.2 分离节点的 ID 与内容 在相对复杂的场景中，同一图形可能被多次引用，如果图形中的文本较长，或者文本内容不足以体现图形的唯一性，可将图形节点的 ID 与其文本内容分开定义，以使结构更加清晰。

实例 4：

将节点的 ID 和显示文本区分开。

#mermaid-svg-VRPy8w1i3ZwEVIF2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .error-icon{fill:#552222;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .marker.cross{stroke:#333333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .cluster-label text{fill:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .cluster-label span{color:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .label text,#mermaid-svg-VRPy8w1i3ZwEVIF2 span{fill:#333;color:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .node rect,#mermaid-svg-VRPy8w1i3ZwEVIF2 .node circle,#mermaid-svg-VRPy8w1i3ZwEVIF2 .node ellipse,#mermaid-svg-VRPy8w1i3ZwEVIF2 .node polygon,#mermaid-svg-VRPy8w1i3ZwEVIF2 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .node .label{text-align:center;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .node.clickable{cursor:pointer;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .arrowheadPath{fill:#333333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .cluster text{fill:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 .cluster span{color:#333;}#mermaid-svg-VRPy8w1i3ZwEVIF2 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-VRPy8w1i3ZwEVIF2 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
在此输入希望在一号节点上显示的文字内容

2.2.3 节点的形状 形状可用于区分节点的不同属性，有利于丰富流程图的信息量，同时保持其简洁性。

在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：圆角形、跑道形、气缸形、非对称形状、菱形、六角形、平行四边形、梯形。

实例 5：

  • 圆角形节点的语法。
#mermaid-svg-euW3AOxT6IYRHytS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-euW3AOxT6IYRHytS .error-icon{fill:#552222;}#mermaid-svg-euW3AOxT6IYRHytS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-euW3AOxT6IYRHytS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-euW3AOxT6IYRHytS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-euW3AOxT6IYRHytS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-euW3AOxT6IYRHytS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-euW3AOxT6IYRHytS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-euW3AOxT6IYRHytS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-euW3AOxT6IYRHytS .marker.cross{stroke:#333333;}#mermaid-svg-euW3AOxT6IYRHytS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-euW3AOxT6IYRHytS .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-euW3AOxT6IYRHytS .cluster-label text{fill:#333;}#mermaid-svg-euW3AOxT6IYRHytS .cluster-label span{color:#333;}#mermaid-svg-euW3AOxT6IYRHytS .label text,#mermaid-svg-euW3AOxT6IYRHytS span{fill:#333;color:#333;}#mermaid-svg-euW3AOxT6IYRHytS .node rect,#mermaid-svg-euW3AOxT6IYRHytS .node circle,#mermaid-svg-euW3AOxT6IYRHytS .node ellipse,#mermaid-svg-euW3AOxT6IYRHytS .node polygon,#mermaid-svg-euW3AOxT6IYRHytS .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-euW3AOxT6IYRHytS .node .label{text-align:center;}#mermaid-svg-euW3AOxT6IYRHytS .node.clickable{cursor:pointer;}#mermaid-svg-euW3AOxT6IYRHytS .arrowheadPath{fill:#333333;}#mermaid-svg-euW3AOxT6IYRHytS .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-euW3AOxT6IYRHytS .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-euW3AOxT6IYRHytS .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-euW3AOxT6IYRHytS .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-euW3AOxT6IYRHytS .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-euW3AOxT6IYRHytS .cluster text{fill:#333;}#mermaid-svg-euW3AOxT6IYRHytS .cluster span{color:#333;}#mermaid-svg-euW3AOxT6IYRHytS 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-euW3AOxT6IYRHytS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点显示文本
  • 圆形节点的语法。
#mermaid-svg-b58hc2qQsQM3lrRj {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-b58hc2qQsQM3lrRj .error-icon{fill:#552222;}#mermaid-svg-b58hc2qQsQM3lrRj .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-b58hc2qQsQM3lrRj .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-b58hc2qQsQM3lrRj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-b58hc2qQsQM3lrRj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-b58hc2qQsQM3lrRj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-b58hc2qQsQM3lrRj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-b58hc2qQsQM3lrRj .marker{fill:#333333;stroke:#333333;}#mermaid-svg-b58hc2qQsQM3lrRj .marker.cross{stroke:#333333;}#mermaid-svg-b58hc2qQsQM3lrRj svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-b58hc2qQsQM3lrRj .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-b58hc2qQsQM3lrRj .cluster-label text{fill:#333;}#mermaid-svg-b58hc2qQsQM3lrRj .cluster-label span{color:#333;}#mermaid-svg-b58hc2qQsQM3lrRj .label text,#mermaid-svg-b58hc2qQsQM3lrRj span{fill:#333;color:#333;}#mermaid-svg-b58hc2qQsQM3lrRj .node rect,#mermaid-svg-b58hc2qQsQM3lrRj .node circle,#mermaid-svg-b58hc2qQsQM3lrRj .node ellipse,#mermaid-svg-b58hc2qQsQM3lrRj .node polygon,#mermaid-svg-b58hc2qQsQM3lrRj .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-b58hc2qQsQM3lrRj .node .label{text-align:center;}#mermaid-svg-b58hc2qQsQM3lrRj .node.clickable{cursor:pointer;}#mermaid-svg-b58hc2qQsQM3lrRj .arrowheadPath{fill:#333333;}#mermaid-svg-b58hc2qQsQM3lrRj .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-b58hc2qQsQM3lrRj .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-b58hc2qQsQM3lrRj .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-b58hc2qQsQM3lrRj .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-b58hc2qQsQM3lrRj .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-b58hc2qQsQM3lrRj .cluster text{fill:#333;}#mermaid-svg-b58hc2qQsQM3lrRj .cluster span{color:#333;}#mermaid-svg-b58hc2qQsQM3lrRj 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-b58hc2qQsQM3lrRj :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点显示文本
  • 非对称形节点的语法。
#mermaid-svg-bSkuPujuQo8ekfvK {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bSkuPujuQo8ekfvK .error-icon{fill:#552222;}#mermaid-svg-bSkuPujuQo8ekfvK .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-bSkuPujuQo8ekfvK .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-bSkuPujuQo8ekfvK .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-bSkuPujuQo8ekfvK .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-bSkuPujuQo8ekfvK .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-bSkuPujuQo8ekfvK .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-bSkuPujuQo8ekfvK .marker{fill:#333333;stroke:#333333;}#mermaid-svg-bSkuPujuQo8ekfvK .marker.cross{stroke:#333333;}#mermaid-svg-bSkuPujuQo8ekfvK svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-bSkuPujuQo8ekfvK .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-bSkuPujuQo8ekfvK .cluster-label text{fill:#333;}#mermaid-svg-bSkuPujuQo8ekfvK .cluster-label span{color:#333;}#mermaid-svg-bSkuPujuQo8ekfvK .label text,#mermaid-svg-bSkuPujuQo8ekfvK span{fill:#333;color:#333;}#mermaid-svg-bSkuPujuQo8ekfvK .node rect,#mermaid-svg-bSkuPujuQo8ekfvK .node circle,#mermaid-svg-bSkuPujuQo8ekfvK .node ellipse,#mermaid-svg-bSkuPujuQo8ekfvK .node polygon,#mermaid-svg-bSkuPujuQo8ekfvK .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-bSkuPujuQo8ekfvK .node .label{text-align:center;}#mermaid-svg-bSkuPujuQo8ekfvK .node.clickable{cursor:pointer;}#mermaid-svg-bSkuPujuQo8ekfvK .arrowheadPath{fill:#333333;}#mermaid-svg-bSkuPujuQo8ekfvK .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-bSkuPujuQo8ekfvK .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-bSkuPujuQo8ekfvK .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-bSkuPujuQo8ekfvK .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-bSkuPujuQo8ekfvK .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-bSkuPujuQo8ekfvK .cluster text{fill:#333;}#mermaid-svg-bSkuPujuQo8ekfvK .cluster span{color:#333;}#mermaid-svg-bSkuPujuQo8ekfvK 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-bSkuPujuQo8ekfvK :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点显示文本
  • 菱形节点的语法。
#mermaid-svg-47HWjrCny2aHS9VW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-47HWjrCny2aHS9VW .error-icon{fill:#552222;}#mermaid-svg-47HWjrCny2aHS9VW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-47HWjrCny2aHS9VW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-47HWjrCny2aHS9VW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-47HWjrCny2aHS9VW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-47HWjrCny2aHS9VW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-47HWjrCny2aHS9VW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-47HWjrCny2aHS9VW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-47HWjrCny2aHS9VW .marker.cross{stroke:#333333;}#mermaid-svg-47HWjrCny2aHS9VW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-47HWjrCny2aHS9VW .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-47HWjrCny2aHS9VW .cluster-label text{fill:#333;}#mermaid-svg-47HWjrCny2aHS9VW .cluster-label span{color:#333;}#mermaid-svg-47HWjrCny2aHS9VW .label text,#mermaid-svg-47HWjrCny2aHS9VW span{fill:#333;color:#333;}#mermaid-svg-47HWjrCny2aHS9VW .node rect,#mermaid-svg-47HWjrCny2aHS9VW .node circle,#mermaid-svg-47HWjrCny2aHS9VW .node ellipse,#mermaid-svg-47HWjrCny2aHS9VW .node polygon,#mermaid-svg-47HWjrCny2aHS9VW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-47HWjrCny2aHS9VW .node .label{text-align:center;}#mermaid-svg-47HWjrCny2aHS9VW .node.clickable{cursor:pointer;}#mermaid-svg-47HWjrCny2aHS9VW .arrowheadPath{fill:#333333;}#mermaid-svg-47HWjrCny2aHS9VW .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-47HWjrCny2aHS9VW .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-47HWjrCny2aHS9VW .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-47HWjrCny2aHS9VW .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-47HWjrCny2aHS9VW .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-47HWjrCny2aHS9VW .cluster text{fill:#333;}#mermaid-svg-47HWjrCny2aHS9VW .cluster span{color:#333;}#mermaid-svg-47HWjrCny2aHS9VW 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-47HWjrCny2aHS9VW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点显示文本
  • 六角形节点的语法。
#mermaid-svg-KFuMSL7pV5CurHzg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KFuMSL7pV5CurHzg .error-icon{fill:#552222;}#mermaid-svg-KFuMSL7pV5CurHzg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KFuMSL7pV5CurHzg .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-KFuMSL7pV5CurHzg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KFuMSL7pV5CurHzg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KFuMSL7pV5CurHzg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KFuMSL7pV5CurHzg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KFuMSL7pV5CurHzg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KFuMSL7pV5CurHzg .marker.cross{stroke:#333333;}#mermaid-svg-KFuMSL7pV5CurHzg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KFuMSL7pV5CurHzg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-KFuMSL7pV5CurHzg .cluster-label text{fill:#333;}#mermaid-svg-KFuMSL7pV5CurHzg .cluster-label span{color:#333;}#mermaid-svg-KFuMSL7pV5CurHzg .label text,#mermaid-svg-KFuMSL7pV5CurHzg span{fill:#333;color:#333;}#mermaid-svg-KFuMSL7pV5CurHzg .node rect,#mermaid-svg-KFuMSL7pV5CurHzg .node circle,#mermaid-svg-KFuMSL7pV5CurHzg .node ellipse,#mermaid-svg-KFuMSL7pV5CurHzg .node polygon,#mermaid-svg-KFuMSL7pV5CurHzg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-KFuMSL7pV5CurHzg .node .label{text-align:center;}#mermaid-svg-KFuMSL7pV5CurHzg .node.clickable{cursor:pointer;}#mermaid-svg-KFuMSL7pV5CurHzg .arrowheadPath{fill:#333333;}#mermaid-svg-KFuMSL7pV5CurHzg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-KFuMSL7pV5CurHzg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-KFuMSL7pV5CurHzg .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-KFuMSL7pV5CurHzg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-KFuMSL7pV5CurHzg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-KFuMSL7pV5CurHzg .cluster text{fill:#333;}#mermaid-svg-KFuMSL7pV5CurHzg .cluster span{color:#333;}#mermaid-svg-KFuMSL7pV5CurHzg 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-KFuMSL7pV5CurHzg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
节点显示文本
  • 平行四边形节点的语法。
#mermaid-svg-7ZLkG7OzD14A8cin {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-7ZLkG7OzD14A8cin .error-icon{fill:#552222;}#mermaid-svg-7ZLkG7OzD14A8cin .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7ZLkG7OzD14A8cin .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-7ZLkG7OzD14A8cin .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7ZLkG7OzD14A8cin .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7ZLkG7OzD14A8cin .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7ZLkG7OzD14A8cin .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7ZLkG7OzD14A8cin .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7ZLkG7OzD14A8cin .marker.cross{stroke:#333333;}#mermaid-svg-7ZLkG7OzD14A8cin svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7ZLkG7OzD14A8cin .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-7ZLkG7OzD14A8cin .cluster-label text{fill:#333;}#mermaid-svg-7ZLkG7OzD14A8cin .cluster-label span{color:#333;}#mermaid-svg-7ZLkG7OzD14A8cin .label text,#mermaid-svg-7ZLkG7OzD14A8cin span{fill:#333;color:#333;}#mermaid-svg-7ZLkG7OzD14A8cin .node rect,#mermaid-svg-7ZLkG7OzD14A8cin .node circle,#mermaid-svg-7ZLkG7OzD14A8cin .node ellipse,#mermaid-svg-7ZLkG7OzD14A8cin .node polygon,#mermaid-svg-7ZLkG7OzD14A8cin .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7ZLkG7OzD14A8cin .node .label{text-align:center;}#mermaid-svg-7ZLkG7OzD14A8cin .node.clickable{cursor:pointer;}#mermaid-svg-7ZLkG7OzD14A8cin .arrowheadPath{fill:#333333;}#mermaid-svg-7ZLkG7OzD14A8cin .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-7ZLkG7OzD14A8cin .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-7ZLkG7OzD14A8cin .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-7ZLkG7OzD14A8cin .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-7ZLkG7OzD14A8cin .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-7ZLkG7OzD14A8cin .cluster text{fill:#333;}#mermaid-svg-7ZLkG7OzD14A8cin .cluster span{color:#333;}#mermaid-svg-7ZLkG7OzD14A8cin 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-7ZLkG7OzD14A8cin :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
平行四边形--右倾
平行四边形--左倾
2.3 连接线

2.3.1 基本连接线 在流程图中，不同节点之间需要通过连接线来描述其相关性。

实例 6：

基本的连接线语法。

#mermaid-svg-YpWkr3NMsDsLc3e3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .error-icon{fill:#552222;}#mermaid-svg-YpWkr3NMsDsLc3e3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-YpWkr3NMsDsLc3e3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .marker.cross{stroke:#333333;}#mermaid-svg-YpWkr3NMsDsLc3e3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-YpWkr3NMsDsLc3e3 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .cluster-label text{fill:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .cluster-label span{color:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .label text,#mermaid-svg-YpWkr3NMsDsLc3e3 span{fill:#333;color:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .node rect,#mermaid-svg-YpWkr3NMsDsLc3e3 .node circle,#mermaid-svg-YpWkr3NMsDsLc3e3 .node ellipse,#mermaid-svg-YpWkr3NMsDsLc3e3 .node polygon,#mermaid-svg-YpWkr3NMsDsLc3e3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-YpWkr3NMsDsLc3e3 .node .label{text-align:center;}#mermaid-svg-YpWkr3NMsDsLc3e3 .node.clickable{cursor:pointer;}#mermaid-svg-YpWkr3NMsDsLc3e3 .arrowheadPath{fill:#333333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-YpWkr3NMsDsLc3e3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-YpWkr3NMsDsLc3e3 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-YpWkr3NMsDsLc3e3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-YpWkr3NMsDsLc3e3 .cluster text{fill:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 .cluster span{color:#333;}#mermaid-svg-YpWkr3NMsDsLc3e3 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-YpWkr3NMsDsLc3e3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
A
B

2.3.2 连接线的种类 不同种类的连接线可以表示不同类型的关系，例如，无方向的连接线可用来表示相关性、有方向的连接线可以表示数据流向或者节点间的依赖关系；用实线表示强关联、用虚线表示弱关联等待。

实例 7：

  • 无向线段连接线。
#mermaid-svg-eCROSNSjM5XsJ9CW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW .error-icon{fill:#552222;}#mermaid-svg-eCROSNSjM5XsJ9CW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-eCROSNSjM5XsJ9CW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-eCROSNSjM5XsJ9CW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-eCROSNSjM5XsJ9CW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-eCROSNSjM5XsJ9CW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-eCROSNSjM5XsJ9CW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-eCROSNSjM5XsJ9CW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-eCROSNSjM5XsJ9CW .marker.cross{stroke:#333333;}#mermaid-svg-eCROSNSjM5XsJ9CW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-eCROSNSjM5XsJ9CW .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW .cluster-label text{fill:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW .cluster-label span{color:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW .label text,#mermaid-svg-eCROSNSjM5XsJ9CW span{fill:#333;color:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW .node rect,#mermaid-svg-eCROSNSjM5XsJ9CW .node circle,#mermaid-svg-eCROSNSjM5XsJ9CW .node ellipse,#mermaid-svg-eCROSNSjM5XsJ9CW .node polygon,#mermaid-svg-eCROSNSjM5XsJ9CW .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-eCROSNSjM5XsJ9CW .node .label{text-align:center;}#mermaid-svg-eCROSNSjM5XsJ9CW .node.clickable{cursor:pointer;}#mermaid-svg-eCROSNSjM5XsJ9CW .arrowheadPath{fill:#333333;}#mermaid-svg-eCROSNSjM5XsJ9CW .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-eCROSNSjM5XsJ9CW .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-eCROSNSjM5XsJ9CW .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-eCROSNSjM5XsJ9CW .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-eCROSNSjM5XsJ9CW .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-eCROSNSjM5XsJ9CW .cluster text{fill:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW .cluster span{color:#333;}#mermaid-svg-eCROSNSjM5XsJ9CW 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-eCROSNSjM5XsJ9CW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
带文字连接线
A
B
C
  • 点状连接线。
#mermaid-svg-tf3LtApzTXSUxd9r {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-tf3LtApzTXSUxd9r .error-icon{fill:#552222;}#mermaid-svg-tf3LtApzTXSUxd9r .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-tf3LtApzTXSUxd9r .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-tf3LtApzTXSUxd9r .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-tf3LtApzTXSUxd9r .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-tf3LtApzTXSUxd9r .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-tf3LtApzTXSUxd9r .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-tf3LtApzTXSUxd9r .marker{fill:#333333;stroke:#333333;}#mermaid-svg-tf3LtApzTXSUxd9r .marker.cross{stroke:#333333;}#mermaid-svg-tf3LtApzTXSUxd9r svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-tf3LtApzTXSUxd9r .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-tf3LtApzTXSUxd9r .cluster-label text{fill:#333;}#mermaid-svg-tf3LtApzTXSUxd9r .cluster-label span{color:#333;}#mermaid-svg-tf3LtApzTXSUxd9r .label text,#mermaid-svg-tf3LtApzTXSUxd9r span{fill:#333;color:#333;}#mermaid-svg-tf3LtApzTXSUxd9r .node rect,#mermaid-svg-tf3LtApzTXSUxd9r .node circle,#mermaid-svg-tf3LtApzTXSUxd9r .node ellipse,#mermaid-svg-tf3LtApzTXSUxd9r .node polygon,#mermaid-svg-tf3LtApzTXSUxd9r .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-tf3LtApzTXSUxd9r .node .label{text-align:center;}#mermaid-svg-tf3LtApzTXSUxd9r .node.clickable{cursor:pointer;}#mermaid-svg-tf3LtApzTXSUxd9r .arrowheadPath{fill:#333333;}#mermaid-svg-tf3LtApzTXSUxd9r .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-tf3LtApzTXSUxd9r .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-tf3LtApzTXSUxd9r .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-tf3LtApzTXSUxd9r .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-tf3LtApzTXSUxd9r .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-tf3LtApzTXSUxd9r .cluster text{fill:#333;}#mermaid-svg-tf3LtApzTXSUxd9r .cluster span{color:#333;}#mermaid-svg-tf3LtApzTXSUxd9r 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-tf3LtApzTXSUxd9r :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
带文字连接线
A
B
C
  • 粗实连接线。
#mermaid-svg-9bcQtolJ8vCUpGqn {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn .error-icon{fill:#552222;}#mermaid-svg-9bcQtolJ8vCUpGqn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9bcQtolJ8vCUpGqn .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9bcQtolJ8vCUpGqn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9bcQtolJ8vCUpGqn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9bcQtolJ8vCUpGqn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9bcQtolJ8vCUpGqn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9bcQtolJ8vCUpGqn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9bcQtolJ8vCUpGqn .marker.cross{stroke:#333333;}#mermaid-svg-9bcQtolJ8vCUpGqn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9bcQtolJ8vCUpGqn .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn .cluster-label text{fill:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn .cluster-label span{color:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn .label text,#mermaid-svg-9bcQtolJ8vCUpGqn span{fill:#333;color:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn .node rect,#mermaid-svg-9bcQtolJ8vCUpGqn .node circle,#mermaid-svg-9bcQtolJ8vCUpGqn .node ellipse,#mermaid-svg-9bcQtolJ8vCUpGqn .node polygon,#mermaid-svg-9bcQtolJ8vCUpGqn .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9bcQtolJ8vCUpGqn .node .label{text-align:center;}#mermaid-svg-9bcQtolJ8vCUpGqn .node.clickable{cursor:pointer;}#mermaid-svg-9bcQtolJ8vCUpGqn .arrowheadPath{fill:#333333;}#mermaid-svg-9bcQtolJ8vCUpGqn .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9bcQtolJ8vCUpGqn .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9bcQtolJ8vCUpGqn .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9bcQtolJ8vCUpGqn .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9bcQtolJ8vCUpGqn .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9bcQtolJ8vCUpGqn .cluster text{fill:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn .cluster span{color:#333;}#mermaid-svg-9bcQtolJ8vCUpGqn 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-9bcQtolJ8vCUpGqn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
带文字连接线
A
B
C
2.4 视图分组

对于相对庞大的流程图，可以通过对视图分组，以区分体系内的不同模块，以及不同模块间的关联关系。

实例 8：

视图分组。

#mermaid-svg-2Qy5EIQDgxbhkLdF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .error-icon{fill:#552222;}#mermaid-svg-2Qy5EIQDgxbhkLdF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2Qy5EIQDgxbhkLdF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .marker.cross{stroke:#333333;}#mermaid-svg-2Qy5EIQDgxbhkLdF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2Qy5EIQDgxbhkLdF .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .cluster-label text{fill:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .cluster-label span{color:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .label text,#mermaid-svg-2Qy5EIQDgxbhkLdF span{fill:#333;color:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .node rect,#mermaid-svg-2Qy5EIQDgxbhkLdF .node circle,#mermaid-svg-2Qy5EIQDgxbhkLdF .node ellipse,#mermaid-svg-2Qy5EIQDgxbhkLdF .node polygon,#mermaid-svg-2Qy5EIQDgxbhkLdF .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2Qy5EIQDgxbhkLdF .node .label{text-align:center;}#mermaid-svg-2Qy5EIQDgxbhkLdF .node.clickable{cursor:pointer;}#mermaid-svg-2Qy5EIQDgxbhkLdF .arrowheadPath{fill:#333333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-2Qy5EIQDgxbhkLdF .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-2Qy5EIQDgxbhkLdF .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-2Qy5EIQDgxbhkLdF .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-2Qy5EIQDgxbhkLdF .cluster text{fill:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF .cluster span{color:#333;}#mermaid-svg-2Qy5EIQDgxbhkLdF 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-2Qy5EIQDgxbhkLdF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
第三组
第二组
第一组
c2
c1
b2
b1
a2
a1
3. 使用场景及实例

流程图常用于项目的需求分析和设计阶段，也较常出现于程序使用手册中。

实例 9：

冒泡排序流程图。

#mermaid-svg-ciH8RU0j6VlruWdK {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ciH8RU0j6VlruWdK .error-icon{fill:#552222;}#mermaid-svg-ciH8RU0j6VlruWdK .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ciH8RU0j6VlruWdK .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ciH8RU0j6VlruWdK .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ciH8RU0j6VlruWdK .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ciH8RU0j6VlruWdK .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ciH8RU0j6VlruWdK .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ciH8RU0j6VlruWdK .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ciH8RU0j6VlruWdK .marker.cross{stroke:#333333;}#mermaid-svg-ciH8RU0j6VlruWdK svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ciH8RU0j6VlruWdK .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ciH8RU0j6VlruWdK .cluster-label text{fill:#333;}#mermaid-svg-ciH8RU0j6VlruWdK .cluster-label span{color:#333;}#mermaid-svg-ciH8RU0j6VlruWdK .label text,#mermaid-svg-ciH8RU0j6VlruWdK span{fill:#333;color:#333;}#mermaid-svg-ciH8RU0j6VlruWdK .node rect,#mermaid-svg-ciH8RU0j6VlruWdK .node circle,#mermaid-svg-ciH8RU0j6VlruWdK .node ellipse,#mermaid-svg-ciH8RU0j6VlruWdK .node polygon,#mermaid-svg-ciH8RU0j6VlruWdK .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ciH8RU0j6VlruWdK .node .label{text-align:center;}#mermaid-svg-ciH8RU0j6VlruWdK .node.clickable{cursor:pointer;}#mermaid-svg-ciH8RU0j6VlruWdK .arrowheadPath{fill:#333333;}#mermaid-svg-ciH8RU0j6VlruWdK .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ciH8RU0j6VlruWdK .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ciH8RU0j6VlruWdK .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ciH8RU0j6VlruWdK .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ciH8RU0j6VlruWdK .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ciH8RU0j6VlruWdK .cluster text{fill:#333;}#mermaid-svg-ciH8RU0j6VlruWdK .cluster span{color:#333;}#mermaid-svg-ciH8RU0j6VlruWdK 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-ciH8RU0j6VlruWdK :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
Y
Y
N
N
Y
N
i = 1
j = 0
i ++
a = arr[j], b = arr[j + 1]
交换 a, b
j ++
i < n
j < n - i
a > b
开始
结束
4. 小结
  • Mermaid 为 Markdown 提供了文本转换为图形的扩展功能；
  • Mermaid 方式渲染的流程图包含布局方向、图形节点和连接线三个基本要素；
  • Mermaid 流程图支持多种节点形状、连接线种类，可以使流程图具有丰富的表现力。
关注
打赏
1658837700
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0583s