Broken note text horizontal and vertical alignment

[TheRancid]

Describe the bug The alignment of the text inside a note through Mermaid Configuration styles doesn't work as expected.

To Reproduce

1. In the Live Editor paste this:

sequenceDiagram
    participant U as User
    participant S as Server

    U->>S: Do something
    Note right of U: This is my note<br/>with many<br/>many many lines!
    S-->>U: OK done!

2. If you paste this in the Live Editor Configuration, the text is correctly aligned in the center (both horizontally and vertically:

{
  "sequence": {
    "noteAlign": "center"
  }
}

3. If you change center with left or right, the lines are rendered all in the same row and the alignment gets broken

Expected behavior The lines should be rendered each one on its row, with the correct horizontal alignment.

Screenshots

Additional context From what I see in the renderer code (which should be mermaid/src/diagrams/sequence/sequenceRenderer.js), the noteAlign property taken from the configuration is being used for both the anchor and valign properties of the text object, breaking the following computation of the coordinates done in the drawText function.

Thanks for your work so far.

Best regards

[summer20100514]

same issue here.

[hieunguyenmsft]

Ditto

[camlafit]

Hello

I've same issue. Looks related to https://github.com/mermaid-js/mermaid/blob/develop/src/diagrams/sequence/svgDraw.js#L34

I presume should be valign is wrong. As end text align looks correct

[camlafit]

If we add at https://github.com/mermaid-js/mermaid/blob/develop/src/diagrams/sequence/svgDraw.js#L39-L40 left and right options should be ok.

[Snurppa]

Same, wanted to left align my text in note but similar thing happens when setting noteAlign: "left".

Very irritating as there seems to be no way around this. As @TheRancid pointed out, value of noteAlign gets passed to both textObj.anchor and textObj.valign here.

Looking at the switch statements for those properties seems to indicate noteAlign values start and end would be synonyms for left and right. Also start | end are considered by the textObj.valign switch. But unfortunately using start as replacement for left did not make it work. Maybe there is something wrong with the calculations then.

Documentation for noteAlign says valid values for it are 'center', 'left', 'right'. But as seen from source valid would also be top and bottom.

Unfortunately, I don't have the skills nor time to create a PR that would fix this 😞 Hope this helps.

[christi-square]

I want to share another example of why this is important. It doesn't look like you can include code blocks within a note. I'm trying to use a sequence diagram with an example including a JSON request body. This very basic example is pretty difficult to read without proper formatting:

```mermaid
sequenceDiagram
    Developer->>Customers Connect API: REST/JSON HTTP Request
    Note right of Developer: PUT /v2/customers/custom-attribute-definitions/favorite-drink<br/>{<br/>  "custom_attribute_definition": {<br/>    "visibility": "VISIBILITY_READ_ONLY"<br/>  }<br/>}

It gets much worse when the JSON becomes more complex.

As this is a diagram within a github repo, it doesn't appear that custom stylesheets can be used so attempting to format by styles is not an option.

[aliouas]

I think this issue no longer exists. I tried to reproduce it and here are the outputs for center, left, and right respectively as notealign values:

I suggest that it gets closed.