question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Horizontal relationships in a TD style flowchart

See original GitHub issue

I do a lot of work in humanities with relationships between persons, especially creating family trees of complicated semi-inbred families (yay for history).

Could we have support for a way to demonstrate a horizontal relationship in a vertical tree? The render might look something like this

Stan ----------- Jane
     /    |    \      
    /     |     \
  Bob   Jason  Sally ------ Andrew
                        |
                        |
                     Brandon

Possible Syntax in Mermaid Here the () make a group, but this may interfere with other existing functionality.

(Stan === Jane) --> Bob & Jason & Sally
(Sally === Andrew) --> Brandon

A Close Example in Current Mermaid This is close, but has too many lines and no clear relationship between marriages.

graph TD
	Stan & Jane --> Bob & Jason & Sally
	Sally & Andrew --> Brandon

If this has been addressed or can be accomplished through another method, please let me know!

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:17
  • Comments:8

github_iconTop GitHub Comments

4reactions
bokobokcommented, Jul 27, 2021

Did this:

graph TD
    Parent1 --> p1p2( )
    Parent2 --> p1p2

    Parent3 --> p3p4( )
    Parent4 --> p3p4

    p1p2 --> Child1
    
    Someone1 --> c2x1
    Child2 --> c2x1( )

    p1p2 --> Child2
    p1p2 --> Child3
    Child4 --> c4c5( )
    Child5 --> c4c5
    p1p2 --> Child4

    p3p4 --> Child5
    p3p4 --> Child6
    p3p4 --> Child7
    p3p4 --> Child8

    c2x1 --> SubChild1

    c4c5 --> SubChild2

image

2reactions
fhShawoncommented, Apr 30, 2022

@matheusfillipe I tried like this.

mermaid-diagram-20220430143343

flowchart
    style Grandparents fill:#fff,stroke:#000
    style Parents fill:#fff,stroke:#000
    style UncleAunt fill:#fff,stroke:#000
    style Siblings fill:#fff,stroke:#000
    style Cousins fill:#fff,stroke:#000
    style Grandfather fill:#9ddecc,stroke:#000
    style Father fill:#9ddecc,stroke:#000
    style Aunt fill:#9ddecc,stroke:#000
    style Brother fill:#9ddecc,stroke:#000
    style Sister fill:#9ddecc,stroke:#000
    style Cousin1 fill:#9ddecc,stroke:#000
    style Cousin2 fill:#9ddecc,stroke:#000
    style Cousin3 fill:#9ddecc,stroke:#000
    style Grandmother fill:#fff,stroke:#000
    style Mother fill:#fff,stroke:#000
    style Uncle fill:#fff,stroke:#000

    subgraph Grandparents[ ]
        Grandfather((Grandfather)) === Grandmother((Grandmother))
    end

    subgraph Parents[ ]
        direction RL
        Father((Father)) === Mother((Mother))
    end

    subgraph Siblings[ ]
        Brother((Brother)) -.- Sister((Sister))
    end

    subgraph UncleAunt[ ]
        direction RL
        Uncle((Uncle)) === Aunt((Aunt))
    end

    subgraph Cousins[ ]
        Cousin1((Cousin1)) -.- Cousin2((Cousin2)) -.- Cousin3((Cousin3))
    end

    Grandparents --- Parents
    Grandparents --- UncleAunt
    Parents --- Siblings
    UncleAunt --- Cousins
Read more comments on GitHub >

github_iconTop Results From Across the Web

Mermaid | Diagramming and charting tool
JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Read more >
Horizontal Cross Functional Flowchart - Conceptdraw.com
These flowcharts are used to display the relationships of processes and responsible functional units. The cross-functional horizontal flowchart template for ...
Read more >
Node Shapes | Graphviz
The geometry and style of all node shapes are affected by the node ... Flipping between horizontal and vertical layouts is done by...
Read more >
Can I control the direction of flowcharts in Mermaid?
Mermaid's Graph charts only know about vertical or horizontal layouts. ... flowchart TD subgraph Z[" "] direction LR A --> B B -->...
Read more >
TR FLOWCHART PRC [classic] | Creately
TR FLOWCHART PRC [classic]. by tracing prc. Edit this Template. Use Creately's easy online diagram editor to edit this diagram, collaborate with others...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found