mermaid-cli icon indicating copy to clipboard operation
mermaid-cli copied to clipboard

Published 20 hours ago • verified publisher icon mermaid-js

New CLI release's ZenUML generation has wrong dimensions for svg's

Open Vwing opened this issue 1 year ago • 5 comments

Description

Using the demo zenuml code provided in the documentation

zenuml
    title Demo
    Alice->John: Hello John, how are you?
    John->Alice: Great!
    Alice->John: See you later!

When I do mmdc -i zen.mmd -o zen.png I get this: zenuml

But when I do mmdc -i zen.mmd -o zen.svg I get this: image

Looks like the shield checkmark in the top-right became very very large, pushing the rest of the zenuml graphic out of frame.

I'm using the latest release, v10.3.1

Steps to reproduce

  1. Create a new file named zen.mmd containing:
zenuml
    title Demo
    Alice->John: Hello John, how are you?
    John->Alice: Great!
    Alice->John: See you later!
  1. Do the mmdc -i zen.mmd -o zen.png command to create a png of the zenuml (you'll see that it's fine)
  2. Do the mmdc -i zen.mmd -o zen.svg command to create an svg of the zenuml (you'll see that it's broken)

Screenshots

No response

Code Sample

No response

Setup

  • Mermaid version: 10.3.1
  • Browser and Version: Chrome, Edge, and Firefox (I tried all three, and the svg looked the same in each of them)

Suggested Solutions

No response

Additional Context

No response

Vwing avatar Aug 14 '23 20:08 Vwing

Here is the svg output that I get, btw:

