mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.06k stars 6.39k forks source link

Sequence Diagram: Boxes are not working in Live Editor #4098

Open FOSSforlife opened 1 year ago

FOSSforlife commented 1 year ago

Description

I copied the box example from the docs into the live editor (link) and it gave me this error:

Error: Parse error on line 2:
... Purple Alice & John participant A
-----------------------^
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'NEWLINE'

Steps to reproduce

  1. Go to mermaid.live
  2. Copy the code sample from the Grouping / Box section on the Sequence Diagram page
  3. Paste into mermaid.live
  4. Get error

I also tried indenting all the lines after sequenceDiagram and that didn't work either.

Screenshots

image

Code Sample

sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charly ?
    B->>C: Hello Charly, how are you?

Setup

Desktop

Additional Context

No response

eholman commented 1 year ago

I'm experiencing the same thing.

Maybe this issue have to be raised here, since it's having its own repo? https://github.com/mermaid-js/mermaid-live-editor

Maya084 commented 1 year ago

I am having the same issue, but it's not only in the live editor. It also happens in vscode (I am using Markdown Preview Mermaid Support extension) and in MkDocs running locally.

eholman commented 1 year ago

In the 2023.1 EAP 5 version of Jetbrains Rider/IntelliJ IDEA the box group works as expected. The downside is that there is no possibility to export the image...

JKomp commented 1 year ago

It appears that box has fallen out of the available. commands. Here's a screenshot of what Mermaid Live 9.3.0 allows as commands:

MermaidLIve-NoBox
eholman commented 1 year ago

@JKomp the thing is that the Live editor uses 9.3.0 while the Box functionality was released with 9.4.0

Maybe they jump right away to v10, since it's just released :-)

Maya084 commented 1 year ago

@eholman Thanks for that. Now that I looked into it, material for mkdocs has mermaid v9.3.0 so it explains why it doesn't work for me.

mjbrisebois commented 1 year ago

The live editor is rendering boxes but the image links result in "invalid encoded code"

Example

jgreywolf commented 10 months ago

Is this issue still open?

JKomp commented 10 months ago

Seems to be working now.