Sequence diagram generation adds lots of white space at the top and bottom

[Xendar]

Describe the bug

I am giving a try to Mermaid through AsciiDoctor, so far so good.
I added a sequence diagram, which is a bit big, and after generation I get lots of white space at the top and the bottom of the image (tested both png and svg).

To Reproduce

Copy/paste this diagram in the live editor:

sequenceDiagram
  participant client as  Teams Client
  participant backend as  Teams Backend
  participant db as  Teams Backend DB
  participant kc as Keycloak
  participant cmc as cMC

  note over db:2 caches<br/>C1 - verifcode: teamsId<br/>C2 - teamsIdOrVerifCode: [JWT, refresh]
  client->>client: User click on "C"
  client->>backend: command({"listTrip",teamsId}
  backend->>db: getC2(teamsId)
  db->>backend: JWT, refresh

  alt JWT does not exist
  backend->>backend: generateVerifCode(teamsId)
  backend->>db: storeC1(verifCode: teamsId)
  backend->>client: {signInURL}
  client->>kc: signInURL
  kc->>client: HTML LoginForm
  client->>client: JS.notify("loaded")
  client->>client: User complete login/pass
  client->>kc: signInURL(login, pass)
  kc->>kc: generateCode(login, pass)
  kc->>client: redirect(code)
  client->>backend: redirect(code)
  backend->>kc: getToken(code)
  kc ->>backend: JWT, refresh
  backend->>db: storeC2(verifCode: [JWT, refresh])
  backend->>client: HTML(verifCode)
  client->>client: JS.notify("success",verifCode)
  client->>backend: command({"listTrip",teamsId, verifCode})
  backend->>db: getC1(verifCode)
  db->>backend: teamsId
  backend->>backend: checkTeamsId(teamsId)
  backend->>db: getC2(verifCode)
  db->>backend: JWT, refresh
  backend->>db: storeC2(teamsId: [JWT, refresh])
  backend->>db: removeC1C2(verifCode)
  else JWT exist but has expired
  backend->>kc : getToken(refresh)
  kc ->>backend: JWT, refresh
  backend->>db: storeC2(teamsId: [JWT, refresh])
  end

  backend ->>cmc: getTrips(JWT)
  cmc->>backend : {trips}
  backend ->>client : {trips}

Expected behavior
The diagram is generated, with a reasonable cropping of white space.
For instance, removing the whole alt block gets a "normal" cropping.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 87

Additional context

None

[Xendar]

Actually, increasing explicitly the width of the image solves somehow the issue...

[rbans96]

Hi Xendar, I am facing the similar issue, lots of whitespaces at the top and bottom on the sequence diagram generated.
I also tried changing the width/height of the image, but it doesn't change the image.
Could you add some details here how did you resolve this? Thanks!

[Xendar]

Hi Xendar, I am facing the similar issue, lots of whitespaces at the top and bottom on the sequence diagram generated.
I also tried changing the width/height of the image, but it doesn't change the image.
Could you add some details here how did you resolve this? Thanks!

Sorry for the late reply...
I do not manage to fix it via the live editor, but I used this in my adoc file:
[mermaid, diagram, png, width=2000]

[hicksjacobp]

I found that by setting useMaxWidth to false also removes the top and bottom margins. By default it is set to true. See https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults.

Also duplicate of #1758?