Skip to content

Make elk not force node model order, but strongly consider it instead #6849

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Aug 14, 2025
Merged

Make elk not force node model order, but strongly consider it instead #6849

merged 2 commits into from
Aug 14, 2025

Conversation

anderium
Copy link
Contributor

@anderium anderium commented Aug 13, 2025 •
edited by sidharthv96
Loading

📑 Summary

This improves the ordering in models with crossings that can be resolved by reordering nodes. It keeps the node order to still avoid #6647, the initial fix of which caused this regression to be introduced. Perhaps the forceNodeModelOrder config should be exposed in the mermaid-elk API?

See this example on the ELK Editor. Before and after images below.

elk previously elk updated

I believe Github does not have elk layout enabled, so the chart below does not show the problem, but I've added the mermaid code for convenience.

---
config:
  layout: elk
---
flowchart LR
    0 --> a & 1
    1 --> 2 --> X
    a --> b
    b --> b1 & b2
    b1 --> Z
    b2 --> X
    v0 --> v1 & v2 & v3 & v4

📏 Design Decisions

Removed the forceNodeModelOrder, i.e. set it to false, to allow elk to choose optimal node order, and set considerModelOrder.strategy': 'NODES_AND_EDGES' instead to guide order where it does not matter. See the docs and the section on crossing minimization in this blog post.

📋 Tasks

Added e2e test and changeset.

@anderium
Make elk not force model order, but strongly consider it instead
4f24489 
This improves the ordering in models with crossings that can be resolved by reordering nodes. It keeps the node order to still avoid mermaid-js#6647 which cause this regression to be introduced.

[See this example on the ELK Editor.](https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html?compressedContent=IYGw5g9gTglgLgCwLYC4AEJgE8CmUcAmAUAPQloDGUEAzjTAHZgCyjMSMAXsHDBAwDoAZtAo4AchAI5mUnCADyUaVHRwoAVxxEK-eitnTFyvAJrqeOMFnTiFAEQCiAZQD6AQXH3Xj+wHEXIlJyABUEGBo0CLQAI2ACNAB3BBwGNA16JjQRKDFJaUN5JRU1TRwBIIY5NAYABjQAbwxgGPk0ACJa9rQAXyIq6Rr3RubWkA7gbr6BnBqARhHMMY65qf7qhgAmRZa29s21mZqADR3l9uPDjYAhM72Yq8GGa+GmpfuBVd71p+vbt9243aMQEB2+R2epwB5wAWmsiIQwLM6mgALQAPiGaARBCRNXqGPmQURyIWhK2xNxyOG5OulLxzzRmOe7hxDNutLpbORLyZNWux25-I5zMFQq2fIYYuCaGuGjgaEQ0RoCAgGhACVaaAA1jgAA4KxCzGjAJDlGUASQV+GgKkicAgaAAzAAaNAAFjdczd2xgQkoehgBjkxhUZgscCsNjQdnEjjQAAppEJgOq4ABKSrVABu9Whe1zj1m2YW+aBJaLaGz2zLHWrlezTru5adDfdzbr7vhJKrBMxJaFub51cHfarTtHw-dRCAA)
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Aug 13, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 2260948

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@mermaid-js/layout-elk Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify Netlify
Copy link

netlify bot commented Aug 13, 2025 •
edited
Loading

✅ Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 2260948
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/689c87834f84020009af526a
😎 Deploy Preview https://deploy-preview-6849--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the Type: Bug / Error Something isn't working or is incorrect label Aug 13, 2025
@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Aug 13, 2025 •
edited
Loading

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@6849

mermaid

npm i https://pkg.pr.new/mermaid-js/mermaid@6849

@mermaid-js/layout-elk

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6849

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6849

@mermaid-js/parser

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6849

@mermaid-js/tiny

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/tiny@6849

commit: 2260948

@codecov Codecov
Copy link

codecov bot commented Aug 13, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 3.70%. Comparing base (bf3ca9d) to head (2260948).
⚠️ Report is 8 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid-layout-elk/src/render.ts 0.00% 1 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##           develop   #6849   +/-   ##
=======================================
  Coverage     3.70%   3.70%           
=======================================
  Files          455     454    -1     
  Lines        44901   44877   -24     
  Branches       709     709           
=======================================
  Hits          1664    1664           
+ Misses       43237   43213   -24
Flag Coverage Δ
unit 3.70% <0.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
packages/mermaid-layout-elk/src/render.ts 0.00% <0.00%> (ø)

... and 2 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@argos-ci Argos CI
Copy link

argos-ci bot commented Aug 13, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 22 changed, 1 added Aug 13, 2025, 4:49 PM

@anderium
Copy link
Contributor Author

Also fixes the problems in #4458

@sidharthv96 sidharthv96 requested a review from knsv August 13, 2025 16:31
@sidharthv96 sidharthv96 linked an issue Aug 13, 2025 that may be closed by this pull request
Arrow crossing in ELK flowchart #4458
Closed
sidharthv96
sidharthv96 approved these changes Aug 13, 2025
View reviewed changes
Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really like how the nodes are arranged without crossing edges.
@knsv maybe we should make the forced ordering a config param as suggested, and make this the default?

The ordering change was added recently to address the issue Martin raised IIRC?

knsv
knsv approved these changes Aug 14, 2025
View reviewed changes
Copy link
Collaborator

@knsv knsv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, good adjustment. This makes it better. I believe that it should be a configuration option with this setting as default.

Let's merge this, I will make the config change in a separate PR.

@knsv knsv added this pull request to the merge queue Aug 14, 2025
Merged via the queue into mermaid-js:develop with commit 91d7229 Aug 14, 2025
25 of 28 checks passed
@mermaid-bot mermaid-bot
Copy link

mermaid-bot bot commented Aug 14, 2025

@anderium, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.

This was referenced Aug 19, 2025
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@knsv knsv knsv approved these changes

@sidharthv96 sidharthv96 sidharthv96 approved these changes

Assignees
No one assigned
Labels
Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Arrow crossing in ELK flowchart
3 participants
@anderium @knsv @sidharthv96