Load from Mermaid with one node throws error

[Alexander Bondarew | Fenêtre bv]

Hi,

According to documentation I can save and load diagram definition using mermaid script.

However I noticed, case, when I have only one node and try to load, I'm getting console error:

node_modules/@syncfusion/[email protected]/dist/ej2-diagrams.umd.min.js (10:853553)

Cannot set properties of undefined (setting 'color')

That's because function diagramInstance.saveDiagramAsMermaid returns only style of node, when there is only one node presented, next time, when I try to load in, this error is raised.

I tried to modify mermaid content in case if there is one node, just adding this node before "style" line (A[Start]), so it would look like:

flowchart TD

                A[Start]   

                style A fill:#90EE90,stroke:#333,stroke-width:2px;

but another error was thrown, which lies in diagram.js function convertMermaidToFlowChart:

You can see that example script above works fine here:  Mermaid Live Editor
But not with your component.
I expect it working fine with only one node presented:

I could repro this issue in this sample: stackblitz

P.S. Yes, I'm using only FlowChart layout, like it mentioned in docs

[Meriton Jamesdurai]

Hi,

 

Thank you for reporting the issue.

We were able to replicate it and will perform further validation. We’ll provide an update as soon as possible.

We appreciate your patience. Please let us know if you have any further questions.

 

Best regards,
Meriton

[Moulidharan Gopalakrishnan]

Hi , 

Reported Issue: Error while loading mermaid flowchart data with single node data

We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on May 27, 2025 weekly patch release. 

Feedback link: Error while loading mermaid flowchart data with single node data in Vue | Feedback Portal

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Best Regards,

Moulidharan

[Meriton Jamesdurai]

Hi,

Reported issue: Error while loading mermaid flowchart data with single node data

 

We have fixed the reported issue and included it in our latest patch release which is rolled out successfully.

Please upgrade to the latest version (v29.2.7) packages of the diagram to resolve this issue.      

https://www.npmjs.com/package/@syncfusion/ej2-diagrams

 

Root cause: The single node data does not include any connections to represent a flowchart, and as a result, the syntax is not correctly converted into a valid data collection for the flowchart. When the connector data is processed, this leads to an exception, resulting in an undefined error.

Regards,

Meriton