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