Typing a semicolon creates a new state node instead of being included in the transition text

[anlai46]

Description

When using the live editor to create a state diagram in Mermaid.js, I encountered an issue where typing a semicolon ";" in the text description of a transition results in the semicolon and everything after it being interpreted as the name of a new state node. This could lead users to accidentally create new state nodes and mess up the original layout of the state diagram.

Steps to reproduce

1. Open Mermaid live editor.
2. Create a simple state diagram with transition arrow between two state nodes
3. Type a semicolon in the text description for the transition.
4. See that a new node is created and named with the semicolon and everything after

Screenshots

Expected Behavior:

Actual Behavior:

Code Sample

---
title: lastTtoA
---
stateDiagram 
    direction LR

    classDef badBadEvent 
    fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

    q0 --> q0
    q0 --> q1
    q1 --> q1
    q1 --> qHalt:::badBadEvent: T;A,S

Setup

• Mermaid version: Latest
• Browser and Version: Chrome

Suggested Solutions

• Improve parser so that it recognizes when semicolons are part of the transition text instead of node names
• Maybe we can implement the backslash character "" before the semicolon to show that it's text instead of a node marker

Additional Context

No response

[nirname]

That is because ; is considered to be the end of the line along with \n but ; is optional, so I am not sure if it is possible to introduce this without breaking changes.

Not sure if this eol is used at all, but you can see that ; was excluded from some expressions deliberately, check this

Perhaps we should find some workaround