mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.69k stars 6.07k forks source link

Actor type in sequence diagram has wrong ordering #5525

Closed emmachase closed 1 week ago

emmachase commented 1 month ago

Description

When using the actor participant type, z-ordering is incorrect, showing the line above other elements like notes.

Steps to reproduce

  1. Create a sequence diagram that uses an actor
  2. Add a note over the actor
  3. Observe that the note's box and text are ordered underneath the actor line/lifetime

https://develop.git.mermaid.live/edit#pako:eNpdkD0OwjAMha9ieWEpF4hEJX4GmFmzmMS0EUlc0hQJIe5OKEVUeHLee5-d5IFGLKPCnq8DR8M7R02ioCOUIpMlwdo7w3NhI6fPsaOUnXEdxQzblpJ3U25ElnVdkgr27keUpsijPRqz2VEyg9x4WljBCK--BdKWCPc_5R-bbqDgsAhA3kMjYrHCwCmQs-WRjzeiMbccWKMqraV00ajjs-RoyHK8R4Mqp4ErHDpL-fshqM7ke36-AL2pYU4

Screenshots

SCR-20240516-koft

Code Sample

sequenceDiagram
    actor Alice
    actor Bob
    participant Charlie
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
    note over Alice, Bob: ========= oh noes =========
    note over Charlie: I'm all good

Setup

Suggested Solutions

I'm not super familiar with how the svg code works, but from an initial glace it seems suspicious that this line calls lower directly on elem https://github.com/mermaid-js/mermaid/blob/7bcba294930aadeaa3960865c26a06ebc7ff907a/packages/mermaid/src/diagrams/sequence/svgDraw.js#L418

This is opposed to how it works in the participant function, in which a g is created first to contain the elements: https://github.com/mermaid-js/mermaid/blob/7bcba294930aadeaa3960865c26a06ebc7ff907a/packages/mermaid/src/diagrams/sequence/svgDraw.js#L333

Additional Context

No response