Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add elk layout for mermaid (@mermaid-js/layout-elk)#1723

Open
ArviFoxy wants to merge 1 commit intodocmost:mainfrom
ArviFoxy:main
Open

Add elk layout for mermaid (@mermaid-js/layout-elk)#1723
ArviFoxy wants to merge 1 commit intodocmost:mainfrom
ArviFoxy:main

Conversation

@ArviFoxy
Copy link

@ArviFoxy ArviFoxy commented Nov 10, 2025 •
edited by coderabbitai bot
Loading

Closes #1722

Summary by CodeRabbit

  • New Features
    • Enhanced Mermaid diagram rendering with Elk layout support, providing additional layout options for improved diagram visualization and presentation.

@CLAassistant
Copy link

CLAassistant commented Nov 10, 2025 •
edited
Loading

CLA assistant check
All committers have signed the CLA.

@ArviFoxy ArviFoxy marked this pull request as ready for review November 10, 2025 13:36
@coderabbitai
Copy link

coderabbitai bot commented Nov 10, 2025 •
edited
Loading

Walkthrough

The changes add support for the ELK layout engine to Mermaid by introducing a new package dependency and registering ELK layout loaders in the mermaid-view component, enabling enhanced diagram rendering capabilities for complex diagrams.

Changes

Cohort / File(s) Summary
ELK Layout Engine Integration
apps/client/package.json		 Added @mermaid-js/layout-elk dependency (version ^0.2.0) to enable ELK layout support.
ELK Layout Registration
apps/client/src/features/editor/components/code-block/mermaid-view.tsx		 Imported ELK layout modules and registered layout loaders via mermaid.registerLayoutLoaders(elkLayouts) to activate ELK rendering capabilities.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

  • Single dependency addition with standard semantic versioning
  • One-line initialization call with no conditional logic or error handling
  • No state management, structural, or behavioral modifications

Poem

🐰 A new layout engine hops in with grace,
ELK spreads diagrams across the space,
Complex webs now render with care,
Mermaid diagrams flourish everywhere! 📊

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely describes the main change: adding the ELK layout engine for Mermaid diagrams.
Linked Issues check ✅ Passed The PR successfully implements the feature request #1722 by adding the @mermaid-js/layout-elk dependency and registering ELK layout loaders in Mermaid.
Out of Scope Changes check ✅ Passed All changes are directly related to adding ELK layout support for Mermaid; no out-of-scope modifications are present.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ArviFoxy
Copy link
Author

ArviFoxy commented Nov 10, 2025 •
edited
Loading

With this patch the example from https://www.drawio.com/blog/mermaid-elk-layout looks as expected:
image

The reference image:
image

The mermaid code:

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

graph TD
  A[\Replenish Value Add stock/] --->C
  B(Order product with Value Add) --->C
  C{Frequent process?} --->|Yes|D 
  C --->|No|F
  D{New template?} --->|Yes|E 
  D --->|No|G
  E(Create work order template) --->G
  F(Create work order) --->H
  G(Copy template to work order) --->I
  H(Add materials to work order processes) --->J
  I(Adjust material quantities) --->J
  J(Monitor work orders) --->K
  K{Material quantities in stock?} --->|No|L 
  K --->|Yes|M
  L(Procure materials) --->M
  M(Change status to In Progress) --->N
  N{External Vendor to perform step?} --->|Yes|O 
  N --->|No|P
  O(Add vendor costs) --->Q
  P[\Perform work order step/] --->R
  Q([Ship materials to Vendor]) --->S --->X
  R{Additional processing required?} --->|Yes|N 
  R--->|No|T
  S[\Perform work order step/] --->U
  T(Receive final stock) --->V
  U(Receive product from vendor) --->W
  V(Ship product on order) --->Y
  W{Partial quantity received?} --->|Yes|X 
  W --->|No|Z
  X[Create work order backorder] ---> J
  Y(Change status to complete) --->AA
  Z(Pay vendor invoice) --->R
  AA([Finish])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEATURE REQUEST] Elk layout engine for mermaid

2 participants

@ArviFoxy @CLAassistant