Bad PDF layout

[Kochise]

As mentioned here : mermaid-js/mermaid#341

Since the SVG output is still corrupt as of '8.8.2-beta.8', I tried the PDF way, just to see, and while the output is correct, the layout is wrong, hence I cannot import the PDF instead of the SVG (LaTeX destination).

expected : generate a SVG file from mermaid to get imported as a figure in LaTeX
actual : SVG works in browser, not in Inkscape, hence translation for LaTeX outputs something weird

temporary fix : use PDF output
expected : figure to fill the page, or page shrink around the picture
actual : PDF layout is wrong, letter size with figure in top left corner

See attached file.

state.pdf

[MindaugasLaganeckas]

I think this can help you: https://github.com/mermaid-js/mermaid-cli/releases/tag/8.8.0. Here we introduced an option to fit the diagram into PDF: --pdfFit

Please, let me know if that helps.

[Kochise]

Ok, I'll definitively look into that, currently I used miktex's pdfcrop that do the job quite well (like doing a 'standalone' document) but it requires an extra step in my tex package. And perl as a dependency.

[MindaugasLaganeckas]

@Kochise : can we close this one? --pdfFit solves the pdf layout problem. SVG output is corrupt bacause of the upstream dependency (not something we can fix in the CLI project).

[Kochise]

I just tested, it's all ok, thanks a many :)

[Kochise]

Hi, reopening the issue, I updated mermaid and despite the --pdfFit flag, the "fat" around the diagram returns. It's like the page is now square shaped instead to fit perfectly around the diagram. Hence when setting a width to the picture, it includes the "fat" and it gets "squeezed" and reduced, much like I would have set the height instead.

Btw, I checked the svg output, it also features the "fat" as well, instead to be completely on the left as before you get a "margin" now. Maybe a clue...

[wiesener]

Hi,
I have to admit that the pdfFit option is really nice, but it leaves for sequency diagrams a white space at the top and bottom. So it does not completely crop the pdf. Is there a way to realize this?

Current version: 8.9.0

Here is an example:

cat << EOF | mmdc -o out.pdf --pdfFit sequenceDiagram autonumber participant PURCH participant WH participant QA participant PROD Note over PURCH,QA: Foobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PURCH ->> WH: "eFoobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA ->> QA: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PURCH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" WH ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA ->> QA: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" Note over WH,PROD: Foobar" WH ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" Note over WH,PROD: "Foobar WH ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" Note over WH,PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" WH ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" Note over WH,PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" WH ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" Note over WH,PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" WH ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA ->> QA: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" PROD ->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA --> QA: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" alt "ok" QA --> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" WH -->> QA: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" else "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA --> PROD: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" QA -->> WH: "FoobarFoobarFoobarFoobarFoobarFoobarFoobarFoobar" end EOF

I realized that it scales with the amount of text.

[aloisklink]

Hi both @Kochise and @wiesener, it might be worth trying out mermaid-cli v9.1.7.

It contains the latest changes from Mermad v9.1.7 (PR mermaid-js/mermaid#3364), and it has removed some white space at the top/bottom for some graphs, for example:

It looks like the sequence.mmd diagram test case has also had it's white space at the top and bottom removed, see https://percy.io/Mermaid/mermaid-cli/builds/21877564/changed/1219608569?browser=chrome&browser_ids=22%2C23&subcategories=unreviewed%2Cchanges_requested&viewLayout=side-by-side&viewMode=new&width=784&widths=124%2C155%2C208%2C240%2C313%2C383%2C456%2C774%2C784

[Kochise]

Will definitively check into that asap.

[MindaugasLaganeckas]

@Kochise do you have an update on the case?

[MindaugasLaganeckas]

Closing based on the comments above. You are welcome to reopen if disagree.

[Kochise]

/nvm>npx mmdc -V
9.1.7

state.mmd.txt

/nvm>npx mmdc -i state.mmd -o state.svg
Generating single mermaid chart

state.svg

/nvm>npx mmdc -i state.mmd -o state.pdf
Generating single mermaid chart

state.pdf

/nvm>npx mmdc -i state.mmd -o state_fit.pdf --pdfFit
Generating single mermaid chart

state_fit.pdf

Seems Ok-ish, still a bit some 'fat' around the graph using "--pdfFit" though...

[aloisklink]

/nvm>npx mmdc -i state.mmd -o state_fit.pdf --pdfFit
Generating single mermaid chart

state_fit.pdf

Seems Ok-ish, still a bit some 'fat' around the graph using "--pdfFit" though...

Awesome! I don't think we can further get rid of the 'fat' completely (at least not without using some extra libraries), since it's built into the SVG generated by mermaid.

If you're using LaTeX, I'd recommend trying something like https://www.ctan.org/pkg/pdfcrop (often installed by default with LaTeX) to trim the extra whitespace.