Draw arrow from node to nothing

Question

I want to draw a mermaid diagram containing arrows that do not join with nodes:

graph LR
    A(Sample Text)
    -->A
    A-->B
    B-->A 
    B-->

-->A and B--> fails, likely because the arrow requires both input and output nodes. Is there a workaround? Can I make the node invisible or blank?

score 12 · Accepted Answer · edited Aug 03 '23 at 01:35

12

How about this?

graph LR
    START[ ]-->A[Sample Text]
    A-->B
    B-->A 
    B-->STOP[ ]
    
    style START fill:#FFFFFF00, stroke:#FFFFFF00;
    style STOP  fill:#FFFFFF00, stroke:#FFFFFF00;

Output diagram is:

edited Aug 03 '23 at 01:35

Mateen Ulhaq

24,552
19
101
135

answered May 10 '18 at 10:12

Prem

11,775
1
19
33

Mateen Ulhaq · Answer 2 · 2023-01-14T04:34:37.390

11

Simply tag the node with :::hidden to hide it:

graph LR
    START:::hidden --> A
    A --> B --> A 
    B --> END:::hidden

    classDef hidden display: none;

Output:

edited Jan 14 '23 at 04:34

answered Jan 14 '23 at 04:22

Mateen Ulhaq

24,552
19
101
135

score 5 · Answer 3 · edited Aug 03 '23 at 01:34

5

Something similar to another comment, but using opacity:

graph LR
    START[ ]-->A[Sample Text]
    A-->B
    B-->A 
    B-->STOP[ ]

    style START fill-opacity:0, stroke-opacity:0;
    style STOP  fill-opacity:0, stroke-opacity:0;

edited Aug 03 '23 at 01:34

Mateen Ulhaq

24,552
19
101
135

answered Aug 19 '22 at 17:39

david valencia

69
1
3

Using opacity is better because the solution is independent of the background color. – Jan Aug 23 '22 at 17:27

kofifus · Answer 4 · 2023-02-05T09:09:12.503

1

Easier and better if you want to continue from your invisible point:

a --> end[ ]
style end height:0px;

Seems like sometime github rendering have problem with the above, in this case use:

style end height:1px;
style end width:1px;

edited Feb 05 '23 at 09:09

answered Feb 22 '22 at 02:32

kofifus

17,260
17
99
173

score -1 · Answer 5 · answered Jul 06 '20 at 06:10

-1

A more simple way which I found here

digraph {
    rankdir=LR;
    nowhere [style=invis,shape=point]
    nowhere -> on
    on -> off [label = "Push"]
    off -> on [label = "Push"]
}

Output is something like

answered Jul 06 '20 at 06:10

Madhusoodan P

681
9
20

4

Wasn't the downvoter, but I think it's because the question references mermaid-js and your answer is for graphviz – abhishekmukherg Oct 23 '20 at 23:59

Draw arrow from node to nothing

5 Answers5

Linked