Love the mermaid integration, and being able to easily type out charts has been a game-changer for the way that I plan out software. However, there is a small rendering issue that makes the notes substantially less enjoyable to use, which is excessive whitespace padding around the charts:
So yeah, although my diagrams are "wide", the chart area is somehow extra tall. Should I just file a github ticket?
Joplin: Joplin 1.4.7 (prod, darwin) Revision: 4c5e044 (master)
Can we have the code to reproduce this?
Yep, thanks:
sequenceDiagram
autonumber
title: SEED: Ethereum > Matic Bridge Flow
participant P as 🐨<br>Player
participant SEED as Ethereum<br>SEED
participant RCM as Ethereum<br>Root Chain Manager
participant EPC as Ethereum<br>Predicate Contract
participant CCM as Matic<br>Child Chain Manager
participant MSEED as Matic<br>SEED
rect rgba(166, 107, 208, 0.1)
note over P, SEED: First Time Approval Setup
P ->>+ SEED: Approve Predicate Contract<br>(Ethereum, approve call)
SEED -->>- P: Approve Confirmed
end
P ->>+ RCM: Deposit SEED to Lock<br>(Ethereum, depositFor call)
rect rgba(255, 190, 68, 0.1)
note over EPC, RCM: Lock Ethereum SEED
RCM ->>+ EPC: Use Predicate<br>(Token-specific Locking Logic)
EPC -->>- RCM: Lock Successful
end
RCM ->>+ CCM: State Sync SEED<br>(Ethereum to Matic)
rect rgba(120, 210, 130, 0.1)
note over CCM, MSEED: Mint Matic SEED<br>for locked Ethereum SEED
CCM ->>+ MSEED: Mint Equal SEED<br>(Matic, deposit call)
end
sequenceDiagram
autonumber
title: SEED: Matic > Ethereum Bridge Flow
participant P as 🐨<br>Player
participant MSEED as Matic<br>SEED
participant RCM as Ethereum<br>Root Chain Manager
participant EPC as Ethereum<br>Predicate Contract
participant SEED as Ethereum<br>SEED
rect rgba(166, 107, 208, 0.1)
note over P, MSEED: Burn Matic SEED
P ->>+ MSEED: Burn SEED<br>(Matic, withdraw call)
MSEED -->>- P: Burn Confirmed
end
rect rgba(255, 190, 68, 0.1)
note over P: Wait for Checkpoint
P ->> P: Wait 10-30 min for Burn<br>to be Checkpointed to Ethereum
end
P ->>+ RCM: "Exit" Matic<br>(Submit proof of burn to unlock)
rect rgba(120, 210, 130, 0.1)
note over RCM, SEED: Unlock (Exit) SEED
RCM ->>+ EPC: Exit via Predicate<br>(Token-specific Unlocking Logic)
EPC ->>+ SEED: Transfer Tokens to Player<br>(Ethereum, safeTransfer call)
end
Though it looks like this may have been by-design, to make the split editor's heights line up between markdown and split editing? That vaguely makes sense for the split view, but definitely makes the rendered view look weird
I have a problem with my dev env right now. And I'm rather busy at work. I'll look at it in the evening.
We should also check what the latest mermaid code does. They have a kitchen sink env.
Here's the result of that note on Android, for completeness
Thank you, @tessus — edited my original comment to mention which Joplin version I'm running (latest beta)
In the live editor it looks fine I think.
This is version 8.8.3 and we are using 8.8.1.
So it could be an upstream bug that has been fixed already. Unfortunately I can't upgrade my local Mermaid to test that theory, because my dev env is shot.
Honestly I'm not sure about that. If you resize the window such that it emulates Joplin's side-by-side view, you get this:
Which does look an awful lot like my screenshots above. Would suck if this is a dumb upstream issue
It never came to me to resize the window. So now I think it is an upstream bug that hasn't been fixed.
Afaik there's nothing in the Joplin code that would add extra space at the top and bottom.
I guess someone will have to open a bug report with Mermaid. I hope I get around to it the next few days.
As noted here: Massive whitespace above and below graph · Issue #1984 · mermaid-js/mermaid · GitHub it seems like Mermaid is adding a height attribute to the SVG element that it maybe shouldn't.
It's possible to work around this in Joplin for now by adding this:
.mermaid svg { height: auto; }
to userstyle.css in advanced appearance settings.
(or you could add the above CSS in each individual document enclosed in <style></style> tags.)
Thanks, I have the same problem but haven't looked into it. I prefer putting the css at the start of each note for now as it will work cross-platform
<style>.mermaid svg { height: auto; }</style>