How to use layout: elk for mermaid flowchart #5552
-
First Check
Example Codeui.add_head_html('''
<script type="module">
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs"
import elkLayouts from "https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@latest/dist/mermaid-layout-elk.esm.min.mjs"
// register ELK
mermaid.registerLayoutLoaders(elkLayouts)
// then render the diagrams as usual
mermaid.initialize({ startOnLoad: true })
</script>
''')
ui.mermaid('''
---
config:
layout: elk
look: classic
theme: default
---
flowchart TB
A[Start] --> B{Decision}
B -->|Yes| C[Continue]
B -->|No| D[Stop]
''', config={'securityLevel': 'loose'})DescriptionThe 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 Version3.2.0 Python Version3.13.5 BrowserChrome Operating SystemWindows Additional ContextNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 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.
-
|
Thank you so much @evnchn |
Beta Was this translation helpful? Give feedback.
#5556 @HowdyVivek