Skip to content

Add opt-in ELK layout support for mermaid diagrams#22

Open
fuzzybear3 wants to merge 1 commit into
selimacerbas:mainfrom
fuzzybear3:mermaid-elk-support
Open

Add opt-in ELK layout support for mermaid diagrams#22
fuzzybear3 wants to merge 1 commit into
selimacerbas:mainfrom
fuzzybear3:mermaid-elk-support

Conversation

@fuzzybear3
Copy link
Copy Markdown

@fuzzybear3 fuzzybear3 commented May 15, 2026

Summary

Adds a mermaid_elk config option (default false). When enabled, the browser preview loads @mermaid-js/layout-elk@0.2.1 from jsDelivr and registers it before mermaid initializes, allowing diagrams to use:

%%{init: {"layout": "elk"}}%%

Why

ELK produces noticeably cleaner layouts for medium/large flowcharts and class diagrams than mermaid's default dagre layout. It's opt-in because it adds ~800 KB on top of what the preview already fetches from CDN, and most diagrams don't need it.

Changes

  • lua/markdown_preview/init.lua: new mermaid_elk config (default false); substitutes a __MERMAID_ELK__ placeholder when writing index.html, mirroring the existing __BOTTOM_PADDING__ pattern.
  • assets/index.html: adds a data-mermaid-elk attribute on <html>; in boot(), conditionally dynamic-imports the ELK layout module and calls mermaid.registerLayoutLoaders(...) before the first sync().

Test plan

  • With mermaid_elk = false (default), preview behaves exactly as before — no extra network request on boot.
  • With mermaid_elk = true, a diagram containing %%{init: {"layout": "elk"}}%% renders with the ELK layout.
  • If the ELK import fails, the existing boot try/catch logs the error and shows an inline error message rather than a blank preview.

Adds `mermaid_elk` config option (default false). When enabled, loads
@mermaid-js/layout-elk@0.2.1 from CDN and registers it before mermaid
initializes, enabling %%{init: {"layout": "elk"}}%% in diagrams.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant