Search code examples
markdownmermaid

How to prevent overwritting elements, when line breaks in subgraph titles in mermaid?

Background: I want to use mermaid to visualize the structure of my code. Therefore I need to display the name and some extra information (here: run time of a loop) for some functions.

Problem: Adding the extra information should be done by a line break of the subgraph titles. My problem is that the second line ("Run-Time: 100s") is overwritten by the nodes in the subgraph.

Question: Does anyone know how to stop this behaviour?

flowchart TB 
A["BootCV()"]
subgraph D["LM.CV() <br> Full Run-Time: 193"]
direction TB
            DA["lm()"] -.-> combine_results
        end
A -.-> D

enter image description here

Solution

  • This seems to be a bug inside of Mermaid.js, but a hacky workaround that can fix this is to use an invisible node and link to add some spacing:

    flowchart TB 
A["BootCV()"]
subgraph D["LM.CV() <br> Full Run-Time: 193"]
direction TB
            DA2-->DA
            class DA2 disable;
            classDef disable display:none;
            linkStyle 0 display:none;
            DA["lm()"] -.-> combine_results
        end
A -.-> D

    The spacing cannot be controlled, as it is hardcoded in the SVG and can't be manipulated using CSS.