mermaid-cli
mermaid-cli copied to clipboard
mermaid-js
Bad PDF layout
As mentioned here : https://github.com/mermaid-js/mermaid/issues/341?ts=4#issuecomment-725992429
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.
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.
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.
@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).
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...
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.
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 https://github.com/mermaid-js/mermaid/pull/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
Closing based on the comments above. You are welcome to reopen if disagree.
/nvm>npx mmdc -V
9.1.7
/nvm>npx mmdc -i state.mmd -o state.svg
Generating single mermaid chart
/nvm>npx mmdc -i state.mmd -o state.pdf
Generating single mermaid chart
/nvm>npx mmdc -i state.mmd -o state_fit.pdf --pdfFit
Generating single mermaid chart
Seems Ok-ish, still a bit some 'fat' around the graph using "--pdfFit" though...
/nvm>npx mmdc -i state.mmd -o state_fit.pdf --pdfFit Generating single mermaid chartSeems 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.