The live editor cannot display elk rendered graphs containing subgraphs

[bmitc]

Describe the bug
When the renderer is set to elk, both the Mermaid Live Editor and the Mermaid CLI cannot display and process the graph if subgraphs are present.

To Reproduce
Link to Live Editor: Link for the below code

This:

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

flowchart TB

subgraph node
    A --> B
    A --> C
end

yields no rendered content and an error (displayed very low on the screen after scrolling):

Whereas the following renders just fine:

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

flowchart TB

    A --> B
    A --> C

Expected behavior
The diagram should render as expected.

Screenshots

See the above Mermaid.live links.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version: I don't know. Version of what?

Additional context

Also, see mermaid-js/mermaid-cli#594 where the Mermaid CLI cannot process these graphs either. This is a major issue for me right now, as the elk renderer is needed for large, automatically generated graphs. For now, I have to remove any use of subgraphs to use the elk renderer.

[hd-deman]

same for me

[Penagwin]

This is reportedly fixed in Mermaid-Chart/issue-tracker#17

Merging #1323 or even better #1328 should hopefully fix it.

[bmitc]

The Mermaid Live Editor still shows the same error, so it's possible the fix doesn't work or it hasn't been deployed yet. This can be verified by clicking the link in the description.

[Penagwin]

@bmitc Mermaid and it's editor are separate and the editor needs to use the newer version of mermaid.

The mermaid live editor is still on mermaid v10.5.0
I think the fix was merged into mermaid in v10.5.1

Which is why we need either PR #1323 or #1328 merged to fix this issue.

[huynhicode]

Elk rendering for flowcharts with subgraphs is working in Mermaid Chart (official integration for Mermaid).

If you do not have an account, you can sign up for a free one.

[Penagwin]

@bmitc

It's working in the #1328 PR preview for this repo if you want to use that
https://deploy-preview-1328--mermaidjs.netlify.app/edit

[Penagwin]

Elk rendering for flowcharts with subgraphs is working in Mermaid Chart (official integration for Mermaid).

If you do not have an account, you can sign up for a free one.
@huynhicode

I am confused, is mermaid-live-editor no longer being maintained?

[huynhicode]

The Mermaid team is actively maintaining Mermaid Live and Mermaid JS.

Mermaid Chart is built on top of Mermaid and is the official integration of the open-source project. The Mermaid Chart Editor includes the same functionality as Mermaid Live with additional features (i.e. AI Chatbot, Code Snippets, etc).

[sidharthv96]

I am confused, is mermaid-live-editor no longer being maintained?

Yes, it's being maintained. I was on vacation recently, so we have few PRs pending. Catching up with everything.
#1328 is merged and will be released soon.

[sidharthv96]

Working now.

[Penagwin]

@sidharthv96 Ah okay, I was confused by whether the referral to the paid product was the intended solution.