feat #5042: Add flowchart.maxEdges config.

[sidharthv96]

📑 Summary

• Bumps up max edges to 500 (can lower if there is issue).
• Add a maxEdges config to allow modifying this limit.

Resolves #5042

📏 Design Decisions

Now the error thrown will help to set the config.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	d3257ce
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/657158abeee1d800085321ba
😎 Deploy Preview	https://deploy-preview-5086--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Merging #5086 (d3257ce) into develop (4f9988a) will decrease coverage by 0.10%.
The diff coverage is 66.66%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #5086      +/-   ##
===========================================
- Coverage    76.16%   76.06%   -0.10%     
===========================================
  Files          166      166              
  Lines        13877    13878       +1     
  Branches       705      705              
===========================================
- Hits         10569    10556      -13     
- Misses        3146     3151       +5     
- Partials       162      171       +9     

Flag	Coverage Δ
e2e	81.03% <66.66%> (-0.15%)	⬇️
unit	43.04% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
packages/mermaid/src/diagrams/flowchart/flowDb.js	81.62% <66.66%> (+5.46%)	⬆️

... and 11 files with indirect coverage changes

[sidharthv96]

@knsv I'm not sure if the limit being configurable would cause issues. Should it be added to the secure list, so it cannot be modified in the diagram?

[knsv]

@knsv I'm not sure if the limit being configurable would cause issues. Should it be added to the secure list, so it cannot be modified in the diagram?

It should be added to the configuration, and just as you mentioned, it needs to be added to the secure list. If not a malicious diagram author could still bring a page down. With that, I will be happy to include this! Good one!

[sidharthv96]

If we are adding to secure list, then majority of users will not be able to modify the limit. So we need to figure out what a good limit is on the edge count.

Even though the % is small, there are thousands of users with long diagrams. And this is from the live editor stats only. There could be internal users with large diagrams, which would've broken when they updated to v10.6.1.

Also, are flowcharts the only graph type vulnerable? It would've been ideal if we could isolate the parse and render loop.

[knsv]

Any diagram could be vulnerable, but the difference for flowcharts is the concise way to create many edges as in:
a & b & c & d --> e & f & g & h This statement generates 16 edges with very little code.

A reasonable limit is tricky to set, so a configuration is a good idea.

As for the other diagrams, we could cover those when we align the rendering between the graph-based diagrams.

[sidharthv96]

@knsv added maxEdges to secure, and moved it to root config level, as this might be applicable for other diagrams too.

[jvieille]

Is "Bumps up max edges to 500 (can lower if there is issue)." means we cannot configure more, but only less?

"Add a flowchart.maxEdges config to allow modifying this limit." Will this work ?
mermaid.initialize({startOnLoad:true, logLevel: 1, theme: 'neutral', flowchart.maxEdges:2000 });

What is the reason behind such limit and the few others in Mermaid)? Wouldn' JS or the browser simply fails id something exceeds its limits?

[sidharthv96]

@jvieille mermaid.initialize({startOnLoad:true, logLevel: 1, theme: 'neutral', maxEdges:2000 }); will work.

What is the reason behind such limit and the few others in Mermaid)? Wouldn' JS or the browser simply fails id something exceeds its limits?

The browser tab will hang when the number of edges is high. This is a problem for websites that display 3rd party content, as someone can break the page.