流程图

Posted on | In

流程图-基本语法

这声明了一个从上到下（TD或TB）定向的图形

graph TD
    Start --> Stop

graph TD
    Start --> Stop

这声明了一个从左到右的图（LR）

graph LR
    Start --> Stop

graph LR
    Start --> Stop
  • 可能的方向是：

  1. TB-顶底

  2. BT-底部顶部

  3. RL-右左

  4. LR-左右

  5. TD-与TB相同

节点和形状

节点（默认）

graph LR
    id

graph LR
    id

请注意，id是框中显示的ID。

带有文本的节点

graph LR
    id1[This is the text in the box]

graph LR
    id1[This is the text in the box]

也可以在不同于ID的框中设置文本。如果多次执行此操作，则这是将要使用的节点的最后一个文本。同样，如果稍后定义节点的边缘，则可以省略文本定义。渲染框时将使用先前定义的那个。

具有圆边的节点

graph LR
    id1(This is the text in the box)

graph LR
    id1(This is the text in the box)

圆形式的节点

graph LR
    id1((This is the text in the circle))

graph LR
    id1((This is the text in the circle))

非对称形状的节点

graph LR
    id1>This is the text in the box]

graph LR
    id1>This is the text in the box]

当前，只有上面的形状是可能的，而不是它的镜子。这可能会随着将来的版本而改变。

一个节点（菱形）

graph LR
    id1{This is the text in the box}

graph LR
    id1{This is the text in the box}

梯形

graph TD
    A[/Christmas\]

graph TD
    A[/Christmas\]

梯形alt

graph TD
    B[\Go shopping/]

graph TD
    B[\Go shopping/]

节点之间的链接

节点可以通过链接/边缘连接。可以具有不同类型的链接，也可以将文本字符串附加到链接。

箭头链接

graph LR
    A-->B

graph LR
    A-->B

一个开放的链接

graph LR
    A --- B

graph LR
    A --- B

链接上的文字

graph LR
    A-- This is the text ---B

graph LR
    A-- This is the text ---B

或者

graph LR
    A---|This is the text|B

带有箭头和文字的链接

graph LR
    A-->|text|B

graph LR
    A-->|text|B

或者

graph LR
    A-- text -->B

虚线链接

graph LR;
   A-.->B;

graph LR;
   A-.->B;

带文字的虚线链接

graph LR
   A-. text .-> B

graph LR
   A-. text .-> B

粗链接

graph LR
   A ==> B

graph LR
   A ==> B

带有文字的粗链接

graph LR
   A == text ==> B

graph LR
   A == text ==> B

链接链接

可以按如下所示在同一行中声明许多链接：

graph LR
   A -- text --> B -- text2 --> C

graph LR
   A -- text --> B -- text2 --> C

破坏语法的特殊字符

graph LR
    id1["This is the (text) in the box"]

graph LR
    id1["This is the (text) in the box"]

实体代码以转义字符

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

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

子图

subgraph title
    graph definition
end

子图案例

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

相互作用

可以将click事件绑定到节点，单击可能导致JavaScript回调或链接，该链接将在新的浏览器选项卡中打开。注意：使用securityLevel=’strict’时将禁用此功能，使用时将启用securityLevel=’loose’。

click nodeId callback
  • nodeId是节点的ID
  • callback是在显示图形的页面上定义的javascript函数的名称，该函数将使用nodeId作为参数来调用。
    以下是工具提示用法的示例：
<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

工具提示文本用双引号引起来。工具提示的样式由.mermaidTooltip类设置。

graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"
graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"

样式节点链接

样式链接

可以设置链接样式。例如，您可能想要设置在流程中向后移动的链接的样式。由于链接没有ID的方式与节点相同，因此需要某种其他方式来确定链接应附加到的样式。在图表中定义链接时使用的订单号代替id。在下面的示例中，linkStyle语句中定义的样式将属于图中的第四个链接：

linkStyle 3 stroke:#ff3,stroke-width:4px;

设置节点样式

可以将特定样式（例如，较粗的边框或不同的背景颜色）应用于节点。

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5


graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

班级

每次定义样式时，更方便的方法是定义一类样式，并将该类附加到应具有不同外观的节点上。

类定义如下例所示：

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

将类附加到节点的操作如下:

class nodeId1 className;

也可以在一个语句中将类附加到节点列表：

class nodeId1,nodeId2 className;

CSS类

也可以以css样式预定义可从图形定义中应用的类，如下例所示：

示例样式:

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

示例定义:

graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
    class A cssClass;

graph LR;
    A-->B[AAABBB];
    B-->D;
    class A cssClass;

默认类

如果一个类被命名为default，它将被分配给所有没有特定类定义的类。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

基本支持fontawesome

可以从fontawesome添加图标。

通过语法fa：#icon类名＃来访问图标。

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

图的声明在顶点和链接之间有空格，并且没有分号

  • 在图形声明中，语句现在也可以不使用分号结束。在0.2.16版本之后，以分号结束图语句只是可选的。因此，下面的图声明与图的旧声明同样有效。

  • 顶点和链接之间只能有一个空格。但是，顶点和其文本以及链接和其文本之间不应有任何空格。图形声明的旧语法也将起作用，因此，此新功能是可选的，旨在提高可读性。

以下是图边缘的新声明，该声明与图边缘的旧声明同样有效。

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

组态

是否可以调整渲染流程图的宽度。

这是通过定义mermaid.flowchartConfig或通过CLI在配置中使用json文件来完成的。mermaidCLI页面中描述了如何使用CLI。可以将mermaid.flowchartConfig设置为带有配置参数或相应对象的JSON字符串。

-------------本文结束感谢您的阅读-------------