Skip to content

bug: mermaid sequenceDiagram incorrect spacing between arrows and messageText #295

Open
@grokspawn

Description

@grokspawn

Is this a hackmd.io issue?

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
Loading

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions