How to use layout: elk for mermaid flowchart #5552
Replies: 2 comments 2 replies
-
|
well, in my opinion |
Beta Was this translation helpful? Give feedback.
-
|
Sorry I am unable to load in elk without modding NiceGUI. If you have a solution do let me know! |
Beta Was this translation helpful? Give feedback.
-
|
Yeah it's not working with NiceGUI right now... As a baseline, here is a HTML demo courtesy of 10% Gemini 90% yours truly (Gemini just keeps getting off track and refuse to do mermaid elk for some reason 😠): <!DOCTYPE html>
<html>
<body>
<div class="mermaid">
---
config:
layout: elk
look: classic
theme: default
---
flowchart TB
A[Start] --> B{Decision}
B -->|Yes| C[Continue]
B -->|No| D[Stop]
</div>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs';
mermaid.registerLayoutLoaders(elkLayouts);
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html>Outcome (Left) vs vanilla (Right): 
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
First Check
Example Code
Description
The default mermaid layout is not very clean for the large flowcharts hence wanted to utilize the layout: elk since It is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support. hence tried below code but doesn't seem to be working.
any way to make the layout: elk work in nicegui mermaid flowchart
NiceGUI Version
3.2.0
Python Version
3.13.5
Browser
Chrome
Operating System
Windows
Additional Context
No response
Beta Was this translation helpful? Give feedback.
All reactions