Mermaid markdown fails to show flowchart heading

[LeskoIam]

I have the following mermaid md:

flowchart
    
    D0["Deco"]
    M["Modem"]
    
    subgraph RPI-DEV["rpi-dev 192.168.0.287"]
        RPI-DEV-SSH["ssh<br>port: 22"]
        RPI-DEV-KRONO-LOG["krono live log<br>port: 8080"]
    end
    
    subgraph HA-DEBIAN["ha-debian 192.168.0.288"]
        HA-DEB-SSH["ssh<br>port: 33"]
        HA-DEB-HA["Home Assistant<br>port: 4563"]
    end
    
    RPI-DEV-SSH <--33:33--> D0 <--33:1111--> M
    HA-DEB-HA <--2134:6575--> D0 <--6575:4533--> M

When I save the page it does not show the subgraph title subgraph RPI-DEV["rpi-dev 192.168.0.287"]

What is expected is in the bellow image

When I inspect the page there is an element with title in DOM but it's hidden behind some other element.

So guess I'm reporting two problems:

• title not visible
• I need to use <br> to set the text in a box to go to new line - on github or in PyCharm I can use \n

Thanks for all the effort!

[redimp]

Hey @LeskoIam, I tried to reproduce An OtterWiki not rendering the title, but it worked fine:

https://dev.otterwiki.com/Bugs/Mermaid%20Title%20140

Note: You might have to refresh once, the mermaid diagram does not follow th dark mode instantly.

Don't worry about redacting local ips and ports, these are hardly a security risk.

[LeskoIam]

I tried reloading the page (also with Ctrl+F5) but the title never shows...

I have to disable all the firefox plugins I'm using and try again. On which browser are you testing mermaid?

I wasn't sure what IPs I have there so I just redacted all of them and got carried away with MS Paint.

[LeskoIam]

OK so I tested again and still no luck.
On Firefox 130.0

• Opened the page in private window (no plug-ins,..)
• Refreshed multiple times (including CTRL-F5)
• Changed to light theme
• Changed back to dark theme

Still as is in the first screenshot

So I inspected the page and as before element is there

I checked the mermaid.js page and they have 900+ issues open so it's probably futile to report this to them.... And I'm no web developer. Probably best to close the issue I guess.

Just FYI, this is hoc flowchart looks in Edge

[redimp]

I have successfully tested (on MacOS 14.6.1):

• Chrome 127.0.6533.120
• Firefox 128.0.2
• Firefox 130.0.1
• Safari 17.6
• Brave 1.69.168
• Safari iOS 17.6.1

Will test Windows 11 and Ubuntu 22 tonight.

[redimp]

I've successfully tested (on Windows 11):

• Edge 129.0.2792.52
• Firefox 127.0
• Firefox 130.0.1

e.g.

I'll continue the investigation.

[redimp]

Found it. The autoscaling feature of halfmoon doesn't work with MermaidJS.

@LeskoIam can you check if the mermaid chart is correctly rendered when your browser is smaller than 1600px?

[LeskoIam]

Tried it with smaller windows:

• Firefox (130.0.1): same as before it doesn't matter what size the window is,
• Edge (129.0.2792.52): works almost as expected, it looks like the length of the string is also important, if shorter it shows it correct sooner (at higher px) if longer at lower px.

[redimp]

Hey @LeskoIam, here you can test the rendering of the mermaid diagrams without autoscaling: https://testing.otterwiki.com/Mermaid

The second issue

I need to use <br> to set the text in a box to go to new line - on github or in PyCharm I can use \n

is fixed in this version, too. A patch will be released in the next days.

[redimp]

Released in 2.6.1.

[LeskoIam]

Just wanted to let you know that mermaid is working great! Titles showing and everything! Great work, appreciate it very much!