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

%% 模块间的业务流程

```

相关推荐
weixin_5633714713 小时前
Android Studio 2024 版 Device Explorer 打开方法
android·ide·android studio
咸咸咸虾14 小时前
Microsoft Visual Studio 历史版本与官方安装包链接汇总
ide·microsoft·visual studio
广东帝工14 小时前
智能调度系统:智慧航道释放通航效率的核心引擎
编辑器
广东帝工17 小时前
船岸互联等技术趋势,改变航运传统构成
编辑器
芝士爱沙拉17 小时前
原生内置agent智能开发能力的MCU IDE-MounRiver Studio
ide·单片机·嵌入式硬件
QianhangQianping19 小时前
一块大屏的数据在浏览器里怎么变成画面:背景、子屏、前景三层结构
前端·低代码·架构·编辑器·数据可视化·大屏可视化
2501_9159090620 小时前
Windows 上用 VS Code 调试 iPhone 真机 App,KXBuild 断点、崩溃定位实操
ide·windows·vscode·ios·iphone·个人开发·敏捷流程
小卡拉米本米21 小时前
解决Vscode使用GitHub账号登录慢的问题
ide·vscode·编辑器
小菜要扣篮21 小时前
Ubuntu 下使用 vscode 打开 C++ 项目后,无法通过 F12 定位到定义问题解决
c++·vscode·ubuntu
2601_967987371 天前
终端 IDE 卷到了新高度:个人免费,符号索引快 65%,内存省 95%
ide·python·免费·性能·rune