Is it possible to control subgraph size/layout?

[rogeralsing]

This is how I want to render my graphs

Here is what I have using MermaidJS so far:

graph TB

    a1((Player1))
    a2((Player5))
    b1((Player7))
    b2((Player9))
    c1((Player3))
    c2((Player6))
    d1((Player2))
    d2((Player4))

    subgraph Member 1
        a1
        a2
    end
    subgraph Member 2
        b1
        b2
    end
    subgraph Member 3
        c1
        c2
    end
    subgraph Member 4
        d1
        d2
    end

graph TD

    s((Singleton))
    e1[ ]
    e2[ ]
    e3[ ]

    subgraph Member 1
        e1
    end
    subgraph Member 2
        e2
    end
    subgraph Member 3
        s
    end
    subgraph Member 4
        e3
    end

graph TB

    a1((Worker1))

    b1((Worker2))

    c1((Worker3))

    d1((Worker4))

    subgraph Member 1
        a1
    end
    subgraph Member 2
        b1
    end
    subgraph Member 3
        c1
    end
    subgraph Member 4
        d1
    end

Getting there, but I have not yet found a way to control sizes and layouts. e.g. empty subgraphs, is there some way to control their width/height?

And for some reason, the subgraphs are stacked backward. why is that?

Is there anything I can do here to make the mermaid version layout more like the image above?

[rogeralsing]

I'm currently abusing this way too much, special css for hidden elements etc.

But I think it looks pretty neat so far: https://proto.actor/docs/placement-strategies https://proto.actor/docs/cluster/#grain-lifecycle

But it would be great to be able to control more how things are laid out. Currently I have invisible arrows in some places to make things group and align nicely.

[akloster]

You can actually do this with CSS flex, and maybe CSS grid layouts.

[danimihalca]

Hi. Did you manage to find some sort of way to align those items according to your needs?

[acekingke]

I have the same question, how should I set the css ?