hackmd-io-issues icon indicating copy to clipboard operation
hackmd-io-issues copied to clipboard

bug: mermaid sequenceDiagram incorrect spacing between arrows and messageText

Open grokspawn opened this issue 3 years ago • 0 comments

Is this a hackmd.io issue?

  • [X] Yes, the bug happens on https://hackmd.io
  • [ ] No. If it's a self-hosted CodiMD instance, please fire up the issue in the repo of CodiMD: https://github.com/hackmdio/codimd

Read our Official tutorial

It's on https://hackmd.io/c/tutorials/

或是中文版 https://hackmd.io/c/tutorials-tw/

What's the problem

Current behaviour

With the diagram

%%{init: {'securityLevel': 'strict', 'theme':'forest'}}%%

sequenceDiagram
    autonumber
    participant User
    participant GHRepository
    participant GHAction
    participant CoCRepository
    participant GHUpstreamPRQueue
    User--xGHRepository: clone repository to local
    activate User
    activate GHRepository
    User->>GHRepository: push veneer changes to GitHub from local
    GHRepository--xGHAction: <<trigger>
    activate GHAction
    GHAction->>GHAction: Generate FBC from veneer
    GHAction->>GHAction: validate FBC
    GHAction->>CoCRepository: Open CoC PR for FBC for User
    deactivate GHAction
    deactivate GHRepository
    deactivate User

the rendering displays the messageText with an awkward spacing that makes it look like the messageText belongs to the previous arrow, with extra undesirable vertical spacing.

Note: This diagram is rendered correctly by github, so please look below at the screen captures for the hackmd.io behavior

This appears to be related to this mermaid issue discussion, where user knsv comments on Jul 19, 2019 that it is likely because mermaid is initialized before dynamically-loaded fonts are finalized.

Screenshot

image

Provide steps to reproduce:

  1. In an active hackmd, paste in the supplied mermaid block
  2. see awkward spacing :(

(script and images from the note https://hackmd.io/EIWEwm28TZiwHUG25cmLBw)

Expected behaviour

(rendered via mermaid.live): image

Environment

I use HackMD on:

Desktop

  • OS: MacOS, linux, windows
  • Browser: firefox
  • Browser Version: 90.0.2

Additional context

Add any other context about the problem here.

grokspawn avatar Mar 23 '22 20:03 grokspawn