mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.18k stars 6.24k forks source link

Duplicate objects in two directions #1231

Open Raboo opened 4 years ago

Raboo commented 4 years ago

I want to write a diagram or flowchart in two directions like this ascii with duplicate boxes(objects).

    +---+
    | A |
    +---+
    |   ^
    v   |
+---+   +---+
| B |   | E |
+---+   +---+
    |   ^
    v   |
+---+   +---+
| C |   | C |
+---+   +---+
    |   ^
    v   |
    +---+
    | D |
    +---+

The closest thing I can do in mermaid is

graph TD
  .((A)) --> B.in[B]
  B.out[B] --> .((A))
  subgraph in
    B.in[B] --> C.in[C]
    C.in[C] --> D
    D --> C.in2[C]
    C.in2[C] --> E.in[E]
  end
  E.in[E] --> F
  F --> E.out[E]
  subgraph out
    E.out[E] --> C.out[C]
    C.out[C] --> G
    G --> C.out2[C]
    C.out2[C] --> B.out[B]
  end

And it ends up looking like this: Screenshot 2020-01-30 at 11 52 20

So my question is, can I make the two subgraphs align next to each other like in the ascii and having the arrows in subgraph "out" go in reverse order (instead of TD)? I mean forcing each subgraph top to bottom makes this looks really ugly and less readable.

equackenbush commented 3 years ago

I've run into similar scenarios where I've wanted more control to designate the return node in cyclic diagram. The closest I've been able to achieve is to use flowcharts and bi-directional arrows:

flowchart TB
    aNode
    bNode
    cNode
    dNode
    eNode
    fNode[cNode]
    aNode --> bNode --> cNode --> dNode
    aNode <--> eNode <--> fNode <--> dNode

The addition of a reverse arrow (<--) is potentially one solution to this issue.

jgreywolf commented 3 years ago

Related to #1344

noraworld commented 2 years ago

I had the same issue, but @equackenbush’s answer works for me.

Thank you @equackenbush 🙏