Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fusing arrows sideways in mermaid diagrams

Tags:

r

diagram

mermaid

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

like image 525
Scientist Avatar asked Jul 16 '18 17:07

Scientist


People also ask

What is Mermaid syntax?

Mermaid is a syntax similar to Markdown where you can use text to describe and automatically generate diagrams. With Mermaid's Markdown-inspired syntax, you can generate flow charts, UML diagrams, pie charts, Gantt charts, and more.

What is Markdown mermaid?

Mermaid is a simple markdown-like script language for generating charts from text via JavaScript. Source: Mermaid. Mermaid lets you generate diagrams and flowcharts with Markdown-like syntax. It's easy to use, free, and open source. Mermaid lets you simplify documentation and avoid bulky tools when explaining your code ...

Does notion support mermaid?

Mermaid compatibility is now available in Notion code blocks. Here is how to get started using the new update. Mermaid allows Notion users to create flowcharts in the program, and flowcharts can be very useful for planning Notion workspaces, particularly, for identifying database relationships.


2 Answers

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

like image 84
august Avatar answered Nov 15 '22 20:11

august


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

like image 38
Paulo Avatar answered Nov 15 '22 20:11

Paulo