Search code examples
mermaid

How to add this type of node description by Mermaid?


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..


Solution

  • 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 with an invisible link (~~~):

    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 comment