How to add this type of node description by Mermaid?

Question

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

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

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

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

Answer 1

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

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;