Unexpected empty node in Mermiad stateDiagram with a choice, fork or join

[dex-code-one]

SUMMARY

There's an unexpected empty node in a Mermaid stateDiagram which has a <<choice>> directive. This isn't seen in the live mermaid editor, nor in VSCode.

Normally I would chalk this up to a Mermaid bug, but I'm only seeing it in MM.

MM has additional empty node in the top right of the diagram

VSCode does not have this

Live editor does not have this

Link to the live editor LINK

I'm guessing it has something to do with the double << and >>? Incidentally, if I don't use <<choice>> and just use normal nodes, this doesn't show up.

It looks like it also happens with <<fork>>

... and <<join>>

[RickStrahl]

Looks like it's a problem with the << >> syntax - most likely encoding. Did you try this with the triple tick syntax instead (like in your Code example)?

[RickStrahl]

So digging into this it looks like the HTML block that is generated has to be HTML encoded.

MM now generates an unencoded block:

<div class="mermaid">
%%{init: {'theme': 'default'}%%
stateDiagram-v2
	state c <<choice>>
	[*] --> c
	c --> TRUE : Yes
	c --> FALSE : NO
</div>

which produces the extra node. If changed to this:

<div class="mermaid">
%%{init: {'theme': 'default'}%%
stateDiagram-v2
	state c &gt;&gt;choice&lt;&lt;
	[*] --> c
	c --> TRUE : Yes
	c --> FALSE : NO
</div>

then it works.

This should be an easy fix - as long as that doesn't break something else 😄

FWIW, if you use the <div class="mermaid"> syntax you are expected to encode this yourself. If you use the triple tick syntax:

```mermaid
%%{init: {'theme': 'default'}%%
stateDiagram-v2
	state c <<choice>>
	[*] --> c
	c --> TRUE : Yes
	c --> FALSE : NO
```

it should work (with the fix).

[dex-code-one]

Interesting...

Yeah, the triple tick was the first thing I tried, I think I even started to mention that in my issue text, but for some reason I trimmed that out. Either way, it had the same effect, with or without.

Hopefully this only fixes and doesn't unfix something else 😄

[RickStrahl]

This is fixed in the latest update ( 2.3.16+)

[dex-code-one]

So if I use the DIV syntax, it's still there in v2.3.16
If I use the triple-tick syntax, it looks like it should

This is expected behavior, yes? Your earlier statement about needing to encode any of that ourselves when using the DIV syntax is kinda implying that the triple-tick syntax is the preferred syntax?

I've been using the DIV syntax because that's what the default mermaid snippet you have uses, plus I prefer the white formatting given to the DIV code than the light-blue formatting of the tick syntax, but I'll use whatever works :)

Thanks!

[RickStrahl]

Correct. triple syntax encodes, <div> syntax does not as it's raw HTML that you have to provide. The <div> syntax should follow exactly what the Mermaid documentation shows (ie. encoded text - which I don't remember seeing mentioned in the docs incidentally 😄.

The default snippet shows both, but it's been updated either way.

Official documentation is here:

https://markdownmonster.west-wind.com/docs/_5ef0x96or.htm