search

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
68.63k stars 6.05k forks source link

stateDiagrams overlap edges even if the diagram is planar #5601

Open migueltorrescosta opened 4 days ago

migueltorrescosta commented 4 days ago

Description

Simple planar graphs are not rendered as planar. In simple cases they are still easy to read, but in midly complex diagrams they make it much harder to read

Steps to reproduce

Render the diagram below, and observe that if the node B was on the left, it would avoid overlapping edges.

stateDiagram
A --> C
A --> D
B --> C
C --> E
D --> E

Screenshots

This should be visible above, but if not I attach a screenshot

image

Code Sample

mermaid
stateDiagram
A --> C
A --> D
B --> C
C --> E
D --> E

Setup

Suggested Solutions

A similar solution to the flowchart problem might be applicable. The related but distinct issue can be found at https://github.com/mermaid-js/mermaid/issues/5060

Additional Context

Not all graphs are planar, so it won't always be possible to fix this issue.. It is not trivial to solve while maintaining the deterministic behavior of the generated diagram, but if solved it would improve the readability of this tool significantly.