Sequence Diagrams with messageAlign smash text with <br>

[kevinawoo]

Describe the bug
This issue reported in mermaid-js/mermaid#3011 still exists on the cli at v9.1.5-beta.8 when creating pngs,

I noticed it was resolved in the v9.1.5 of mermaid.js though. Live Editor example, currently at v9.1.5

To Reproduce
Steps to reproduce the behavior:

1. create a markdown file with the same contents as Sequence Diagrams with messageAlign smash text with <br> mermaid#3011:

   ```mermaid
   %%{init: { 'sequence': {'messageAlign': 'left'} }}%%
   sequenceDiagram
   User->>Browser: Click hello
   Browser->>Server: Get /hello HTTP/1.1 <br> Host: example.com <br> Accept: text/html
   Server->>Browser: HTTP/1.1/ 200 OK <br> Content-Type: text/html <br> Content-Length: 42
   ```

2. Attempt to generate a PNG. Here's the example of I've been doing

   docker run -v $(pwd):/data ghcr.io/mermaid-js/mermaid-cli/mermaid-cli:9.1.5-beta.8 --scale 2 -i /data/./test.md -o /data/./test.png

3. Noticed the generated image has the message text between Browser and Server is overlayed on top of each other.
   

Expected behavior

Desktop (please complete the following information):

• OS: docker
• version: 9.1.5-beta.8

[aloisklink]

Seems to be fixed in mermaid-cli 9.1.5 (released yesterday)

Try using ghcr.io/mermaid-js/mermaid-cli/mermaid-cli:9.1.5 instead of 9.1.5-beta.8.

Unfortunately, it looks like some of the text is getting cut on the right side of the screen. However, since the same thing happens on the Mermaid Live Editor, I'm guessing it's a mermaid bug.

By the way, if want that activation box, you can use activate Server,

e.g.

```mermaid
%%{init: { 'sequence': {'messageAlign': 'left'} }}%%
sequenceDiagram
User->>Browser: Click hello
Browser->>Server: Get /hello HTTP/1.1 <br> Host: example.com <br> Accept: text/html
activate Server
Server->>Browser: HTTP/1.1/ 200 OK <br> Content-Type: text/html <br> Content-Length: 42
deactivate Server
```

[kevinawoo]

Since 9.1.5 works for me, going to close this. Thanks!