如何使用Mermaid绘制带有嵌套节点的块框图？

要实现像示例中CPU那样的嵌套节点块框图，用subgraph子图功能就能解决class仅画内部线条的问题，下面以Mermaid为例给出具体实现（Mermaid是主流的文本绘图工具，支持大多数Markdown平台）：

基础嵌套示例 #

graph TD
    subgraph 系统架构
        subgraph CPU模块
            subgraph 核心单元
                运算器
                控制器
            end
            缓存单元
        end
        内存模块
        存储模块
    end

• 每个subgraph会生成独立的矩形框，完全包裹内部的节点和子子图，完美满足你展示系统内部组成的需求。
• 可以根据实际架构层级，无限嵌套子图，清晰划分模块关系。

带自定义样式的进阶示例 #

如果需要区分不同层级的视觉效果，可添加样式自定义：

graph TD
    subgraph 系统架构["系统架构 (顶层节点)"]
        style 系统架构 fill:#f0f8ff,stroke:#333,stroke-width:2px
        subgraph CPU模块["CPU模块 (一级子模块)"]
            style CPU模块 fill:#e6f7ff,stroke:#1890ff,stroke-width:2px
            subgraph 核心单元["核心单元 (二级子模块)"]
                style 核心单元 fill:#fff7e6,stroke:#fa8c16,stroke-width:2px
                运算器["算术逻辑运算器"]
                控制器["指令控制器"]
            end
            缓存单元["L3高速缓存"]
        end
        内存模块["DDR5内存"]
        存储模块["NVMe SSD"]
    end

通过style指令可以给每个子图设置填充色、边框样式，让不同层级的模块更直观区分。

内容的提问来源于stack exchange，提问作者user3061876