Mermaid diagram escape invalid characters

Question

This is my mermaid DFA diagram. I am wondering is there a way to escape special characters I used as state transition text? Thank you

flowchart LR
    INITIAL[Initial State]
    TAG[TAG]
    TAG_OPEN[TAG_OPEN]
    TAG_OPENE[TAG_OPENE]
    OPENEDONE[OPENEDONE]
    ATTR1[ATTR1]
    ATTR2[ATTR2]
    DQSTRING[DQSTRING]
    SQSTRING[SQSTRING]
    CDATA[CDATA]

    INITIAL -->|`{Comment}`| INITIAL
    INITIAL -->|`<![CDATA[`| CDATA
    INITIAL -->|"</"| TAG_OPENE
    INITIAL -->|"<"| TAG_OPEN
    INITIAL -->|`"&"{NAME}";"`| INITIAL
    INITIAL -->|`"&"{NAME}?`| INITIAL
    INITIAL -->|`[^<&]+`| INITIAL
    INITIAL -->|`<<EOF>>`| INITIAL

    TAG_OPEN -->|`{NEWLINE}`| TAG_OPEN
    TAG_OPEN -->|`{WHITESPACE}+`| TAG_OPEN
    TAG_OPEN -->|`{NAME}`| TAG
    TAG_OPEN -->|`.`| YYINITIAL
    TAG_OPEN -->|`<<EOF>>`| YYINITIAL

    TAG_OPENE -->|`{NEWLINE}`| TAG_OPENE
    TAG_OPENE -->|`{WHITESPACE}+`| TAG_OPENE
    TAG_OPEN -->|`{NAME}`| OPENEDONE
    TAG_OPEN -->|`.`| YYINITIAL
    TAG_OPEN -->|`<<EOF>>`| YYINITIAL

    OPENEDONE -->|`{NEWLINE}`| OPENEDONE
    OPENEDONE -->|`{WHITESPACE}+`| OPENEDONE
    OPENEDONE -->|`">"`| INITIAL
    OPENEDONE -->|`.`| INITIAL
    OPENEDONE -->|`<<EOF>>`| INITIAL

    TAG -->|`{NEWLINE}`| TAG
    TAG -->|`{WHITESPACE}+`| TAG
    TAG -->|`{NAME}+`| ATTR1
    TAG -->|`">"`| INITIAL
    TAG -->|`"/>"`| INITIAL
    TAG -->|`.`| INITIAL
    TAG -->|`<<EOF>>`| INITIAL

    ATTR1 -->|`{NEWLINE}`| ATTR1
    ATTR1 -->|`{WHITESPACE}+`| ATTR1
    ATTR1 -->|`"="`| ATTR2
    ATTR1 -->|`.`| YYINITIAL
    ATTR1 -->|`<<EOF>>`| YYINITIAL

    ATTR2 -->|`{NEWLINE}`| ATTR2
    ATTR2 -->|`{WHITESPACE}+`| ATTR2
    ATTR2 -->|`\"`| DQSTRING
    ATTR2 -->|`\'`| SQSTRING
    ATTR2 -->|`.`| YYINITIAL
    ATTR2 -->|`<<EOF>>`| YYINITIAL

    DQSTRING -->|`\"`| TAG
    DQSTRING -->|`"&"{NAME}";"`| DQSTRING
    DQSTRING -->|`[^&\"]+`| DQSTRING
    DQSTRING -->|`"&"{NAME}?`| TAG
    DQSTRING -->|`<<EOF>>`| INITIAL

    SQSTRING -->|\'| TAG
    SQSTRING -->|`"&"{NAME}";"`| SQSTRING
    SQSTRING -->|`[^&\']+`| SQSTRING
    SQSTRING -->|`"&"{NAME}?`| TAG
    SQSTRING -->|`<<EOF>>`| INITIAL

    CDATA -->|`]]>`| INITIAL
    CDATA -->|`]]`| CDATA
    CDATA -->|`]`| CDATA
    CDATA -->|`[^>\]]+`| CDATA
    CDATA -->|`<<EOF>>`| CDATA

