Notes positionning in state diagram does not respect syntax

[FlorentP42]

Description

When asking to draw a note "left of" or "right of" some other object, it appears to work the opposite way that you would expect.

I assume "Note right of Block" means the note should be drawn on the right of the block: it is drawn on the left.

On top of that most of the time the note is drawn on top or under the actual block when I would expect it to be inline (centered vertically) with the block, or if it's not the expected default behavior, to have a way to enforce that behavior.

Steps to reproduce

1. Go the the main documentation example of State Diagrams and look at the Notes section.
2. Notice that it renders the wrong way :
   

Screenshots

No response

Code Sample

stateDiagram-v2
        State1: The state with a note
        note right of State1
            Important information! You can write
            notes.
        end note
        State1 --> State2
        note left of State2 : This is the note to the left.

Setup

• Mermaid version: 11.4.1 (according to the documentation website)
• Browser and Version: Any (tested on Firefox 132.0.2 and Edge 131.0.2903.70)

Suggested Solutions

No response

Additional Context

No response