CODEWITHSUNDEEP
rdiagrammermaid
Scientist
Scientist

Reputation: 1339

Fusing arrows sideways in mermaid diagrams

How can I add laterally fused arrows in a R sequential mermaid diagram? In the the example below:

library(DiagrammeR)
mermaid("
graph TB
    A[GE Solution]-->C{1:1}
    B[GA Solution]-->C{1:1} 
    C{1:1}-->D[Stir 10 mins at 500 r/min]
    D[Stir 10 mins at 500 r/min]-->E[Homogenisation at 10000 r/min]
    ")

How could I produce sth like the following?

enter image description here

Upvotes: 23

Views: 8906

Answers (3)

Ogglas
Ogglas

Reputation: 69968

Alternative solutions to @Paulo's answer:

Based on your image I think this looks the best:

---
config:
  flowchart: 
    curve: linear
---
flowchart TD
   A[GE Solution] --- recEmpty[ ]:::empty
   B[GA Solution] --- recEmpty
   recEmpty --> C[Stir 10 mins at 500 r/min]
   classDef empty width:0px

enter image description here

Other examples:

flowchart-elk TD
   A[GE Solution] --- recEmpty[ ]:::empty
   B[GA Solution] --- recEmpty
   recEmpty --> C[Stir 10 mins at 500 r/min]
   classDef empty width:0px

enter image description here

flowchart TD
   A[GE Solution] --- recEmpty[ ]:::empty
   B[GA Solution] --- recEmpty
   recEmpty --> C[Stir 10 mins at 500 r/min]
   classDef empty width:0px

enter image description here

---
config:
  flowchart: 
    curve: stepAfter
  
---
flowchart TD
   A[GE Solution] --- recEmpty[ ]:::empty
   B[GA Solution] --- recEmpty
   recEmpty --> C[Stir 10 mins at 500 r/min]
   classDef empty width:0px

enter image description here

Upvotes: 1

Paulo
Paulo

Reputation: 497

A possible solution in mermaid;

graph LR
   X --- D[ ]:::empty
   Y --- D
   D --> E
   classDef empty width:0px,height:0px;

Mermaid diagram with merging sideway connectors

Upvotes: 20

august
august

Reputation: 747

I played around with mermaid and I'm not sure there is functionality for that, it looks like it was meant to be a simple solution for documentation, not one with lots of flexibility. You can do the same diagram however with graphViz:

library(DiagrammeR)

grViz("digraph dot {
    node [shape=rectange];

    d1 [shape=point,width=0.01,height=0.01];
    {'GE Solution', 'GA Solution'}->d1[dir=none];
    d1->'Stir 10 mins at 500 r/min';
    'Stir 10 mins at 500 r/min'->'Homogenisation at 10000 r/min'}")

enter image description here

Edit to respond to comment: Use a subgraph and rank an invisible dot (d2 in this example) and the the node you wish to have it level with as the same (here 40oC).

grViz("digraph dot {
node [shape=rectange];

d1 [shape=point,width=0.01,height=0.01];
d2 [shape=point, width=0.01, height=0.01];
{'GE Solution', 'GA Solution'}->d1[dir=none];
d1->'Stir 10 mins at 500 r/min';
'Stir 10 mins at 500 r/min'->d2[dir=none];
subgraph {
    rank=same;
    d2; '40oC';
}
d2->'40oC'[dir=none];
d2->'Homogenisation at 10000 r/min'}")

enter image description here

Upvotes: 6

Related Questions