Error:

Error: Parse error on line 13:
...] INITIAL -->|`{Comment}`| INITIAL
---------------------^
Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'DIAMOND_START'

Answer 1

I've found that mermaid responds best with double quotes as the main escape mechanism, and then use #--; for other escapes that give you a problem, for example: #quot; for " or #0040; for (

In your example:

flowchart LR
INITIAL[Initial State]
TAG[TAG]
TAG_OPEN[TAG_OPEN]
TAG_OPENE[TAG_OPENE]
OPENEDONE[OPENEDONE]
ATTR1[ATTR1]
ATTR2[ATTR2]
DQSTRING[DQSTRING]
SQSTRING[SQSTRING]
CDATA[CDATA]

INITIAL -->|"{Comment}"| INITIAL
INITIAL -->|"<![CDATA["| CDATA
INITIAL -->|"</"| TAG_OPENE
INITIAL -->|"<"| TAG_OPEN
INITIAL -->|"#quote;{NAME};"| INITIAL
INITIAL -->|"#quote;{NAME}?"| INITIAL
INITIAL -->|"[^<&]+"| INITIAL
INITIAL -->|`<<EOF>>`| INITIAL

TAG_OPEN -->|"{NEWLINE}"| TAG_OPEN
TAG_OPEN -->|"{WHITESPACE}+"| TAG_OPEN
TAG_OPEN -->|"{NAME}"| TAG
TAG_OPEN -->|`.`| YYINITIAL
TAG_OPEN -->|`<<EOF>>`| YYINITIAL

TAG_OPENE -->|"{NEWLINE}"| TAG_OPENE
TAG_OPENE -->|"{WHITESPACE}+"| TAG_OPENE
TAG_OPEN -->|"{NAME}"| OPENEDONE
TAG_OPEN -->|`.`| YYINITIAL
TAG_OPEN -->|`<<EOF>>`| YYINITIAL

OPENEDONE -->|"{NEWLINE}"| OPENEDONE
OPENEDONE -->|"{WHITESPACE}+"| OPENEDONE
OPENEDONE -->|">"| INITIAL
OPENEDONE -->|`.`| INITIAL
OPENEDONE -->|`<<EOF>>`| INITIAL

TAG -->|"{NEWLINE}"| TAG
TAG -->|"{WHITESPACE}+"| TAG
TAG -->|"{NAME}+"| ATTR1
TAG -->|">"| INITIAL
TAG -->|"/>"| INITIAL
TAG -->|`.`| INITIAL
TAG -->|`<<EOF>>`| INITIAL

ATTR1 -->|"{NEWLINE}"| ATTR1
ATTR1 -->|"{WHITESPACE}+"| ATTR1
ATTR1 -->|"="| ATTR2
ATTR1 -->|`.`| YYINITIAL
ATTR1 -->|`<<EOF>>`| YYINITIAL

ATTR2 -->|"{NEWLINE}"| ATTR2
ATTR2 -->|"{WHITESPACE}+"| ATTR2
ATTR2 -->|"&quote;"| DQSTRING
ATTR2 -->|"'"| SQSTRING
ATTR2 -->|`.`| YYINITIAL
ATTR2 -->|`<<EOF>>`| YYINITIAL

DQSTRING -->|"&quote;"| TAG
DQSTRING -->|"&{NAME};"| DQSTRING
DQSTRING -->|"[^&#quote;]+"| DQSTRING
DQSTRING -->|"&{NAME}?"| TAG
DQSTRING -->|`<<EOF>>`| INITIAL

SQSTRING -->|\'| TAG
SQSTRING -->|"&{NAME};"| SQSTRING
SQSTRING -->|"[^&\']+"| SQSTRING
SQSTRING -->|"&{NAME}?"| TAG
SQSTRING -->|`<<EOF>>`| INITIAL

CDATA -->|"]]>"| INITIAL
CDATA -->|"]]"| CDATA
CDATA -->|"]"| CDATA
CDATA -->|"[^>\]]+"| CDATA
CDATA -->|`<<EOF>>`| CDATA