Mermaid的流程图基本用法
发布网友
发布时间：2024-09-06 11:19
共1个回答
热心网友
时间：2024-11-03 17:10
若在流程图节点中使用"end"一词，请确保整个单词或所有字母大写。输入所有小写字母的"end"会导致流程图失效。
节点的默认代码包括"ID是显示在框中的内容"。除了矩形框外，还可以使用其他图形表示节点。在节点中设置文本时，即使重复定义文本，也会采用最后定义的值。若稍后为节点定义边，则文本定义可以忽略。
为了添加文本到节点，可以使用"将unicode文本括起来"或"使用双引号和反标记将markdown文本括起来"的代码。
方向语句用来声明流程图的方向，如"TD或TB：表示自上而下"或"LR：表示从左到右"。流程图的常见方向有垂直和水平两种。
流程图中的节点形状有圆形、圆柱形、圆形和非对称形状等，其中体育场形状、子程序形状、圆柱形、圆形、菱形、六边形、平行四边形、梯形和双圆等形状分别有相应的代码。
连接节点的带箭头或直线连接可以添加文本描述。虚线连接和粗箭头连接可以带有或不带有文本。看不见的连接用于特殊用途，多个连接可以在同一行中声明。
描述依赖关系时，可以以非常有表现力的方式进行，通常需要四行代码来描述同一个图。
特殊箭头类型和多向箭头可以进一步丰富流程图的表达。连接的最小长度取决于节点链接的等级，可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接长。
子图的使用提供了更复杂图的构建能力。子图可以有自己的ID、边和方向。在子图中使用图形类型可以设置子图的方向，但如果子图的任何节点连接到外部，则子图方向将被忽略。
Markdown字符串功能增强了流程图和思维导图，支持文本格式选项，如粗体和斜体，并自动在标签中换行文本。
交互功能允许将点击事件绑定到节点，触发JavaScript回调或在新浏览器标签中打开连接。使用securityLevel='strict'时禁用此功能，使用securityLevel='loose'时启用此功能。
注释可以在自己的行上使用"%%"开头，并在下一个换行符之后的任何文本被视为注释。
连接样式可以通过"linkStyle"语句设置，可以应用于单个或多个连接。线曲线样式可以自定义，以满足特定需求。节点样式可以包括边框厚度和背景颜色的修改。
类定义用于在多个节点上应用相同的样式，而CSS类提供了更灵活的样式控制。
在Mermaid中，可以使用fontawesome图标来丰富流程图的视觉效果。顶点和连接之间带有空格且不带分号的图形声明与旧的声明方式兼容。
从Mermaid 9.4版本开始，可以使用名为elk的替代渲染器，它更适合处理更大、更复杂的图表。宽度设置允许调整渲染流程图的宽度。
