Sequence Diagram - Create and Destroy Directives break if syntax is not exactly right

TonyBrookILSTU commented 9 months ago

Description

This is a duplicate of https://github.com/mermaid-js/mermaid-live-editor/issues/1294 but I think the issue is in the core mermaid functionality, not in how the live site handles it.

With the new create/destroy directives for sequence diagrams, the syntax is extremely precise:

you must put the directive right before the first/final use of a participant/actor
you must exactly match the name of the participant/actor being created/destroyed
you cannot reuse existing participant/actor names

These requirements are not the clearest in the documentation, especially when it comes to the order of typing things. As a result, if you type create participant T before you type A ->> T: example then the code will error and say Error: The created participant T does not have an associated creating message after its declaration. Please check the sequence diagram. Once this error has occurred, the error will persist in the cache until it is cleared.

This presents a serious problem with the functionality of the Live site (and will likely also impact other live viewers like The VS Code extension when it is updated).

The Live site's "auto sync" mode refreshes the diagram after every keypress. In practice, this means that if you manually type in create participant example - then the code would detect create participant e and then lock up with an error.

I spent about 15 minutes trying to figure out why I kept getting the error for a name I had never used in my diagram, and had deleted all references to.

This issue does not surface if you turn off auto-sync, or if you copy and paste correct code into the editor.

Fundamentally, I believe this is an issue with how the creation / destroy directives are handled. The program should be able to gracefully handle directives that do not have an associated message yet (sort of like putting participant or actor at the beginning of the diagram), and ideally it should handle having the create/destroy being placed anywhere in the diagram (which will be important for #4707 to be implemented properly).

Steps to reproduce

Open the Live Editor.
Ensure Auto-Sync is on. (Edit: This may not be necessary as code syntax checking happens with every keypress, even with sync off.)
Hand Type the following code or something similar (slow down around "Cat")

sequenceDiagram
A->>B: This is a test
create participant Cat
A->>Cat: This is another test
Cat->>B: Return
A->>B: 
A->>D: Test
destroy D 
D->>A: Return
A->>Cat: Test2

(Alternatively, you can paste this code and then delete letters from "Cat" and then re-add them)

Observe how the live pane gives an error no matter what you do from this point on, until the page is reloaded.

Screenshots

No response

Code Sample

No response

Setup

Mermaid version: 10.3.0
Browser and Version: Firefox v117.0

Additional Context

No response

fstamour commented 9 months ago

This issue does not surface if you turn off auto-sync, or if you copy and paste correct code into the editor.

I concur, I also lost quite some time figuring this out... Looking up this error brought up this issue and I was able to "fix it" by:

disabling auto-sync
opening a new editor completely
pasting my code
sync'ing manually with M-Ret (alt + enter)

Visible-Radio commented 5 months ago

Yeah, running into this while writing sequence diagrams inline in markdown and using the vscode markdown preview.

svorc-sefira commented 4 months ago

Can confirm the same behaviour in IntelliJ Mermaid plugin - closing the diagram a reopening it after having the usage right fixes the issue.

davidwrpayne commented 2 months ago

I can confirm this issue also affects the Mermaid plugin in Notion

mermaid-js / mermaid