【MarkerDown】CSDN Markdown之流程图graph&flowchart详解
基本语法 flowchart/graph
流程图（Flowcharts/Graphs）是由节点 (几何形状) 和连接线 (箭头或线条)组成的. Mermaid代码定义了节点和连线的编码方式，并支持不同的箭头类型、多向箭头以及子图之间的任意链接。
| 警告 如果在流程图的节点使用`end`,请将整个单词是大写进行书写或者任意字母使用大写进行书写。 (例如, "End" 或 "END"), 或者使用例子的方案。在流程图中键入`end`（所有字母小写）将会破坏流程图。 |
节点(默认)
代码:
flowchart
```mermaid
flowchart LR
序号
```
graph
```mermaid
graph LR
序号
```
| 信息 “序号”就是框中显示的内容。 |
带有文本的节点
你也可以在文本框中设置与序号不同的文本。如果对统一文本框进行多次设置，将使用最后一次的设置。此外，如果后面有为节点定义连线，可以省略文本定义。渲染文本框时将使用先前定义。
代码:
flowchart
```mermaid
flowchart LR
id1[文本框中的文本]
```
graph
```mermaid
graph LR
id1[文本框中的文本]
```
Unicode文本
使用"将Unicode文本括起来。
代码:
flowchart
```mermaid
flowchart LR
id[“❤是Unicode字符”]
```
graph
```mermaid
graph LR
id[“❤是Unicode字符”]
```
Markdown 格式
使用双引号和反引号将 “` text `” 标记文本括起来。
代码:
flowchart
```mermaid
%%{init: {“flowchart”: {“htmlLabels”: false}} }%%
flowchart LR
markdown[“`这 **是** Markdown`”]
newLines[“`第1行
第2行 2
第3行 3`”]
markdown --> newLines
```
graph
```mermaid
%%{init: {“graph”: {“htmlLabels”: false}} }%%
graph LR
markdown[“`这 **是** Markdown`”]
newLines[“`第1行
第2行 2
第3行 3`”]
markdown --> newLines
```
方向
此语句声明了流程图的方向。
(TD/TB)表示流程图的方向是从上到下的方向。
代码:
flowchart
```mermaid
flowchart TD
开始–> 停止
```
graph
```mermaid
graph TD
开始–> 停止
```
(LR)表示流程图的方向是从左到右的方向。
代码:
flowchart
```mermaid
flowchart LR
开始 --> 停止
```
graph
```mermaid
graph LR
开始 --> 停止
```
可以使用的方向定义如下:
TB - 从上到下 Top->Bottom
TD - 从上到下 Top->Down
BT - 从下到上 Bottom->Top
RL - 从右到左 Right->Left
LR - 从左到右 Left->Right
节点形状
圆形节点
代码:
flowchart
```mermaid
flowchart LR
id1(文本框中的文本)
```
graph
```mermaid
graph LR
id1(文本框中的文本)
```
体育场形状的节点
代码:
flowchart
```mermaid
flowchart LR
id1([文本框中的文本])
```
graph
```mermaid
graph LR
id1([文本框中的文本])
```
子例程形状中的节点
代码:
flowchart
```mermaid
flowchart LR
id1[[文本框中的文本]]
```
graph
```mermaid
graph LR
id1[[文本框中的文本]]
```
圆柱形节点
代码:
flowchart
```mermaid
flowchart LR
id1[(数据库)]
```
graph
```mermaid
graph LR
id1[(数据库)]
```
圆形节点
代码:
flowchart
```mermaid
flowchart LR
id1((圆形文本框中的文本))
```
graph
```mermaid
graph LR
id1((圆形文本框中的文本))
```
不对称形状的节点
代码:
flowchart
```mermaid
flowchart LR
id1>文本框中的文本]
```
graph
```mermaid
graph LR
id1>文本框中的文本]
```
菱形节点
代码:
flowchart
```mermaid
flowchart LR
id1{文本框中的文本}
```
graph
```mermaid
graph LR
id1{文本框中的文本}
```
六边形节点
代码:
flowchart
```mermaid
flowchart LR
id1{{文本框中的文本}}
```
graph
```mermaid
graph LR
id1{{文本框中的文本}}
```
平行四边形节点
代码:
flowchart
```mermaid
flowchart TD
id1[/文本框中的文本/]
```
graph
```mermaid
graph TD
id1[/文本框中的文本/]
```
(反)平行四边形节点
代码:
flowchart
```mermaid
flowchart TD
id1[\文本框中的文本]
```
graph
```mermaid
graph TD
id1[\文本框中的文本]
```
梯形节点
代码:
flowchart
```mermaid
flowchart TD
A[/春节]
```
graph
```mermaid
graph TD
A[/春节]
```
(反)梯形节点
代码:
flowchart
```mermaid
flowchart TD
B[\逛街/]
```
graph
```mermaid
graph TD
B[\逛街/]
```
目前，只有上面这些形状可以使用，但未来肯定不止如此，可能随着后续版本的发布而兼容更多的形状。
双圆形
代码:
flowchart
```mermaid
flowchart TD
id1(((圆中文本)))
```
flowchart TD
id1(((圆中文本)))
graph
```mermaid
graph TD
id1(((圆中文本)))
```
graph TD
id1(((圆中文本)))
节点之间的链接
节点可以通链接线进行连接。可以有不同类型的链接或附加文本字符串的链接。
带箭头的实线链接
代码:
flowchart
```mermaid
flowchart LR
A–>B
```
graph
```mermaid
graph LR
A–>B
```
没有箭头的实线链接
代码:
flowchart
```mermaid
flowchart LR
A — B
```
graph
```mermaid
graph LR
A — B
```
带文本的实线链接
代码:
flowchart
```mermaid
flowchart LR
A-- 文本! —B
```
graph
```mermaid
graph LR
A-- 文本! —B
```
或
代码:
flowchart
```mermaid
flowchart LR
A—|文本|B
```
graph
```mermaid
graph LR
A—|文本|B
```
带有箭头和文本的链接
代码:
flowchart
```mermaid
flowchart LR
A–>|文本|B
```
graph
```mermaid
graph LR
A–>|文本|B
```
或
代码:
flowchart
```mermaid
flowchart LR
A-- 文本 -->B
```
graph
```mermaid
graph LR
A-- 文本 -->B
```
带箭头的虚线链接
代码:
flowchart
```mermaid
flowchart LR
A-.->B;
```
graph
```mermaid
graph LR
A-.->B;
```
带箭头和文本的虚线链接
代码:
flowchart
```mermaid
flowchart LR
A-. 文本 .-> B
```
graph
```mermaid
graph LR
A-. 文本 .-> B
```
带箭头的粗实线链接
代码:
flowchart
```mermaid
flowchart LR
A ==> B
```
graph
```mermaid
graph LR
A ==> B
```
带箭头和文本的粗实线链接
代码:
flowchart
```mermaid
flowchart LR
A == 文本 ==> B
```
graph
```mermaid
graph LR
A == 文本 ==> B
```
隐式链接
在某些情况下，如果要强行设置节点的默认位置，可以使用这个隐式链接设置相对于某个节点的位置。
代码:
flowchart
```mermaid
flowchart LR
A ~~~ B
```
flowchart LR
A ~~~ B
graph
```mermaid
graph LR
A ~~~ B
```
graph LR
A ~~~ B
链式链接
可以在同一行中声明多个链接，如下所示:
代码:
flowchart
```mermaid
flowchart LR
A – 文本1 --> B – 文本2 --> C
```
graph
```mermaid
graph LR
A – 文本1 --> B – 文本2 --> C
```
还可以在同一行中声明多个节点链接，如下所示:
代码:
flowchart
```mermaid
flowchart LR
a --> b & c–> d
```
graph
```mermaid
graph LR
a --> b & c–> d
```
你可以使用特殊的表达式描述节点之间的依赖关系。如下面一行代码所表示的关系:
代码:
flowchart
```mermaid
flowchart TB
A & B–> C & D
```
graph
```mermaid
graph TB
A & B–> C & D
```
若您使用基本语法实现上面这个图表，将需要四行代码。
代码:
flowchart
```mermaid
flowchart TB
A --> C
A --> D
B --> C
B --> D
```
graph
```mermaid
graph TB
A --> C
A --> D
B --> C
B --> D
```
新的箭头链接
以下是支持的新型箭头:
代码:
flowchart
```mermaid
flowchart LR
A --o B
B --x C
```
graph
```mermaid
graph LR
A --o B
B --x C
```
双向箭头
可以使用双向箭头。
代码:
flowchart
```mermaid
flowchart LR
A o–o B
B <–> C
C x–x D
```
graph
```mermaid
graph LR
A o–o B
B <–> C
C x–x D
```
链接的最小长度
流程图中的每个节点最终都会根据其链接到的节点分配一个位置然后渲染在流程图中，即垂直或水平位置（具体取决于流程图的方向）。默认情况下，链接可以跨越任意数量的列，但您可以通过在链接定义中添加额外的-短划线来使得任何链接比其他链接更长。
在以下示例中，在从节点B到节点E的链接中添加了两个额外的-短划线，因此它比常规链接多跨两个列：
代码:
flowchart
```mermaid
flowchart TD
A[开始] --> B{是吗?}
B -->|是| C[确定]
C --> D[重新判断]
D --> B
B ---->|否| E[结束]
```
graph
```mermaid
graph TD
A[开始] --> B{是吗?}
B -->|是| C[确定]
C --> D[重新判断]
D --> B
B ---->|否| E[结束]
```
注释 渲染引擎仍然可以使链接比请求的列数更长，以适应其他请求
当链接文本写在链接的中间时，必须在链接的右侧添加额外的-短划线。以达到与上面示例同样的效果：
代码:
flowchart
```mermaid
flowchart TD
A[开始] --> B{是吗?}
B – 是 --> C[确定]
C --> D[重新判断]
D --> B
B – 否 ----> E[结束]
```
graph
```mermaid
graph TD
A[开始] --> B{是吗?}
B – 是 --> C[确定]
C --> D[重新判断]
D --> B
B – 否 ----> E[结束]
```
对于虚线和粗实线链接，要添加的字符是.点或=等号，如下表所示：
| 长度 | 1 | 2 | 3 |
|---|---|---|---|
| 实线链接 | — | ---- | ----- |
| 带箭头的实线链接 | –> | —> | ----> |
| 粗实线链接 | === | ==== | ===== |
| 带箭头的粗实线链接 | ==> | ===> | ====> |
| 虚线链接 | -.- | -…- | -…- |
| 带箭头的虚线链接 | -.-> | -…-> | -…-> |
破坏语法的特殊字符
为了显示特殊的字符，可以将文本书写在引号内。如以下示例所示：
代码:
flowchart
```mermaid
flowchart LR
id1["文本框中的 (文本) "]
```
graph
```mermaid
graph LR
id1["文本框中的 (文本) "]
```
实体代码转义特殊字符
可以使用此处示例的语法来表示特殊字符。
代码:
flowchart
```mermaid
flowchart LR
A[“双引号:#quot;”] -->B[“欣欣字符:#9829;”]
```
graph
```mermaid
graph LR
A[“双引号:#quot;”] -->B[“欣欣字符:#9829;”]
```
数字是基于16进制的, 所以 # 可以使用 #35;编码进行表示。还支持使用HTML字符名称。
子图
subgraph 标题
序列图语句
end
示例如下:
代码:
flowchart
```mermaid
flowchart TB
c1–>a2
subgraph 子图一
a1–>a2
end
subgraph 子图二
b1–>b2
end
subgraph 子图三
c1–>c2
end
```
graph
```mermaid
graph TB
c1–>a2
subgraph 子图一
a1–>a2
end
subgraph 子图二
b1–>b2
end
subgraph 子图三
c1–>c2
end
```
也可以为子图设置显式id。
代码:
flowchart
```mermaid
flowchart TB
c1–>a2
subgraph ide1 [子图一]
a1–>a2
end
```
graph
```mermaid
graph TB
c1–>a2
subgraph ide1 [子图一]
a1–>a2
end
```
多个子流程
使用flowchart的流程图时，你可以设置子图与子图之间的链接、子图与节点的链接，如下图所示:
代码:
flowchart
```mermaid
flowchart TB
c1–>a2
subgraph 子图一
a1–>a2
end
subgraph 子图二
b1–>b2
end
subgraph 子图三
c1–>c2
end
子图一 --> 子图二
子图三 --> 子图二
子图二 --> c2
```
graph
```mermaid
graph TB
c1–>a2
subgraph 子图一
a1–>a2
end
subgraph 子图二
b1–>b2
end
subgraph 子图三
c1–>c2
end
子图一 --> 子图二
子图三 --> 子图二
子图二 --> c2
```
graph TB
c1-->a2
subgraph 子图一
a1-->a2
end
subgraph 子图二
b1-->b2
end
subgraph 子图三
c1-->c2
end
子图一 --> 子图二
子图三 --> 子图二
子图二 --> c2
子图的方向
您可以使用direction语句来设置子图在本例中呈现的方向。
代码:
flowchart
```mermaid
flowchart LR
subgraph 子图一
direction TB
subgraph 子图一一
direction RL
i1 -->f1
end
subgraph 子图一二
direction BT
i2 -->f2
end
end
A --> 子图一 --> B
子图一一 --> 子图一二
```
graph
```mermaid
graph LR
subgraph 子图一
direction TB
subgraph 子图一一
direction RL
i1 -->f1
end
subgraph 子图一二
direction BT
i2 -->f2
end
end
A --> 子图一 --> B
子图一一 --> 子图一二
```
graph LR
subgraph 子图一
direction TB
subgraph 子图一一
direction RL
i1 -->f1
end
subgraph 子图一二
direction BT
i2 -->f2
end
end
A --> 子图一 --> B
子图一一 --> 子图一二
Markdown字符串
“Markdown字符串”功能通过提供更通用的字符串类型来增强流程图和思维导图，该字符串类型支持粗体和斜体等文本格式选项，并自动将文本包装在标签中。
代码:
flowchart
```mermaid
%%{init: {“flowchart”: {“htmlLabels”: false}} }%%
flowchart LR
subgraph “子图1”
a(“`戴帽子的 **猫**`”) – “链接标签” --> b{{“`猪身上的 **狗**`”}}
end
subgraph “`**子图2**`”
c(“`戴帽子的 **猫**`”) – “`加粗 **链接标签**`” --> d(“猪身上的狗”)
end
```
graph
```mermaid
%%{init: {“graph”: {“htmlLabels”: false}} }%%
graph LR
subgraph “子图1”
a(“`戴帽子的 **猫**`”) – “链接标签” --> b{{“`猪身上的 **狗**`”}}
end
subgraph “`**子图2**`”
c(“`戴帽子的 **猫**`”) – “`加粗 **链接标签**`” --> d(“猪身上的狗”)
end
```
格式:
如果需要对文本加粗,请在文本的前面和后面分别加上两个星号 (**)。如果需要使文本倾斜, 请在文本的前面和后面分别加上一个星号 (*)。如果需要对文本进行多行显示，请在需要换行的位置添加Markdown字符串会自动换行，并允许您通过使用换行符替代
标签来开始新行。
此功能适用于节点标签、链接标签和子图标签。
交互
可以将点击事件绑定到节点，点击可以通过javascript回调或链接进行跳转，该链接将在新的浏览器选项卡中打开。注意：设置securityLevel='strict'时禁用此功能，设置securityLevel='loose'时启用此功能。
click nodeId callback
click nodeId call callback()
nodeId: 其中nodeId是节点的序号callback:callback是在显示图形的页面上定义的javascript函数的名称，该函数将以nodeId为参数进行调用。
下面是使用样例:
<script>
const callback = function () {
alert('已触发回调！');
};
</script>
提示文字使用"双引号包起来。提示文字的样式由.mermaidTooltip类设置。
代码:
flowchart
```mermaid
flowchart LR
A–>B
B–>C
C–>D
click A callback “回调的提示文字”
click B “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字”
click A call callback() “回调的提示文字”
click B href “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字”
```
graph
```mermaid
graph LR
A–>B
B–>C
C–>D
click A callback “回调的提示文字”
click B “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字”
click A call callback() “回调的提示文字”
click B href “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字”
```
注意 版本≥0.5.2提供了提示文字和链接URL的功能。
由于
Docsify处理JavaScript回调函数的方式受到限制,与上面例子类似的另外一个版本可以去jsfiddle查看.
默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过在定义单击事件中添加链接目标来更改此设置（支持 _self、_blank、_parent和_top）：
代码:
flowchart
```mermaid
flowchart LR
A–>B
B–>C
C–>D
D–>E
click A “https://blog.csdn.net/chenlu5201314” _blank
click B “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank
click C href “https://blog.csdn.net/chenlu5201314” _blank
click D href “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank
```
graph
```mermaid
graph LR
A–>B
B–>C
C–>D
D–>E
click A “https://blog.csdn.net/chenlu5201314” _blank
click B “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank
click C href “https://blog.csdn.net/chenlu5201314” _blank
click D href “https://blog.csdn.net/chenlu5201314” “在新选项卡中打开此链接” _blank
```
提示 在html上下文中使用交互式链接的完整示例:
flowchart
<body>
<pre class="mermaid">
flowchart LR
A-->B
B-->C
C-->D
click A callback "提示文字"
click B "https://blog.csdn.net/chenlu5201314" "这是一个链接"
click C call callback() "提示文字"
click D href "https://blog.csdn.net/chenlu5201314" "这是一个链接"
pre>
<script>
const callback = function () {
alert('已触发回调!');
};
const config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
script>
body>
graph
<body>
<pre class="mermaid">
graph LR
A-->B
B-->C
C-->D
click A callback "提示文字"
click B "https://blog.csdn.net/chenlu5201314" "这是一个链接"
click C call callback() "提示文字"
click D href "https://blog.csdn.net/chenlu5201314" "这是一个链接"
pre>
<script>
const callback = function () {
alert('已触发回调!');
};
const config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
script>
body>
注释 %%
可以在流程图中添加注释，注释内容将被解析器忽略。 注释只会对当前行生效, 并且开头必须以 %% (双百分号)。 注释开始到下一行的任何文本之前都将被视为注释，包括任何流程图语法。
代码:
flowchart
```mermaid
flowchart LR
%% 这是一行注释 A – 文本1 --> B{节点}
A – 文本1 --> B – 文本2 --> C
```
graph
```mermaid
graph LR
%% 这是一行注释 A – 文本1 --> B{节点}
A – 文本1 --> B – 文本2 --> C
```
样式和类
链接样式
可以为链接设置样式。例如，您可能想设置一个在流中向后的链接的样式。由于链接没有像节点一样的ID，因此需要其他方法来设置样式附加到链接上。不使用ID，而是使用定义链接时在图形中出现的顺序号，或者使用default应用于所有链接。在下面的例子中，linkStyle语句中定义的样式将属于图形中的第4个链接:
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Styling line curves
如果默认样式不符合您的需求，可以为节点之间的线条类型设置曲线样式。可用的曲线样式包括 basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter, 和 stepBefore.
在下面例子中，从左到右的图形使用stepBefore曲线样式。
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
flowchart LR
或
%%{ init: { 'graph': { 'curve': 'stepBefore' } } }%%
graph LR
获取完整的可用曲线列表，包括自定义曲线的说明，请参考d3-shape项目中的Shapes文档。
For a full list of available curves, including an explanation of custom curves, refer to the Shapes documentation in the d3-shape project.
节点样式
可以将特定的样式应用于节点，例如更厚的边框或不同的背景颜色。
代码:
flowchart
```mermaid
flowchart LR
id1(开始)–>id2(停止)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
graph
```mermaid
graph LR
id1(开始)–>id2(停止)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
类
比每次定义样式更方便的是定义一类样式，并将该类附加到应该具有不同外观的节点。
比每次重新定义样式更方便的方式是定义一个类样式，并将该类名附加到需要不同外观的节点上。
类的定义可以参考下面例子：
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
将一个类名附加到节点上的语法如下所示：
class nodeId1 className;
也可以将类名附加到一组节点上：
class nodeId1,nodeId2 className;
新增一种将类名附加到节点的缩写形式,使用操作符:::,如下例所示：:
代码:
flowchart
```mermaid
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
```
graph
```mermaid
graph LR
A:::someclass --> B
classDef someclass fill:#f96
```
Css类
可以在css样式对指定类进行预定义，这些类可以在流程图定义中引用，如下例所示：
样式示例
定义示例
代码:
flowchart
```mermaid
flowchart LR
A–>B[AAABBB]
B–>D
class A cssClass
```
graph
```mermaid
graph LR
A–>B[AAABBB]
B–>D
class A cssClass
```
默认类
如果一个类被命名为default，它将分配给所有没有特定类别定义的类。
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
对图标字体的支持
你可以从图标字体库中添加图标。
图标字体可以通过下面语法进行添加：
fa:#图标类名称#.
代码:
flowchart
```mermaid
flowchart TD
B[“fab:fa-twitter 鸽子图标”]
B–>C[fa:fa-ban 禁止图标]
B–>D(fa:fa-spinner 旋转图标)
B–>E(一个 fa:fa-camera-retro 照相机的图标?)
```
graph
```mermaid
graph TD
B[“fab:fa-twitter 鸽子图标”]
B–>C[fa:fa-ban 禁止图标]
B–>D(fa:fa-spinner 旋转图标)
B–>E(一个 fa:fa-camera-retro 照相机的图标?)
```
Mermaid兼容Font Awesome的最高版本v5, 仅限免费的图标。检查您使用的图标是否来自支持的图标集。
顶点和链接之间带空格且不带分号的图形声明
在图形声明，现在语句结尾可以不使用分号。在发布v0.2.16之后，以分号作为结尾的图形语句只是可选的。因此，下面的图形声明与旧的图形声明一起也是有效的。
顶点和链接之间只允许有一个空格。但是，顶点及其文本和链接及其文本之间不应该有任何空格。旧的图形声明语法也将起作用，因此这个新特性是可选的，并且是为了提高可读性而引入的。
下面是新的流程图边框声明，它与旧的流程图边框声明一起使用也是有效的。
代码:
flowchart
```mermaid
flowchart LR
A[方形框] -->|链接文本| B(圆角方形框)
B --> C{选择}
C -->|一| D[结果一]
C -->|二| E[结果二]
```
graph
```mermaid
graph LR
A[方形框] -->|链接文本| B(圆角方形框)
B --> C{选择}
C -->|一| D[结果一]
C -->|二| E[结果二]
```
配置
渲染 Renderer
流程图的布局是用渲染器完成的。默认的渲染器为dagre
从Mermaid v9.4 开始，你可以使用elk渲染器替代dagre渲染器。elk渲染器更适合更大、更复杂的流程图。
elk渲染器试验性的功能。你可以通过添加下面指令将渲染器更改为elk:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
或
%%{init: {“graph”: {“defaultRenderer”: “elk”}} }%%
注意 需要使用mermaid v9.4及以上的版本才能工作，且延迟加载配置中启用此功能。
宽度
可以调整流程图的渲染宽度。
这是通过定义mermaid.flowchartConfig或使用CLI的JSON文件来进行配置。有关 CLI的描述请参见mermaidCLI页。 mermaid.flowchartConfig使用JSON字符串或相应的对象进行配置。
mermaid.flowchartConfig = {
width: 100%
}