mermaid icon indicating copy to clipboard operation
mermaid copied to clipboard

Published 20 hours ago • verified publisher icon mermaid-js

composite state label covers children

Open adamfk opened this issue 4 months ago • 0 comments

Description

When a composite state label spans multiple lines, it often overlaps its nested states as shown below.

state "ACTIVE\nenter / setup();\nexit / teardown();" as ACTIVE {
<snip...>

image

stateDiagram
SLEEPING : SLEEPING

state "ACTIVE\nenter / setup();\nexit / teardown();" as ACTIVE {
    [*] --> SEARCH

    SEARCH : SEARCH
    CHARGE : CHARGE
}

[*] --> SLEEPING
SLEEPING --> ACTIVE : EV_SEARCH
ACTIVE --> SLEEPING : EV_SLEEP

SEARCH --> CHARGE : EV_CHARGE
CHARGE --> SEARCH : EV_SEARCH

If this layout issue could be fixed, we could close https://github.com/mermaid-js/mermaid/issues/5522

Steps to reproduce

See above

Screenshots

No response

Code Sample

No response

Setup

  • Mermaid version: 11.3.0
  • Browser and Version: Chrome 129.0.6668.100

Suggested Solutions

No response

Additional Context

No response

adamfk avatar Oct 15 '24 21:10 adamfk