VSCODE, mermaid subgraph 示例

1）

```mermaid  

graph TD;

subgraph Subgraph1

A --> B

end

subgraph Subgraph2

C --> D

end

 

```

2）

```mermaid  

graph TD                  

    subgraph 子图名称    

        A[节点1] --> B[节点2]  

    end            

   

    subgraph 另一个子图  

        C[节点3] --> D[节点4]

    end

   

    A --> C            

 

```

3）

```mermaid  

graph TB                          

    subgraph 电商系统            

        subgraph 用户模块      

            A[用户注册] --> B[用户登录]

            B --> C[用户信息管理]

        end                      

       

        subgraph 商品模块      

            D[商品浏览] --> E[商品详情]

            E --> F[加入购物车]

        end                      

       

        subgraph 订单模块      

            G[创建订单] --> H[支付订单]

            H --> I[订单完成]

        end                    

    end                        

   

    C --> D                  

    F --> G                  

     

 

```

4）可以用%%进行单行的注释

```mermaid  

flowchart TD

%% 这是一个流程图示例的注释

A[开始] --> B{条件判断}

%% 如果条件为真，进入操作1

B -->|是| C[操作1]

%% 如果条件为假，进入操作2

B -->|否| D[操作2]

             

     

 

```

5）

```mermaid  

graph TB                          

%% 从上到下布局

    subgraph 电商系统            

    %% 最外层子图

        subgraph 用户模块        

         %% 嵌套的子图1

            A[用户注册] --> B[用户登录]

            B --> C[用户信息管理]

        end                      

        %% 结束用户模块

       

        subgraph 商品模块        

         %% 嵌套的子图2

            D[商品浏览] --> E[商品详情]

            E --> F[加入购物车]

        end                      

         %% 结束商品模块

       

        subgraph 订单模块        

        %% 嵌套的子图3

            G[创建订单] --> H[支付订单]

            H --> I[订单完成]

        end                      

        %% 结束订单模块

    end                          

     %% 结束最外层子图

   

    C --> D                      

    %% 跨子图连接

    F --> G                      

    %% 模块间的业务流程

             

     

 

```

6)