`$c4ShapeInRow` layout configuration ignored

[wildmichael]

Describe the bug When using mmdc to convert a C4Context diagram, the layout configuration value $c4ShapeInRow has no effect.

To Reproduce Steps to reproduce the behavior:

1. Create a *.mmd file with a C4Context diagram that contains at least 3 elements
2. Add the call UpdateLayoutConfig($c4ShapeInRow="3") (or any number >= 3)
3. Run mmdc to convert the diagram, e.g. to PNG, e.g. as:

   $ npx -p @mermaid-js/mermaid-cli@9.2.2 mmdc -i input.mmd -o output.png -e png

4. Notice that there are only 2 elements per row instead of 4, whereas in the mermaid live editor the result is correct.

Expected behavior The number of elements per row configured with UpdateLayoutConfig($c4ShapeInRow="3") should be respected.

Screenshots

Input:

C4Context
    UpdateLayoutConfig($c4ShapeInRow="4")

    Boundary(boundary, "Boundary") {
        Person(planner, "Person")
        System(S1, "System 1")
        System(S2, "System 2")
        System(S3, "System 3")
        System(S4, "System 4")
        System(S5, "System 5")
        Person(otherPerson, "Other Person")
        System(S6, "System 6")
      }

Output of mmdc:

Output of live editor:

Desktop:

• OS: Windows 10 20H2
• Browser: Chromium Edge
• Version: 107.0.1418.52

[gmariottiAtWolt]

I can confirm that the problem is still present with the latest mermaid-cli docker image

[keilhofh]

I can still confirm that the problem is present with the latest mermaid-cli docker image....

[wael-jaber]

For anyone run into this issue try to set puppeteer to run in headful mode; I am not sure but it seems because of the chromium version used by puppeteer on my m1 machine works as expected however on x64 intel machine this issue seems to appear. maybe we should find a more stable chromium version to fix this at root lvl. Also the display size seems to affect this as well.