Mermaid语法2-流程图方向、节点以及连接

最新推荐文章于 2025-03-21 15:41:05 发布

Neptuneyut

最新推荐文章于 2025-03-21 15:41:05 发布

阅读量8.8k

点赞数 2

分类专栏： Mermaid Web前端

本文链接：https://blog.csdn.net/qq_42491125/article/details/114005171

版权

Web前端同时被 2 个专栏收录

25 篇文章

订阅专栏

Mermaid

2 篇文章

订阅专栏

本文介绍了如何使用Graph语法自上而下创建流程图，包括声明方向、定义节点样式及连接方式，提供了详细的Graph流程图绘制教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Graph

graph：绘制流程图
TD声明流程图的方向，声明了图是自上而下的(TD或TB)

graph TD
    Start --> Stop %%注释，由A到B,自上而下排
    %% graph ，声明绘制流程图，TD:top to down
    %% 第二行起建议缩进
    %% 首行不可注释
    %% --> 两个-,两边建议空格

类似，如下声明自左向右 (LR)

graph LR
    Start --> Stop

流程图方向

所有的方向：

TB - top to bottom
TD - top-down/ same as top to bottom
BT - bottom to top
RL - right to left
LR - left to right

节点

节点id是流程图的基本单元，除了end，其他字符都可以作为节点id，默认显示内容为节点id：

graph LR
	E %% E为节点id，不能是"end"，但可以是“End”、“END”

带内容的节点id
可以给节点id内容，后续可以引用之前定义的节点内容

graph LR
id1[This is the textin the box] --> id1 
%% 节点id与内容之间没有空格
%% 可以引用之前定义的节点id

节点形状

节点可以有不同的形状，使用不同的符号，则产生不同box形状

graph TB
id1[矩形] -->
id2(圆角) -->
id3[[subroute process]] -->
id4[(圆柱形)] -->
id5([椭圆]) -->
id6((圆形)) -->
id7>不对称形状] -->
id8{菱形} -->
id9{{六边形}} -->
id10[/This is the text in the box/]  -->
id11[\This is the text in the box\]  -->
 A[/Christmas\] -->
 B[\Go shopping/]

节点之间的连接

Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

graph LR
	A --> B  %% 箭头连接

graph LR
	C --- D %%直线连接

graph LR
	A-- text link ---B %% 文本连接

graph LR
	A-- text link -->B %% 文本箭头连接

graph LR
	A-.->B %% 虚线箭头

Dotted link with text

graph LR
   A-. text .-> B %% 虚线箭头

Thick link

graph LR
   A ==> B %% 粗箭头

graph LR
   A == text ==> B %% 粗箭头文本

参考

Mermaid github