search

mermaid-js / mermaid-cli

Command line tool for the Mermaid library
MIT License
2.23k stars 210 forks source link

Markdown rendered with error but works fine in mermaid-js #619

Closed wkwi2r closed 7 months ago

wkwi2r commented 7 months ago

Describe the bug Markdown rendered with error in PNG generated by mermaid-cli but rendered correctly when using mermaid-js in browser

To Reproduce

        flowchart LR
        block1["`***Block 1***

        Block 1 description using markdown`"]
        block2["`***Block 2***

        Block 2 description using markdown.
        Line 2.
        Line 3.`"]
        block1-->block2

Expected behavior Refer to screen shots

Screenshots

actual result from mermaid-js:

actual result from mermaid-js

result in generated PNG by mermaid-cli:

Error in generated PNG by mermaid-cli

Desktop:

Additional context Nil

aloisklink commented 7 months ago

Hi @wkwi2r, I believe the issue is that Mermaid doesn't currently support rendering Markdown code blocks to HTML, although the error message isn't very clear.

Markdown assumes that any paragraph starting with four spaces is a code-block, e.g.

This is normal text

    This will be a code block.

This will also be a code block.

If I remove the four spaces from your diagram, it works fine in mermaid-cli and https://mermaid.live/:

```mermaid
flowchart LR
  block1["`***Block 1***

  Block 1 description using markdown`"]
  block2["`***Block 2***

  Block 2 description using markdown.
  Line 2.
  Line 3.`"]
  block1-->block2


Becomes  ![output](https://github.com/mermaid-js/mermaid-cli/assets/19716675/e1ec0ac6-c59d-4d4b-b27a-32112622d7d6)

Maybe Mermaid should automatically remove indentations on multi-line markdown strings, but I know most programming languages don't do this either, so :shrug:, maybe that will cause more confusion for people.