State diagram: a problem with state names (state descriptions, the ":" operator)

[Matthew0x]

Code Sample

stateDiagram-v2
state Cluster {
    state Node1: Node {
        state Pods1: Pods {
            A: Container A1
            B: Container B1
            C: Container C1
        }
    }
    state Node2: Node {
        state Pods2: Pods {
            A2: Container A2
            B2: Container B2
            C2: Container C2
        }
    }
}

or

stateDiagram-v2
state Cluster {
    state "Node" as Node1 {
        state "Pods" as Pods1 {
            A: Container A1
            B: Container B1
            C: Container C1
        }
    }
    state "Node" as Node2 {
        state "Pods" as Pods2 {
            A2: Container A2
            B2: Container B2
            C2: Container C2
        }
    }
}

(this one doesn't "compile" to begin with)

Describe the bug The expected behavior is for states to utilize the same syntax as the other components do. I can provide an ID for the components, e.g. the A, B, C or A2, B2, C2... then provide an alias or "name" for each using the ":" operator.

Following the official documentation at: https://github.com/mermaid-js/mermaid/blob/develop/docs/stateDiagram.md

I can read that: "Another way is by using the state keyword with a description as per below:

stateDiagram-v2 state "This is a state description" as s2 Another way to define a state with a description is to define the state id followed by a colon and the description:

stateDiagram-v2 s2 : This is a state description"

As provided (unless I am mistaken somehow) the expected syntax of ":" doesn't work when using "state" components. Neither the "as", nor the ":" seem to work.

Expected behavior Both operators should allow the user to write down the ID of the state (so without e.g. spaces) and then allow for writing down a specific name/alias that allows providing a name which accepts special characters, spaces etc.

This could be an indirect follow up of: https://github.com/mermaid-js/mermaid/issues/1342

I use the Mermaidv9.1.3 Live Editor

[Matthew0x]

OK. I have found a workaround.

I generally recommend following this "architecting" principle (as I think it makes editing a bit easier) and it accidently fixed my weird problem with state diagrams at the same time (as I worked on the different types of diagrams and made the observation).

The point is to define the objects at the top of the document, then draw the dependencies below.

1. Define the "ID" with a special name at the top of the document (could be anywhere I presume, not sure).
2. Define a new object that uses that ID, it will automatically "inherit" the description it seems.

Example:

stateDiagram-v2
Node1: Node
Node2: Node
Pods1: Pods
Pods2: Pods
A: Container
B: Container
C: Container

state Cluster {
    direction LR
    state Node1 {
        state Pods1 {
            A: a random container
            B: a random container
            C: a random container
        }
    }
    state Node2 {
        state Pods2 {
            A2: a random container
            B2: a random container
            C2: a random container
        }
    }
}

Actually, what's quite funny, it turns out that you can even nest the names this way (at least in state diagrams). I never knew about that and I have gone through a few tutorials/documentations at least.

I hope that it helps somebody, because it bothered me personally.

PS: I meant to name it "Pod" instead of "Pods" in there. A typo.

[Matthew0x]

Compare it with the "recommended" approach (?) from the tutorials:

stateDiagram-v2
state Cluster {
    state Node1: Node {
        state Pods1: Pods {
            A: Container A1
            B: Container B1
            C: Container C1
        }
    }
    state Node2: Node {
        state Pods2: Pods {
            A2: Container A2
            B2: Container B2
            C2: Container C2
        }
    }
}

It obviously is broken.