Multiple graph in the live editor

[salarmehr]

Can we have multiple independent graph in the same live editor? This does not work:

graph LR
 unpaid-->paid[paid/unassigned]
 paid-->assigned
 assigned==>finished
assigned-->withdrew
assigned-->cancelled


subgraph LR 
test-->foo

[erikh2000]

It was necessary for me to add "end" on the last line to close the subgraph declaration. But other than that, your code above works for me.

I'm unclear what you mean by in the "same live editor".

[salarmehr]

@erikh2000 Yes it works with adding end!.
Thanks for you awesome graphing syntax.

[salarmehr]

Oh sorry, it does not work indeed.

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    a1-->c2
    end

in the above code we have a1 node in the first and last subgrph and they are independent node, however there is inter-graph links to them. I a link is not defined in the top graph section of syntax in there should be no intergraph link.

[salarmehr]

My issue is mainly about adding multiple independent graphs in the live editor that can be achieved by allowing multiple graph statement in it.

[erikh2000]

You need to give unique names to your nodes so that Mermaid won't interpret them as the same node. It makes sense if you think about it. How would Mermaid know if you meant the two "a1" nodes to be separate?

So for example, you can change one of the "a1"s to "a1_copy". That gives you an ugly "a1_copy" text rendered in the graph, but you can specify a separate label like so:

a1_copy[a1]-->c2

...and then the node will render in the graph with "a1" text.

[salarmehr]

That is exactly the issue. My point is allowing multiple separate set of node in tow graph statement.

graph TB
...
graph TB
...

[salarmehr]

also two having independent node with the same name among subgraph we can use subgraph name as name space
in above example:

graph TB
    one.a1-->three.a1
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    a1-->c2
    end  

[tylerlong]

It is doable in your own HTML page. Just put your code in two separate <div class="mermaid"></div>.

But for https://mermaidjs.github.io/mermaid-live-editor/, I don't think we will add this feature since this is not a common use case.

[xumxum]

I would need the same, multiple graphs ...

[dennisvandenende]

tylerlong write it is not common use. But i disagree. For example to create a subflow as a sidestep.
As it is now it will be one long row to the left or bottom.
But a flow to the left van have a sidestep down.

For example something like this:

graph LR
    one.a1-->three.a1
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
graph BR
    subgraph three
    b2-->d1
    d1-->d2
    end  
graph LR
    subgraph Four
    a1-->c2
    end  

[IOrlandoni]

Hey, you're commenting on a closed issue. Feel free to open a new issue if the problem still persists.