mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Home Page:https://mermaid.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Named composite example in State Diagram

cbugk opened this issue · comments

Proposal

I would like to propose a change in State Diagram's composite examples. Since there weren't a documentation related issue type, I am opening one as syntax issue. I already have committed my changes on my fork. Will be creating a merge request shortly.

Example

Below is the addition I would like to append to the first example at https://mermaid.js.org/syntax/stateDiagram.html#composite-states

[*] --> NamedComposite
    NamedComposite: Another Composite
    state NamedComposite {
        [*] --> namedSimple
        namedSimple --> [*]
        namedSimple: Another simple
    }

Screenshots

AnotherComposite

There is a strange occurance on my end. If naming is post-state-definition rather than pre-state-definition, color fill is dark grey for the parent state. I suppose it can not be rendered but its borders are honored in rendering somehow.
AnotherComposite_post_named