mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Home Page:https://mermaid.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add positioning for elk layout renderer. This can enable Horizontal Order and Vertical Order

Ogglas opened this issue · comments

Proposal

elkjs supports position for nodes. Given that mermaid now supports this it would be a great additon.

https://mermaid.js.org/config/schema-docs/config.html#defaultrenderer

https://rtsys.informatik.uni-kiel.de/elklive/examples.html?e=user-hints%2Flayered%2FhorizontalOrder

https://rtsys.informatik.uni-kiel.de/elklive/examples.html?e=user-hints%2Flayered%2FverticalOrder

Example

Example in elkjs for Horizontal Order

aspectRatio: 0.1 // for presentation only

node default {
    algorithm: layered
    nodeLabels.placement: "INSIDE V_TOP H_CENTER"
    label "Default" { layout [ size: 43, 15 ] }
    node n1 { label "1" }
    node n2 { label "2" }
    node n3 { label "3" }
    edge n1 -> n2
    edge n2 -> n3
}

node partitions {
    algorithm: layered
    partitioning.activate: true
    
    nodeLabels.placement: "INSIDE V_TOP H_CENTER"
    label "Partitions" { layout [ size: 56, 15 ] }

    node n1 { partition: 1 label "1" }
    node n2 { partition: 2 label "2" }
    node n3 { partition: 0 label "3" }
    edge n1 -> n2
    edge n2 -> n3
}

node interactive {
    algorithm: layered
    cycleBreaking.strategy: INTERACTIVE
    layering.strategy: INTERACTIVE
    
    nodeLabels.placement: "INSIDE V_TOP H_CENTER"
    label "Interactive" { layout [ size: 58, 15 ] }

    node n1 { layout [ position: 200, 0 ] label "1" }
    node n2 { layout [ position: 300, 0 ] label "2" }
    node n3 { layout [ position: 100, 0 ] label "3" }
    edge n1 -> n2
    edge n2 -> n3
}

Screenshots

No response