Markdown系列mermaid美人鱼之Flowcharts流程图

流程图 - 基本语法

图形

该语句声明了一个新图形和图形布局的方向。
这声明了一个从上到下的图形。

graph TD
    Start --> Stop

这声明了一个从左到右的图形。
可能的方向是：

• TB - 顶部

• BT - 底部

• RL - 右边

• LR - 左转

• TD - 与结核病相同

graph LR
    Start --> Stop

节点和形状

节点（默认）

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)

圆形的节点

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
    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-->|text|B

要么

graph LR
    A-- text -->B

虚线链接

graph LR;
   A-.->B;

带文字的虚线链接

graph LR
   A-. text .-> B

粗链接

graph LR
   A ==> B

与文本的粗链接

破坏语法的特殊字符

可以将文本放在引号内以便渲染更麻烦的字符。如下例所示：

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

实体代码转义字符

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

    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

相互作用

可以将单击事件绑定到节点，单击可以导致javascript回调或链接，该链接将在新的浏览器选项卡中打开。

click nodeId callback

• nodeId是节点的id
• callback是在显示图形的页面上定义的javascript函数的名称，该函数将以nodeId作为参数调用。

下面的工具提示用法示例：

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

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

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

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

从0.5.2版开始提供工具提示功能和链接到URL的功能。

造型和课程

样式链接

可以设置链接样式。例如，您可能希望设置在流中向后移动的链接的样式。由于链接没有与节点相同的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

类(Classes)

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

类定义如下例所示：

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;

默认类

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

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

对fontawesome的基本支持

可以从fontawesome添加图标。
图标通过语法fa：#icon class name＃来获取。

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]

组态…

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

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

mermaid.flowchartConfig = {
    width: 100%
}