How do I make a stack of boxes using Mermaid?

Question

I'm working on some documentation that will be read on Github, and I'd like to generate some diagrams using Mermaid.

Most of the flowcharts will be straight-forward, and I can follow Mermaid's examples. I'm having some trouble expressing one kind of diagram though.

I'd like to nest some boxes inside of a top-level box, for a result that looks like this:

    ---------------
    | My Main Box |
    |             |
    |  ---------- |
    |  |  Foo   | |
    |  ---------- |
    |  |  Bar   | |
    |  ---------- |
    |  |  Baz  |  |
    |  ---------- |
    ---------------

I've been scratching my head trying to come up with a way to do it, and I keep coming up empty. The closest I've been able to get is this:

    graph BT
        subgraph main[My Main Box]
        1[foo]---2[bar]
        2---3[baz]
        linkStyle default fill-opacity:0,stroke-width:0px,stroke-opacity:0
    end

which is close, but the interior boxes are too far away from each other. Is there any way for me to shorten the length of my invisible connectors, or maybe a different/better way I could express this diagram?

Answer 1

You can tweak Gantt chart a bit:

%%{
  init: {
    'theme': 'base',
    "gantt": {
        "useWidth": "300"
    }
  }
}%%

gantt
    title My Main Box
    dateFormat X
    tickInterval 1day

    section  
    Foo   : 0, 1
    Bar   : 0, 1
    Baz   : 0, 1