How do you make block diagrams with node inside nodes in mermaid?

Question

How do I create block diagrams where one node is inside another node like the CPU in the picture below?

My use case is that I want to draw an architecture and show what does inside a certain part of the system. The problem with class is that it just draws lines inside the node, and does not show the whole rectangle of the child node inside the parent node.

Answer 1

At last I found that you can create subgraphs.

flowchart LR
    A --> B

subgraph B
    C --> D
end

Answer 2

You can use subgraph to do this. Check this link for more information.
https://mermaid-js.github.io/mermaid/#/flowchart?id=subgraphs

Your graph will look like this.

flowchart LR
    subgraph CPU["Central Processing Unit (CPU)"]
        direction TB
        ArithmeticUnit["Arithmetic & Logic Unit"]
        ControlUnit["Control Unit"]
        MemoryUnit["Memory Unit"]
        
        ArithmeticUnit-->ControlUnit-->ArithmeticUnit
        MemoryUnit-->ControlUnit-->MemoryUnit
    end
    InputUnit["Input Unit"]-->CPU 
    CPU-->OutputUnit["Output Unit"]