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

%% 模块间的业务流程

```

相关推荐
kite01211 小时前
TraeCode 与 TraeWork 合并:AI 时代 IDE 的三种形态与未来开发工具
ide·ade·traework·traecode
weixin_461769402 小时前
VS Code 中创建 Jupyter 文件(.ipynb)
ide·python·jupyter
浪潮IT馆2 小时前
Android Studio 非最新版本下载安装教程
android·ide·android studio
初雪云8 小时前
UniApp 云打包拿到 IPA 后,真正的发布工作才刚开始
ios·自动化·编辑器·产品经理·iphone
慧都小项9 小时前
组件改名,引用同步更新:WebStorm的重构能力用在哪里?
ide·重构·webstorm
幸运小圣1 天前
Buffer 新手入门【Node.js】
node.js·编辑器·vim
*wait for?1 天前
VScode使用uv-创建python虚拟环境
ide·vscode·编辑器
lzx_0021 天前
Linux 开发工具(二) 简单认识一下编辑器 —— vim
linux·编辑器·vim
意法半导体STM321 天前
【官方原创】LAT1724 STM32CubeIDE for VSCode 修改链接文件中的起始地址无效?
vscode·stm32·单片机·嵌入式硬件·mcu·stm32cube
超级大福宝2 天前
VS Code Remote-SSH 因 RemoteForward 端口冲突导致连接失败的排查与解决
运维·服务器·windows·vscode·ssh