实例讲解 Mermaid 流程图语法，不会画图也能画流程图，程序员专属画图工具

分类：原创工具标签： Mermaid图表语法示例

作者：刘杰
来源：技术那些事
阅读：97

发布： 2025-07-30 07:54
最后更新： 2025-08-05 10:09

流程图示例.jpg

Mermaid 图表语法流程图示例：

方向描述

    
        
            graph LR;
    A & B-->C;
    B-->A;
    C-->D;

language 复制

graph LR;
    A & B-->C;
    B-->A;
    C-->D;

节点形状

    
        
            graph TB
    A
    B[矩形节点]
    C(圆形矩形节点)
    D((圆形节点))
    E{菱形节点}
    F>旗帜形状节点]

language 复制

graph TB
    A
    B[矩形节点]
    C(圆形矩形节点)
    D((圆形节点))
    E{菱形节点}
    F>旗帜形状节点]

连接样式

    
        
            graph TB
    A1---B1
    A2-->B2
    A3--text---B3
    A4--text-->B4
    A5-.-B5
    A6-.->B6
    A7-.text.-B7
    A8-.text.->B8
    A9===B9
    A10==>B10
    A11==text===B11
    A12==text==>B12

language 复制

graph TB
    A1---B1
    A2-->B2
    A3--text---B3
    A4--text-->B4
    A5-.-B5
    A6-.->B6
    A7-.text.-B7
    A8-.text.->B8
    A9===B9
    A10==>B10
    A11==text===B11
    A12==text==>B12

示例

    
        
            graph LR
    开始(买炸鸡流程开始)-->节点(买炸鸡)
    节点-->判断(是否有炸鸡)
    判断--YES-->开心-->回家(回家)
    判断--NO-->伤心-->回家

简化写法流程如下-.-
    A1(购买炸鸡流程开始)-->买炸鸡-->B1(判断是否油炸)--是-->高兴-->A2(回家)
    B1--没有-->不高兴-->A2

language 复制

graph LR
    开始(买炸鸡流程开始)-->节点(买炸鸡)
    节点-->判断(是否有炸鸡)
    判断--YES-->开心-->回家(回家)
    判断--NO-->伤心-->回家

简化写法流程如下-.-
    A1(购买炸鸡流程开始)-->买炸鸡-->B1(判断是否油炸)--是-->高兴-->A2(回家)
    B1--没有-->不高兴-->A2

子图表

    
        
            graph RL
    c1-->a2
    subgraph one
    	a1-->a2
    end
    subgraph two
    	b1-->b2
    end
    subgraph three
    	c1-->c2
    end
    one-->two
    three-->two
    two-->c2

language 复制

graph RL
    c1-->a2
    subgraph one
    	a1-->a2
    end
    subgraph two
    	b1-->b2
    end
    subgraph three
    	c1-->c2
    end
    one-->two
    three-->two
    two-->c2