15

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

Scientist
  • 1,061
  • 2
  • 13
  • 30

2 Answers2

10

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

Paulo
  • 397
  • 2
  • 11
  • 1
    If you want to make it a bit more concise, you could also write: `X & Y --- D[ ]:::empty --> E` – Ivo Merchiers May 27 '22 at 10:10
  • The class empty is a very good idea. Can style also accomodate relative position from other elements? – dudung Oct 21 '22 at 22:39
  • 3
    Looks like it doesn't work anymore: there is a blank spot at the place there the arrows meet. – Velkan Apr 07 '23 at 13:12
  • ```mermaid graph LR X & Y --- D( ):::empty D --> E classDef empty width:-1px,height:-1px; ``` At least makes a little circle at the node - which ... IMO looks slightly better than the empty place. https://gist.github.com/chrismo/deccb12b9220a5ac357f64ceeb6ac54a/93f71466ba41cd395565b2cfe460efac4630be84 – chrismo Jul 07 '23 at 18:48
  • 1
    When I used `classDef empty width:0px,height:0px;` I ended up with a gap between the arrows. However if I use `style D width:0;` that was enough. Docs: [Styling a node](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#styling-a-node) – icc97 Aug 15 '23 at 12:18
5

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

august
  • 725
  • 5
  • 15
  • Thanks! Originally I was eager to find a solution in Mermaid as it feels much easier to write. Still, concerning the side item on "40oC" which is obliquely connected to the arrow, would you also know how to implement that, please? – Scientist Jul 18 '18 at 19:17
  • 1
    i added an edit to my answer responding to your question but the solution is to use a subgraph – august Jul 18 '18 at 19:23
  • 1
    very nice: I think you can get away without the subgraph just using `{ rank=same; d2 -> '40oC'[dir=none] };` – user20650 Jul 18 '18 at 23:25