文章目录示例节点形状连接线示例一个简单的流程图如下YesNo开始输入xx1结果A结果B流程图源码为--- title: 流程图 --- flowchart LR A(开始) -- B[输入x] B -- C{x1} C --|Yes| 结果A C --|No| 结果B【flowchart】表示图表类型是流程图LR表示从左到右对应的是TD表示从上到下默认值是TD。从源码可以总结出一些最常见的绘图元素不间断的文字会被自动识别为矩形节点文字后如果如果有不同类型的括号则显示括号内的文字且不同的括号对应不同的节点形状方括号对应矩形圆括号对应圆角矩形花括号对应菱形【–】为箭头后面若跟着一个由∣ ⋅ ∣ \vert\cdot\vert∣⋅∣框起来的文字则该文字会浮动在箭头上。节点形状mermaid提供了大量基于不同括号生成的节点形状其对应关系如下图所示。[直角矩形](圆角矩形)[\倒梯形/][\梯形/]([体育场])非对称形]{{六边形}}[[子程序]][/平行四边形/][\反平行四边形\\][(圆柱)]((圆形)){菱形}(((双圈)))Mermaid支持的形状远远不止上述这些仅仅通过括号是很难穷尽的为此Mermaid提供了更加灵活的{}语法可通过指定shape参数来实现更复杂的节点形状示例如下A{ shape: docs, label: ...}连接线Mermaid也提供了大量的连接线以适应不同的业务需求这些连接线的属性包括线型和端点。其中线型主要分为实线、虚线、粗线分别用--,-.-和来指定端点分为无端点-、箭头或、圆圈o、叉号x二者组合就可以实现一个连接符示例如下。-- 实线箭头--- 实线--o 实线圆圈-.- 虚线箭头-.- 虚线-.-o 虚线圆圈~~~隐形连接A1A2A3A4B1B2B3B4F1F2 Mermaid流程图基础：节点形状和连接符
文章目录示例节点形状连接线示例一个简单的流程图如下YesNo开始输入xx1结果A结果B流程图源码为--- title: 流程图 --- flowchart LR A(开始) -- B[输入x] B -- C{x1} C --|Yes| 结果A C --|No| 结果B【flowchart】表示图表类型是流程图LR表示从左到右对应的是TD表示从上到下默认值是TD。从源码可以总结出一些最常见的绘图元素不间断的文字会被自动识别为矩形节点文字后如果如果有不同类型的括号则显示括号内的文字且不同的括号对应不同的节点形状方括号对应矩形圆括号对应圆角矩形花括号对应菱形【–】为箭头后面若跟着一个由∣ ⋅ ∣ \vert\cdot\vert∣⋅∣框起来的文字则该文字会浮动在箭头上。节点形状mermaid提供了大量基于不同括号生成的节点形状其对应关系如下图所示。[直角矩形](圆角矩形)[\倒梯形/][\梯形/]([体育场])非对称形]{{六边形}}[[子程序]][/平行四边形/][\反平行四边形\\][(圆柱)]((圆形)){菱形}(((双圈)))Mermaid支持的形状远远不止上述这些仅仅通过括号是很难穷尽的为此Mermaid提供了更加灵活的{}语法可通过指定shape参数来实现更复杂的节点形状示例如下A{ shape: docs, label: ...}连接线Mermaid也提供了大量的连接线以适应不同的业务需求这些连接线的属性包括线型和端点。其中线型主要分为实线、虚线、粗线分别用--,-.-和来指定端点分为无端点-、箭头或、圆圈o、叉号x二者组合就可以实现一个连接符示例如下。-- 实线箭头--- 实线--o 实线圆圈-.- 虚线箭头-.- 虚线-.-o 虚线圆圈~~~隐形连接A1A2A3A4B1B2B3B4F1F2 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
