树形图 
括号图 
思维笔记 
框图
框图由方块和连接器组成，来直观地表示复杂的系统、流程或架构。方块代表基本组件或功能，连接器显示这些组件之间的关系或流程，框图在工程、软件开发和流程管理等各个字段都至关重要。
复制
嵌入
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
框图用途
框图的主要目的是提供系统的高层视图，使人们能够轻松理解和分析，而无需深入了解每个组件的复杂细节。这使得框图对于简化复杂系统，以及解释系统内各组件的整体结构和交互特别有用。
使用场景
框图在各个行业和学科中都有广泛的应用，主要包括：
- 软件架构：在软件开发中，框图可用于说明软件应用的体系结构。这包括显示各个模块或服务如何交互、数据流和高层组件交互情况。
- 网络拓扑图：框图非常适合表示IT和电信中的网络架构。它们可以展示不同网络设备和服务如何互相连接，包括路由、交换机、防火墙以及数据在网络中的流动。
- 工艺流程图：在商业和制造中，可以使用框图来创建流程图。这些流程图代表业务或制造流程的各个阶段，有助于可视化步骤顺序、决策点和控制流程。
- 电气系统：工程师使用框图来表示电气系统和电路。它们可以说明电气系统的高层结构、不同电气组件之间的相互作用以及电流的流动。
- 教育目的：框图也广泛用于教育材料中，以简化的方式解释复杂的概念和系统。框图有助于分解和可视化科学理论、工程原理和技术系统。
接下来，我们将深入研究使用 Mermaid 创建和操作框图的方式，涵盖从基本语法到高级配置和样式的所有内容。
简单框图
基础结构
框图是由代表不同实体或组件的方块组成，在 Mermaid 中可以使用简单的文本标签轻松创建方块。框图最基本形式可以是一系列没有任何连接线的方块。
简单框图示例：要创建一个包含三个标记为 a、b 和 c 方块的简单框图，语法如下：
复制
嵌入
block-beta
a b c
这个代码将生成三个水平排列的方块，每个方块都会自动间隔和对齐，以实现最佳的可读性。
定义要使用的列数
多列图
虽然简单的框图是线性且简单的，但更复杂的系统可能需要结构化布局。Mermaid 允许将块方块组织成多列，从而有助于创建更复杂和更详细的图表。
多列图示例：在需要将方块分布到多个列的情况下，可以指定列数并相应地排列方块。以下是如何创建具有三列和四个方块的框图，其中第四个方块出现在第二行中：
复制
嵌入
block-beta
columns 3
a b c d
这个语法 Mermaid 将方块 a、b、c 和 d 排列在三列中，并根据需要换行到下一行。此功能对于表示分层或多层系统特别有用。
高级方块配置
Mermaid 高级语法使图表设计具有更大的灵活性和复杂性，可适应更广泛的用例和场景。
设置方块宽度
跨越多列
在更复杂的图表中，你可能需要跨越多列的方块，来强调某些组件或表示更大的实体。Mermaid 允许调整方块宽度以覆盖多列，从而增强图表的可读性和结构性。
示例：要创建一个跨越两列的方块，你可以为每个方块指定所需的宽度：
复制
嵌入
block-beta
columns 3
a["A label"] b:2 c:2 d
在此示例中，标记为 A label 的方块占据一列，而方块 b、c 跨越2列，d 分配到它自己的列。方块大小的这种灵活性对于准确表示具有不同重要性或大小的组件的系统至关重要。
创建复合方块
嵌套方块
复合方块允许表示嵌套或分层系统，其中一个组件包含多个子组件。
示例：创建复合方块涉及定义父方块，然后在其中嵌套子方块。下面是如何定义具有嵌套元素的复合方块语法：
复制
嵌入
block-beta
block
D
end
A["A: I am a wide one"]
在这个语法中，D 是一个嵌套在更大父方块中的子方块。这个功能对于描述复杂结构特别有用，例如具有多个服务的服务器或较大组织框架内的一个部门。
自动列宽
调整宽度
Mermaid 允许根据方块的内容动态调整列宽。列的宽度由列中最宽的方块确定，确保图表保持平衡和可读。
示例：在具有不同方块大小的图表中，Mermaid 会自动调整列宽以适合每列中最大的块。
复制
嵌入
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
这里演示了 Mermaid 如何动态调整列的宽度以适应最宽的放块。
水平合并方块：在需要水平堆叠方块的情况下，可以使用列宽来完成任务。以下是创建4个方块堆叠在一起的框图语法：
复制
嵌入
block-beta
block
columns 1
a["A label"] b c d
end
在此示例中，合并方块的宽度会自动调整为最大子方块的宽度。
方块种类和形状
Mermaid 框图不限于标准矩形形状。Mermaid 提供多种方块形状，从而可以更细致和个性化的表示不同类型的信息或实体。
标准方块形状
圆角矩形
创建圆角矩形方块，可用于表示更柔软或更灵活的组件：
复制
嵌入
block-beta
id1("This is the text in the box")
体育场形状
体育场形状方块可以用来表示面向流程的组件：
复制
嵌入
block-beta
id1(["This is the text in the box"])
子流程形状
用于表示子流程或包含的进流程，用具有双垂直线的矩形方块表示：
复制
嵌入
block-beta
id1[["This is the text in the box"]]
圆柱形
圆柱形非常适合表示数据库或存储组件：
复制
嵌入
block-beta
id1[("Database")]
圆形
圆形可用于表示集中或关键的组件：
复制
嵌入
block-beta
id1(("This is the text in the circle"))
不对称形状、菱形和六边形
对于决策使用菱形，对于独特或专门的流程，可以使用不对称和六边形：
不对称形状
复制
嵌入
block-beta
id1>"This is the text in the box"]
复制
嵌入
block-beta
id1{"This is the text in the box"}
复制
嵌入
block-beta
id1{{"This is the text in the box"}}
平行四边形和梯形
平行四边形和梯形非常适合输入/输出和过渡流程：
复制
嵌入
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
双圈
为了高亮关键或高优先级组件，使用双圆圈会很有效：
复制
嵌入
block-beta
id1((("This is the text in the circle")))
箭头方块和空方块
箭头方块
方块箭头可以直观地显示流程内的方向或流动：
复制
嵌入
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
空方块
空方块可用于创建空白，这对于布局和可读性很有用：
复制
嵌入
block-beta
columns 3
a space b
c d e
复制
嵌入
block-beta
ida space:3 idb idc
注意，你可以使用数字符号 space:num 设置空方块占用的列数，其中 num 表示列宽的述职。你还可以使用 space，默认为一列。
Mermaid 中的标准形状和特殊形状增强了框图的表达能力，使其能够更准确、更具情境的表示。
用线条连接方块
Mermaid 框图一个关键特性就是能够使用各种类型的线条或链接来连接各个方块。
基础连接和箭头类型
连接方块需要使用箭头或线条。，这些连接器描述了方块之间的关系或信息流。Mermaid 提供了一系列箭头类型来满足不同的图表需求。
基本链接
创建一个带有箭头的简单链接，显示从一个块到另一个块的方向或流程：
复制
嵌入
block-beta
A space B
A-->B
该示例说明从方块 A 到方块 B 的直接连接。
链接上的文本
除了连接方块之外，通常还需要描述或标记关系。Mermaid 允许在链接上添加文本，为链接提供上下文。
要将文本添加到链接上，语法是在链接定义中包含该文本：
复制
嵌入
block-beta
A space:2 B
A-- "X" -->B
复制
嵌入
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
样式和自定义
除了框图的结构和布局之外，Mermaid 还提供大量样式选项，这些自定义功能允许创建更具视觉特色和信息化的图表。
单独方块样式
Mermaid 可以对单个方块进行详细的样式设置，你可以额应用各种 CSS 属性，例如颜色、描边和边框粗细。
自定义单个方块的样式
要对一个方块应用自定义样式，你可以使用 style 语法，后面跟方块标识符和所需的 CSS 属性：
复制
嵌入
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
类样式
Mermaid 支持将样式应用于类。如果你想将一组特定的样式应用于多个元素，使用样式设置或更容易，因为你只需将这些元素链接到一个类即可。
为单个类设置样式
复制
嵌入
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
这里，定义了名为 'blue' 的类并将其应用于方块 'A'，而方块 'B' 接收单独的样式。
使用案例
当 Mermaid 框图的模块化图表应用于实际场景时，其多功能性表现得淋漓尽致。
各种功能详细示例
通过结构、链接和样式元素，我们可以创建在不同情境下发挥特定作用的 Mermaid 框图。
系统架构
以下是一个具有互联组件的简单软件系统架构：
复制
嵌入
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
本示例展示了一个包含前端、后端和数据库的基本架构，各个方块的表现形式各不相同，以区分不同组件类型。
业务流程
以下是一个具有决策点和多个阶段的业务流程：
复制
嵌入
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
这些实际案例凸显了 Mermaid 框图在简化复杂信息并实现跨领域有效沟通方面的实用价值。
故障排除
使用 Mermaid 语法制作复杂框图有时会遇到挑战，这里列出常见语法错误，并提供管理更复杂图表结构的技巧。
常见语法错误
避免常见语法错误是顺利使用 Mermaid 框图的关键。
链接错误
使用不正确的链接语法，可能会导致意外的结果或损坏的图表：
复制
嵌入
block-beta
A - B
更正：确保正确使用箭头连接（--> 或 ---）各区块，以定义连接的方向和类型。另外，框图的基本原则之一是让作者完全控制方块的位置，因此上面的案例中，需要在方块之间添加空格：
复制
嵌入
block-beta
A space B
A --> B
样式错位
在错误的上下文中或使用不正确的语法应用样式，可能会导致无法按预期进行样式设置：
复制
嵌入
block-beta
A
style A fillpink;
更正：确保用逗号正确分隔样式属性，并使用正确的 CSS 属性格式来修正语法：
复制
嵌入
block-beta
A
style A fill:pink,stroke:#333;
