Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mmdc removing leading and trailing newlines of mermaid code blocks #413

Closed
craigmac opened this issue Oct 27, 2022 · 3 comments · Fixed by #455
Closed

mmdc removing leading and trailing newlines of mermaid code blocks #413

craigmac opened this issue Oct 27, 2022 · 3 comments · Fixed by #455

Comments

@craigmac
Copy link

Describe the bug
mmdc removes mermaid code blocks as intended, but messes with surround empty lines (one above and one below the code block).

To Reproduce
Steps to reproduce the behavior:

Sample markdown (not sure if this will render correctly here, but added 4 backticks for the embedded mermaid sequence):

### Player end of stream

````mermaid
sequenceDiagram
  accTitle: Player end of stream
  accDescr: Sequence diagram
participant Player Engine
participant ES Player
Note over Player Engine, ES Player: At end of stream
Player Engine->>+ES Player: SetLastFrameAppended()
loop
ES Player->>ES Player: Play remaining buffer
ES Player->>-Player Engine: CurrentTimeUpdated.Emit()
end
ES Player->>Player Engine: EndOfStream.Emit()
Player Engine->>ES Player: Pause()

---

Expected behavior

Replaced like this:

### Player end of stream

![Player end of stream](./temp-5.svg)
 
---

Actual behavior

### Player end of stream
![diagram](./temp-5.svg)
---

Notice the newlines have been removed - one just below the markdown heading, and one after the ![diagram] line: this causes markdownlint errors and also a YAML parsing error because the --- line doesn't have an empty line above and below it, and so the parser thinks we are trying to start a YAML block.

Desktop (please complete the following information):

  • OS: macOS latest
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
@MindaugasLaganeckas
Copy link
Member

@craigmac : please, provide the version of mermaid-cli. Another thing, be aware, that MacOS users need to use our provided docker image, because of #288

@craigmac
Copy link
Author

My mistake, the OS is actually docker: pandoc/latex:2.18-ubuntu container with mermaid-cli version 9.1.7

@justincjahn
Copy link

I'm experiencing the same issue on Windows using version 9.2.2:

Source File:

# Overview

Hello, World!

```mermaid
graph TD
    PSTN -->|Inbound Call| P1[PRI 1] --> CUBE
    PSTN -->|Inbound Call| P2[PRI 2] --> CUBE
    PSTN -->|Inbound Call| P3[PRI 3] --> CUBE

    CUBE(CUBE) -->CUBE_ROUTE_CALL{Route Call}

    CUBE_ROUTE_CALL -->|eFax| XMEDIUS(XMedius XMFax)
    CUBE_ROUTE_CALL -->|Voice| CUCM(CUCM)

    CUCM --> CUCM_ROUTE_CALL{Route Call}

    CUCM_ROUTE_CALL -->|IVR| UCCX(UCCX)
    CUCM_ROUTE_CALL -->|Voicemail| CUC(CUC)
    CUCM_ROUTE_CALL -->|Endpoint| DEVICE[End Device]
```


## Testing

Test
npm i @mermaid-js/mermaid-cli
.\node_modules\.bin\mmdc -i .\tmp\MASTER.md -o .\tmp\MASTER_formatted.md

Produces:

# Overview

Hello, World!
![diagram](./MASTER_formatted-1.svg)
## Testing

Test

I was able to work around the issue by surrounding the block with comments:

# Overview

Hello, World!

<!---->
```mermaid
graph TD
    PSTN -->|Inbound Call| P1[PRI 1] --> CUBE
    PSTN -->|Inbound Call| P2[PRI 2] --> CUBE
    PSTN -->|Inbound Call| P3[PRI 3] --> CUBE

    CUBE(CUBE) -->CUBE_ROUTE_CALL{Route Call}

    CUBE_ROUTE_CALL -->|eFax| XMEDIUS(XMedius XMFax)
    CUBE_ROUTE_CALL -->|Voice| CUCM(CUCM)

    CUCM --> CUCM_ROUTE_CALL{Route Call}

    CUCM_ROUTE_CALL -->|IVR| UCCX(UCCX)
    CUCM_ROUTE_CALL -->|Voicemail| CUC(CUC)
    CUCM_ROUTE_CALL -->|Endpoint| DEVICE[End Device]
```
<!---->


## Testing

Test

Which produced the following:

# Overview

Hello, World!

<!---->
![diagram](./MASTER_formatted-1.svg)
<!---->


## Testing

Test

Hope that helps!

aloisklink added a commit to aloisklink/mermaid-cli that referenced this issue Dec 24, 2022
Handles empty newlines before and after diagrams in Markdown.

For example, the following Markdown:

````markdown
My text.

```mermaid
  my diagram
```
````

Should get converted to:

```markdown
My text.

![diagram](./my-diagram)
```

However, currently, the empty newline is removed.
We can fix this by making sure that our Regex ignores newlines outside
of the Mermaid diagram code.

Fixes: 9d7b4b2
Fixes: mermaid-js#413
MindaugasLaganeckas pushed a commit that referenced this issue Jan 2, 2023
Handles empty newlines before and after diagrams in Markdown.

For example, the following Markdown:

````markdown
My text.

```mermaid
  my diagram
```
````

Should get converted to:

```markdown
My text.

![diagram](./my-diagram)
```

However, currently, the empty newline is removed.
We can fix this by making sure that our Regex ignores newlines outside
of the Mermaid diagram code.

Fixes: 9d7b4b2
Fixes: #413
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants