Width argument not taken into account

[Kochise]

As mentioned here : mermaid-js/mermaid#341

npx mmdc --theme "neutral" -w "1000" -i state.mmd -o state.png
npx mmdc --theme "neutral" -w 2048 -i state.mmd -o state.png
npx mmdc --theme "forest" --width "2048" -i state.mmd -o state.png
npx mmdc --theme "neutral" -w "800" -i state.mmd -o state.png
npx mmdc --theme "neutral" -H "2048" -i state.mmd -o state.png
...

None of them change a thing, I'm still getting the same 202x346 pixels picture.

See attached picture below.

I need a better resolution to import into a LaTeX documentation.

[MindaugasLaganeckas]

Could be related to #55.

[MindaugasLaganeckas]

@Kochise : the issue has been fixed. Please, reopen if you disagree.

[multimeric]

It certainly seems to be ignored for me. Here's my reproducible example, just using the example diagram from the mermaid website:

$ mmdc -i test.mmd -o test.svg -w 200
Generating single mermaid chart
$ mmdc --version
9.3.0
$ cat test.mmd
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

[tildejustin]

having a similar issue as first post, mmdc -i state.mmd -o state.png -t neutral --width 1920 --height 1080 with state.mmd of

stateDiagram-v2
%%{init: { "fontFamily": "Jetbrains Mono" } }%%

state "set target as current" as target_current
state "set target" as target
state IDLE {
    run_to_position --> run_to_position : target
}
state MANUAL {
    set_power --> set_power : gamepad input
}

[*] --> target_current
target_current --> IDLE
IDLE --> target : on any dpad input
note right of target
    up = high junction
    left & right = mid junction
    down = low junction
end note
target --> IDLE
IDLE --> MANUAL: on gamepad input w/o touching sensor
MANUAL --> target_current : stopped gamepad input
MANUAL --> target_current : up or down sensor pressed

always generates a state.png with a size of 986x587, whereas without width arguments it comes out as 784x468. This seems to be a cap on size, because 200x300 works just fine but --width 20000 --height 30000 also gives a png of 986x587.

[lufixSch]

@tildejustin I'm observing the same issue any news on that. Did you find a workaround/fix?

[tildejustin]

@tildejustin I'm observing the same issue any news on that. Did you find a workaround/fix?

I don't think I did unfortunately, probably just upscaled the output somehow.

[iosifache]

Upscaling the output is not possible in some scenarios. The quality of the end result may suffer.

What I did in the end is to export to SVG and use another tool to convert from SVG to the rasterized format I want.

Before coming with this idea, I stared debugging Mermaid CLI (by tweaking my Brew-installed Mermaid CLI on /opt/homebrew/./lib/node_modules/@mermaid-js/mermaid-cli/src/index.js) and observed that this specific line doesn't consider the CLI-set dimensions.

mermaid-cli/src/index.js

Line 325 in 46f9581

return { x: Math.floor(react.left), y: Math.floor(react.top), width: Math.ceil(react.width), height: Math.ceil(react.height) }

The Puppeteer configuration (especially the viewport) is correctly populated, but the react variable is not. A patch (that will not consider the ratio of the inner SVG and output according to the CLI-set parameters) consists of populating the width and height parameters in the aforementioned line with the corresponding fields from viewport.