Mermaid: State Diagram id / description display inconsistent with PlantUML

[hopoverflow]

State Diagram nodes that have a description are displayed in a manner inconsistent with PlantUML and with other areas of mermaid, in that the node id is suppressed and the description goes where the id would go were there no description. In PlantUML, the node id stays, a line is drawn below it, and the description is displayed below the line. Other mermaid diagram types do something similar, where the node id is displayed, and information specified after the ":" is additive; the id is not suppressed.

This is why the documentation for State Diagrams has so many nodes displayed with two lines at the bottom: the area where the description ought to go is blank, and the description is where the node id ought to be. It doesn't really look right, and I don't think it's intentional.

To Reproduce
Steps to reproduce the behavior:

1. Create a StateDiagram
2. Specify a node with node_id : node description
3. Render diagram. Note that the node_id is not visible, and the node description is above the additional horizontal line.

Expected behavior
The node_id should display over a horizontal line, and the node description should display below that line.

Additional context
Maybe it's as simple as in the diagrams/state/shapes.js file, changing line 81 from

.text(stateDef.descriptions[0]);

to:

.text(stateDef.id);

and then inserting this after line 96:

.text(stateDef.descriptions[0]);

[hopoverflow]

I am using mermaid mainly via the Visual Studio Code plugin Markdown Preview Mermaid. In that application's bundle, I de-minified the js, found where the shapes.js items were, and made the changes listed above. And that did it: the node id's stayed visible, and the descriptions were shown below a horizontal line separating them from the ids. So if one agrees that this is a problem, then the fix is listed above.