<svg aria-roledescription="zenuml" role="graphics-document document" style="width: 784px; height: 345px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg undefined :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g/><foreignObject height="100%" width="100%" y="0" x="0"><div style="display: flex;" xmlns="http://www.w3.org/1999/xhtml" id="container-my-svg"><div data-v-app="" id="zenUMLApp-my-svg"><div style="display: inline-block;" class="zenuml p-1 bg-skin-canvas theme-mermaid"><div style="display: none;"><div class="flex flex-nowrap m-2 text-sm"><div class="ml-4 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 bg-green-200 text-green-700 rounded-sm"><svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" class="h-4 w-4"><line y2="15" x2="6" y1="3" x1="6"/><circle r="3" cy="6" cx="18"/><circle r="3" cy="18" cx="6"/><path d="M18 9a9 9 0 0 1-9 9"/></svg><span class="inline-block px-2">({}).VUE_APP_GIT_BRANCH:({}).VUE_APP_GIT_HASH</span></div></div></div><div class="frame text-skin-frame bg-skin-frame border-skin-frame relative m-1 origin-top-left whitespace-nowrap border rounded"><div><div class="header text-skin-title bg-skin-title border-skin-frame border-b p-1 flex justify-between rounded-t"><div class="left hide-export"></div><div class="right flex-grow flex justify-between"><div class="title text-skin-title text-base font-semibold">iPhone App Production</div><div data-v-70836592="" class="hide-export flex items-center"><div data-v-70836592="" data-tooltip="We (the vendor) do not have access to your data. The diagram is generated in this browser." class="tooltip bottom whitespace-normal"><svg data-v-70836592="" viewBox="0 0 214.27 214.27" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" class="fill-current h-6 w-6 m-auto"><path data-v-70836592="" d="M196.926 55.171c-.11-5.785-.215-11.25-.215-16.537a7.5 7.5 0 0 0-7.5-7.5c-32.075 0-56.496-9.218-76.852-29.01a7.498 7.498 0 0 0-10.457 0c-20.354 19.792-44.771 29.01-76.844 29.01a7.5 7.5 0 0 0-7.5 7.5c0 5.288-.104 10.755-.215 16.541-1.028 53.836-2.436 127.567 87.331 158.682a7.495 7.495 0 0 0 4.912 0c89.774-31.116 88.368-104.849 87.34-158.686zm-89.795 143.641c-76.987-27.967-75.823-89.232-74.79-143.351.062-3.248.122-6.396.164-9.482 30.04-1.268 54.062-10.371 74.626-28.285 20.566 17.914 44.592 27.018 74.634 28.285.042 3.085.102 6.231.164 9.477 1.032 54.121 2.195 115.388-74.798 143.356z"/><path data-v-70836592="" d="m132.958 81.082-36.199 36.197-15.447-15.447a7.501 7.501 0 0 0-10.606 10.607l20.75 20.75a7.477 7.477 0 0 0 5.303 2.196 7.477 7.477 0 0 0 5.303-2.196l41.501-41.5a7.498 7.498 0 0 0 .001-10.606 7.5 7.5 0 0 0-10.606-.001z"/></svg></div></div></div></div><div></div><div style="padding-left: 0px; transform: scale(1);" class="zenuml sequence-diagram relative box-border text-left overflow-visible origin-top-left"><div style="min-width: 200px; pointer-events: all;" class="life-line-layer lifeline-layer absolute h-full flex flex-col pt-8 top-0"><div class="container relative grow"><div style="padding-top: 0px; left: 52px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full starter" id="AppOwner"><div style="display: none;" data-v-6efc771f="">60</div><div data-v-6efc771f="" class="line bg-skin-lifeline w0 mx-auto flex-grow w-px"></div></div><div style="padding-top: 0px; left: 172px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full" id="Client"><div style="display: none;" data-v-6efc771f="">180</div><div data-v-6efc771f="" class="line bg-skin-lifeline w0 mx-auto flex-grow w-px"></div></div><div style="padding-top: 0px; left: 292px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full" id="Developer"><div style="display: none;" data-v-6efc771f="">300</div><div data-v-6efc771f="" class="line bg-skin-lifeline w0 mx-auto flex-grow w-px"></div></div><div style="padding-top: 0px; left: 443px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full" id="AppleStore"><div style="display: none;" data-v-6efc771f="">451</div><div data-v-6efc771f="" class="line bg-skin-lifeline w0 mx-auto flex-grow w-px"></div></div></div></div><div style="width: 511px;" class="message-layer pt-24 pb-10"><div style="padding-left: 60px;" class="block"><div class="statement-container mt-1"><div style="width: 240px; transform: translateX(0px);" data-v-40bff5d3="" data-signature="Requirements" class="interaction async text-left text-sm text-skin-message"><div style="border-bottom-style: solid;" data-v-40bff5d3="" class="message border-skin-message-arrow border-b-2 flex items-end text-left"><div class="name group flex-grow text-sm hover:whitespace-normal hover:text-skin-message-hover hover:bg-skin-message-hover"><div class="inline-block relative min-h-[1em]"> Requirements </div></div><div data-v-ca07199a="" class="point text-skin-message-arrow fill flex-shrink-0 transform translate-y-1/2 -my-px"><svg xmlns="http://www.w3.org/2000/svg" data-v-ca07199a="" width="10" height="10" class="arrow stroke-2"><polyline data-v-ca07199a="" points="0,0 10,5 0,10" class="right head fill-current stroke-current"/></svg></div></div></div></div><div class="statement-container mt-1"><div style="width: 240px; transform: translateX(240px);" data-v-40bff5d3="" data-signature="Design &amp; Code" class="interaction async self-invocation text-left text-sm text-skin-message"><div style="border-width: 0px;" data-v-40bff5d3="" data-v-fbc5fa7e="" type="async" class="message self flex items-start flex-col"><label data-v-fbc5fa7e="" class="name group px-px hover:text-skin-message-hover hover:bg-skin-message-hover min-h-[1em]">  Design &amp; Code</label><svg xmlns="http://www.w3.org/2000/svg" data-v-fbc5fa7e="" height="34" width="34" class="arrow text-skin-message-arrow"><polyline data-v-fbc5fa7e="" points="0,2 28,2 28,25 1,25" class="stroke-current stroke-2 fill-none"/><polyline data-v-fbc5fa7e="" points="11,19 1,25 11,31" class="head stroke-current stroke-2 fill-none"/></svg></div></div></div><div class="statement-container mt-1"><div style="width: 151px; transform: translateX(240px);" data-v-40bff5d3="" data-signature="Submit App" class="interaction async text-left text-sm text-skin-message"><div style="border-bottom-style: solid;" data-v-40bff5d3="" class="message border-skin-message-arrow border-b-2 flex items-end text-left"><div class="name group flex-grow text-sm hover:whitespace-normal hover:text-skin-message-hover hover:bg-skin-message-hover"><div class="inline-block relative min-h-[1em]"> Submit App </div></div><div data-v-ca07199a="" class="point text-skin-message-arrow fill flex-shrink-0 transform translate-y-1/2 -my-px"><svg xmlns="http://www.w3.org/2000/svg" data-v-ca07199a="" width="10" height="10" class="arrow stroke-2"><polyline data-v-ca07199a="" points="0,0 10,5 0,10" class="right head fill-current stroke-current"/></svg></div></div></div></div><div class="statement-container mt-1"><div style="width: 151px; transform: translateX(240px);" data-v-40bff5d3="" data-signature="Review Feedback" class="interaction async right-to-left text-left text-sm text-skin-message"><div style="border-bottom-style: solid;" data-v-40bff5d3="" class="message border-skin-message-arrow border-b-2 flex items-end flex-row-reverse right-to-left text-left"><div class="name group flex-grow text-sm hover:whitespace-normal hover:text-skin-message-hover hover:bg-skin-message-hover"><div class="inline-block relative min-h-[1em]"> Review Feedback </div></div><div data-v-ca07199a="" class="point text-skin-message-arrow fill right-to-left flex-shrink-0 transform translate-y-1/2 -my-px"><svg xmlns="http://www.w3.org/2000/svg" data-v-ca07199a="" width="10" height="10" class="arrow stroke-2"><polyline data-v-ca07199a="" points="10,0 0,5 10,10" class="left head fill-current stroke-current"/></svg></div></div></div></div></div></div><div style="min-width: 200px; pointer-events: none;" class="life-line-layer lifeline-layer absolute h-full flex flex-col pt-8 top-0"><div class="container relative grow"><div style="padding-top: 0px; left: 52px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full starter" id="AppOwner"><div style="display: none;" data-v-6efc771f="">60</div><div data-v-6efc771f="" class="participant bg-skin-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 sticky top-8"><div class="h-5 group flex flex-col justify-center"><label class="name leading-4">AppOwner</label></div></div></div><div style="padding-top: 0px; left: 172px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full" id="Client"><div style="display: none;" data-v-6efc771f="">180</div><div data-v-6efc771f="" class="participant bg-skin-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 sticky top-8"><div class="h-5 group flex flex-col justify-center"><label class="name leading-4">AppOwner</label></div></div></div><div style="padding-top: 0px; left: 292px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full" id="Developer"><div style="display: none;" data-v-6efc771f="">300</div><div data-v-6efc771f="" class="participant bg-skin-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 sticky top-8"><div class="h-5 group flex flex-col justify-center"><label class="name leading-4">Developer</label></div></div></div><div style="padding-top: 0px; left: 443px;" data-v-6efc771f="" class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full" id="AppleStore"><div style="display: none;" data-v-6efc771f="">451</div><div data-v-6efc771f="" class="participant bg-skin-participant border-skin-participant text-skin-participant rounded text-base leading-4 flex flex-col justify-center z-10 h-10 sticky top-8"><div class="h-5 group flex flex-col justify-center"><label class="name leading-4">AppleStore</label></div></div></div></div></div></div></div><div class="footer p-1 flex justify-between"><div class="flex items-center"><button class="bottom-1 left-1 hide-export"><svg style="width: 1em; height: 1em; vertical-align: middle; fill: currentcolor; overflow: hidden;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="filter grayscale"><path fill="#BDD2EF" d="M514 912c-219.9 0-398.8-178.9-398.8-398.9 0-219.9 178.9-398.8 398.8-398.8s398.9 178.9 398.9 398.8c-0.1 220-179 398.9-398.9 398.9z m0-701.5c-166.9 0-302.7 135.8-302.7 302.7S347.1 815.9 514 815.9s302.7-135.8 302.7-302.7S680.9 210.5 514 210.5z"/><path fill="#2867CE" d="M431.1 502.4c-0.1 0.3 0.3 0.4 0.4 0.2 6.9-11.7 56.5-89.1 23.4 167.3-17.4 134.7 122.9 153.6 142.3-7.9 0.1-1-1.3-1.4-1.7-0.4-11.9 37.2-49.6 104.9-4.7-155.2 18.6-107.2-127.6-146-159.7-4z"/><path fill="#2867CE" d="M541.3 328m-68 0a68 68 0 1 0 136 0 68 68 0 1 0-136 0Z"/></svg></button><input class="ml-3 mr-1" id="order-display" type="checkbox" /><label class="select-none" title="Numbering the diagram" for="order-display">numbering</label></div><div class="zoom-controls bg-skin-base text-skin-control flex justify-between w-28 hide-export"><button class="zoom-in px-1">+</button><label>100 %</label><button class="zoom-out px-1">-</button></div><div class="invisible"><div style="border-bottom-style: solid;" class="message border-skin-message-arrow border-b-2 flex items-end flex-row-reverse right-to-left text-center"><div class="name group flex-grow text-sm hover:whitespace-normal hover:text-skin-message-hover hover:bg-skin-message-hover"><div class="inline-block relative min-h-[1em]">abcd </div></div><div data-v-ca07199a="" class="point text-skin-message-arrow fill right-to-left flex-shrink-0 transform translate-y-1/2 -my-px"><svg xmlns="http://www.w3.org/2000/svg" data-v-ca07199a="" width="10" height="10" class="arrow stroke-2"><polyline data-v-ca07199a="" points="10,0 0,5 10,10" class="left head fill-current stroke-current"/></svg></div></div></div><a class="brand text-skin-link absolute bottom-1 right-1 text-xs" href="https://zenuml.com">ZenUML.com</a></div></div></div></div></div></foreignObject></svg>

Vwing avatar Aug 14 '23 20:08 Vwing

And when I remove the svg code for the checkmark, I see this: image

Which also isn't how it should look.

Vwing avatar Aug 14 '23 20:08 Vwing

Hi there @Vwing, thanks for pointing out the problem, but this is the mermaid repo, you should have issued in https://github.com/mermaid-js/mermaid-cli.

Yokozuna59 avatar Aug 14 '23 21:08 Yokozuna59

Ah! Sorry about that. I'll remake this issue over there 😅

Vwing avatar Aug 14 '23 23:08 Vwing

My gut feeling is that this is an issue with the CSS not being included in the SVG file, but unfortunately, I don't know about ZenUML to confirm.

As a temporary measure, going to PNG or PDF should work.

If you want an SVG, you might be able to export a PDF file, and then convert it to an SVG using pdf2svg or inkscape, see https://github.com/mermaid-js/mermaid-cli/issues/447#issuecomment-1651388896.

aloisklink avatar Aug 19 '23 15:08 aloisklink