How to add this type of node description by Mermaid?

user_7033055 0
Viewed 580

This is a flowchart pattern that I really like to use and I currently use drawio to draw it:

enter image description here

Notice that there are two kinds of descriptions in the flow chart

  • description1:How does A get to B
  • description2:Some properties of B

I know Mermaid can implement the description1 by:

graph TB
    A --->|"description1:<br>How does A get to B"| B

enter image description here

But description2 is also very important to me, is there any way to achieve it?

The current workaround:

I use the heading of subgraph instead of description2:

graph TB
    A --->|"description1:<br>How does A get to B"| B
    subgraph description2:<br>Some properties of B
    B
    end

enter image description here

But I have to say it's a very ugly temporary solution. So I ask here..

mermaid
1 Answers

While some types of Mermaid diagrams explicitly support notes (e.g. sequence diagrams), flowcharts do not.

I believe the closest you're going to get is to connect B to itself:

graph TB
    A --->|"description1:<br>How does A get to B"| B
    B -.-|"description2:<br>Some properties of B"| B

B connected to itself with a connection comment

You can go one step further and hide the dotted line with a linkStyle:

graph TB
    A --->|"description1:<br>How does A get to B"| B
    B -.-|"description2:<br>Some properties of B"| B

    %% linkStyles are 0-indexed, so linkStyle 1 applies to the second connection
    linkStyle 1 stroke:#fff,stroke-width:0px;

Same as above with the line connecting B to B being invisible

user_3545770
Related