hackmdio / hackmdio/hackmd-io-issues

bug: mermaid sequenceDiagram incorrect spacing between arrows and messageText

Open
#295 0 comments 0 reactions 0 assignees View on GitHub
upstream
Dominant language
No language data
Stars
40
Forks
9
PR merge metrics
No merged PRs in 30d

Description

### 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
```mermaid
%%{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: <
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](https://github.com/mermaid-js/mermaid/issues/883), where user `knsv` comments on Jul 19, 2019 that it is likely because mermaid is initialized before dynamically-loaded fonts are finalized.


#### Screenshot

![image](https://user-images.githubusercontent.com/86862637/159785845-26397963-b8e7-4da8-8c4f-91b2cbe877fe.png)

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](https://user-images.githubusercontent.com/86862637/159785909-911246c0-f86f-4a41-88da-9509fbc8a6ee.png)

#### 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.