mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.79k stars 6.51k forks source link

Combine multiple arrows #1712

Open oliv3r opened 4 years ago

oliv3r commented 4 years ago

Describe the solution you'd like When drawing flowcharts, having multiple arrows going to the same item, creates many many arrows making the graph hard to read and very wide. For example here:

flowchart TD
  start --> id1
  start --> id2
  id1 -- Fail --> err1
  id1 --> id2
  id2 --> id3
  id3 --> id4
  id1 -- OK --> ending
  id2 -- OK --> ending
  id3 -- OK --> ending
  id4 -- OK --> ending

image

Ignoring the ugly curly style of the arrows, we see that many arrows are drawn. Instead, it would be much nicer, if we can 'merge' these identical arrows such as when doing this with 'manual' tools: image

sidharthv96 commented 1 year ago

This would be an excellent feature.

Vyvy-vi commented 1 year ago

I'd like to work on this issue

melek commented 7 months ago

I'll add that there is a workaround using an unlabeled node with styling to reduce the width and/or height to 0 (based on a solution from Stack Overflow):

flowchart LR
    X[5] --- J[ ]:::join
    Y[4] --- J
    J --> FUNC[Addition]
    FUNC --> SUM[9]

    classDef join height:0
image

Combined with the right curve styles this can be pretty good, and syntax-wise I like the idea of using a hidden node to control which arrows connect. Unfortunately, the way the node get placed alongside other nodes tends to create overly sparse / inefficient looking connections.

ahmed-elborollosy commented 1 month ago

I think this must be just an option since in some case i may need to keeb multible arrows pointing to the same node because each arrow may represent a different process and will carry different description

bskubi commented 3 weeks ago

I'll add that there is a workaround using an unlabeled node with styling to reduce the width and/or height to 0 (based on a solution from Stack Overflow):

flowchart LR
    X[5] --- J[ ]:::join
    Y[4] --- J
    J --> FUNC[Addition]
    FUNC --> SUM[9]

    classDef join height:0

This doesn't work for me in the Mermaid Live editor 11.3.0.

image