Improve layout on state diagrams so that it tries harder not to cross lines.

[mrm-david]

Is your feature request related to a problem? Please describe. The layout for state diagrams could be better. Sometimes lines cross when there's an obvious solution not to. For example, this

stateDiagram-v2
    New --> Ready
    Ready --> Done
    Ready --> Error
    Ready --> Cancel
    Done --> Ready
    Error --> Cancel
    Error --> Ready
    New --> Hold
    Hold --> Ready
    Ready --> Hold

Generates this state diagram :

Describe the solution you'd like I'd like the state diagram layout to try harder not to cross lines. See this solution for the above example :

Describe alternatives you've considered I've tried changing the lines order in the diagram script.

Additional context None.

[mrm-david]

After many permutations I can get this. But it's a long trial and error process

stateDiagram-v2
    New --> Ready
    New --> Hold
    Ready --> Hold
    Hold --> Ready
    Ready --> Done
    Ready --> Cancel
    Ready --> Error
    Done --> Ready
    Error --> Cancel
    Error --> Ready

[sidharthv96]

Issue transferred as diagram layout is out of scope for Live Editor.

[mrm-david]

Oh sorry. Should I close and reopen somewhere else, or is the issue already transfered ?

[sidharthv96]

Don't worry, already transferred! 😄 Live editor only displays the diagrams rendered by this core mermaid product. So nothing we can do about it in that project.

[ksze]

@mrm-david Have you figured out the general rules to make Mermaid.js render without crossing lines?

[mrm-david]

@ksze Unfortunately I've been too busy with work to give it more thought yet.

[thorwhalen]

I too run into this problem quite a bit. I'd like to use mermaid by default since the rendering (for state and flow diagrams -- not mindmaps though) is prettier than other diagramming languages and it's automatically integrated in github markdown. But I find myself often reverting to graphviz because as soon as the graph becomes larger, because things quickly get entangled.

I'd like to note a few things, if it may help this case:

• Graph layout algorithms are well studied, and the kind of problems mermaid has with their layout have been solved a long time ago. See graph layout methods.
• There's another annoying problem with mermaid's diagramming language (for state and flow): Order matters. This can be a good thing when one wants to control order, but it becomes a nuisance when the layout's undesirable artifacts depend on order -- one finds oneself trying to solve the layout issues via reordering, and the relationship between order and layout is far from intuitive.

Perhaps there's a reason for these things. Perhaps even a good reason. If so, it's not clear to me what that reason is. Perhaps the mermaid authors can clarify?

Example

The following shows an example of undesirable artifacts as well as the fact that the same edge definitions, reordered, will change the layout (and what artifacts show up).

flowchart TD
    slang_ --> marketing
    raglab_ --> marketing
    raglab_ --> finance
    raglab_ --> law

    raglab_ --> raglab_case_1
    raglab_ --> raglab_case_2

    jamai_ --> SLMs
    sonify_ --> SLMs
    slang_ --> SLMs

    SLMs --> specialized_agents

    velocitai_ --> specialized_code
    velocitai_ --> specialized_agents

    raglab_case_1 --> specialized_code
    raglab_case_2 --> specialized_code

    specialized_agents --> specialized_velocity
    specialized_code --> specialized_velocity

flowchart TD
    slang_ --> marketing
    raglab_ --> marketing
    raglab_ --> finance
    raglab_ --> law

    raglab_ --> raglab_case_1
    raglab_ --> raglab_case_2

    jamai_ --> SLMs
    sonify_ --> SLMs
    slang_ --> SLMs

    SLMs --> specialized_agents

    velocitai_ --> specialized_code
    velocitai_ --> specialized_agents

    raglab_case_1 --> specialized_code
    raglab_case_2 --> specialized_code

    specialized_agents --> specialized_velocity
    specialized_code --> specialized_velocity

flowchart TD
    slang_ --> SLMs
    slang_ --> marketing

    SLMs --> specialized_agents

    raglab_ --> marketing
    raglab_ --> finance
    raglab_ --> law
    raglab_ --> raglab_case_1
    raglab_ --> raglab_case_2
    raglab_case_1 --> specialized_code
    raglab_case_2 --> specialized_code

    velocitai_ --> specialized_code
    velocitai_ --> specialized_agents
    specialized_agents --> specialized_velocity
    specialized_code --> specialized_velocity

    jamai_ --> SLMs
    sonify_ --> SLMs

flowchart TD
    slang_ --> SLMs
    slang_ --> marketing

    SLMs --> specialized_agents

    raglab_ --> marketing
    raglab_ --> finance
    raglab_ --> law
    raglab_ --> raglab_case_1
    raglab_ --> raglab_case_2
    raglab_case_1 --> specialized_code
    raglab_case_2 --> specialized_code

    velocitai_ --> specialized_code
    velocitai_ --> specialized_agents
    specialized_agents --> specialized_velocity
    specialized_code --> specialized_velocity

    jamai_ --> SLMs
    sonify_ --> SLMs

This is what we get in graphviz:

digraph G {

    slang_ -> SLMs
    slang_ -> marketing

    SLMs -> specialized_agents

    raglab_ -> marketing
    raglab_ -> finance
    raglab_ -> law
    raglab_ -> raglab_case_1
    raglab_ -> raglab_case_2
    raglab_case_1 -> specialized_code
    raglab_case_2 -> specialized_code

    velocitai_ -> specialized_code
    velocitai_ -> specialized_agents
    specialized_agents -> specialized_velocity
    specialized_code -> specialized_velocity

    jamai_ -> SLMs
    sonify_ -> SLMs

}