Skip to main content

Combine arrows in Mermaid by using an invisible node

I was drawing a chart with Mermaid, where several sources combine into a single destination. Here’s a quick demo:

flowchart LR
    SRC1[source 1]
    SRC2[source 2]
    SRC3[source 3]
    DST[destination]

    SRC1 --> DST
    SRC2 --> DST
    SRC3 --> DST

source 1

source 2

source 3

destination

Rectangle-and-arrow diagram with four rectangles. There are three ‘source’ rectangle and one ‘destination’ rectangle, with three distinct arrows from each source to the destination

I was slightly bothered by the way there are three completely separate arrows between the source and the destination. Via a comment on the Mermaid GitHub, I found a Stack Overflow answer by Paulo which suggests using an empty node which doesn’t take up any space.

This looks more like what I want:

flowchart LR
  SRC1[source 1]
  SRC2[source 2]
  SRC3[source 3]
  DST[destination]

  E[ ]:::empty
  classDef empty height: 0, width: 0

  SRC1 --- E
  SRC2 --- E
  SRC3 --- E
  E --> DST

source 1

source 2

source 3

destination

Rectangle-and-arrow diagram with four rectangles. There are three ‘source’ rectangle and one ‘destination’ rectangle, with three arrows from each source that combine into a single arrow pointing to the destination