Poor Performance and Bad Alignment

[AntonioNoack]

Describe the bug I created a class-hierarchy like diagram with 32 entries and the graph-TB style. Typing is sluggish, meaning that it takes about 200-400ms (a guess) for my key-stroke to register in the text editor. There are also some items, that should be aligned differently. Also, when a row is overfull, there should be something like overflow to a next line.

Is there a way to position items manually to fix these?

To Reproduce Link to Live Editor: Steps to reproduce the behavior:

See https://mermaid.live/edit#pako:eNqFlF9vgjAUxb8K6bO-7JGHJfPfYuI2M4yZCS8dvWIjtOT2ksmM331QEBGB8dRzf6e3py1wZoEWwFwWIk8OzmbiKyd_PMoicMZjx8hfMCMn0JFG43AlnL1WZHL07Ky5gqj02-Gt-Io6TRrE6hteSUMNWsh7-DVId4P0adbCO8s94sGxnfiGXxB51oUt_UhIajXh2N7tUiUpNabdtMUbOJEtDdO3VSdfyAj6Z0-0joCrfsN7Gn8D9vO5SuN-Oi1uvIEb3aqd0zDdQkCDHRaR5vQff-jSyC8kSRWW5UrU5zY_JXl-wEc61Wovw8ad3UMBhdYdEzcIsJXw80jWqBNAypbKJDZvO-onKAFYh61l-WYGoBqNa3lNS6gjLzhADKXhrmRNM-RhmLeriOlqVK5ZLuMrNmIxYMylyD_9c-H3GdklmJsPBcejz3x1yX1pIjhVh8LcPY8MjBhPSXuZCphLmMLVNJM8_43ElevyB_2gbAg

Expected behavior When a row becomes too long, the rest of items should (somehow) overflow into a line below it. Symmetric alignment that mostly depends on the parent only. Typing should be smooth, syntax highlighting can be delayed a little for the new characters (that would be fine).

Screenshots This is how it currently is:

This is how I'd expect the alignment to be, and where it bothers me (without overflow yet).

This is kind of how I imagine, the layout could be better (because not soo wide that the text gets unreadably small):

Unfortunately, for the overflow, I know that it's a hard problem to align graph nodes in a nice way 😅. (at one point, I tried to implement it myself for a slightly cyclic graph with 1000+ nodes, but failed.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome and Edge
• Version: 103.0.5060.114 (Official Build) (64-bit) for Chrome and 103.0.1264.49 (Official build) (64-bit) for Edge

I also complained about performance, so here is my hardware:

• CPU: Ryzen 5 2600
• GPU: RTX 3070
• Memory: 32 GB DDR4 3200

Additional context

[sidharthv96]

The node placement is messed up, but it's handled in <> repo, if you can create an issue there, that'll be tracked correctly.

Regarding performance, I'm not able to recreate it locally in firefox. Change seems to be instantaneous.

![https://user-images.githubusercontent.com/10703445/179363715-5e3e5eef-fbdf-44a7-9012-893ed9652cac.mov]

We could try performance profiling your browser and see what's the issue.

[AntonioNoack]

This is one of those laggy frames. the bar is 300ms long, and is spent mostly in render(), mf(), _t(), f.exports() Zooming in further indicates that most time is spent inside "Recalculate Style" and Chrome is showing me the warning "Forced Reflow is a likely performance bottleneck".

Regarding it, I found https://stackoverflow.com/questions/37183017/google-devtool-timeline-forced-reflow-is-likely-performance-bottleneck, so probably the code is reading a variable that it should cache instead.

[sidharthv96]

@AntonioNoack, can you check if there is any difference in https://deploy-preview-917--mermaidjs.netlify.app/ ?

[AntonioNoack]

I just checked, and I get the same lag issues there.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days

[zloid]

https://user-images.githubusercontent.com/35703589/204103419-c41cbf5e-67be-4cd8-8e25-c55b93831bc6.mp4

When the flowchart gets a little bigger, then the performance drops noticeably. I type quite fast, but there is a delay in rendering charts. The video shows as if I'm typing with pauses, but this is not so, it's just that the live editor can't cope. I have a powerful PC with Win 10.

Is there a chance that performance will improve?

By the way, this extension for the VSC do a good job with rendering and working pretty fast, but not complete: https://github.com/mjbvz/vscode-markdown-mermaid

[sidharthv96]

@zloid, does turning off auto sync help the performance of the editor?

[zloid]

@sidharthv96 yes, with sync is disabled, performance is better. It would be nice if there was performance even with sync is enabled :)

By the way, thanks for your work!

[indyteo]

Hi, Regarding the performance issue I experience the same (Firefox on Ubuntu) and this is clearly related to the time cost to re-render the diagram. No issue when auto-sync is off. I think this is because the diagram is rendered every keystroke, but instead we should adopt a less aggressive syncing strategy:

• Every time a keystroke is typed: We mark the diagram as dirty
• If there is another keystroke within 0.5 second (example value): Reset the 0.5s timer and mark the diagram as dirty is necessary
• Otherwise, when the timer ends without an additional keystroke: Re-render the diagram and mark it as not dirty anymore.
• Additionally, to avoid huge out-of-sync if the user is taping continuously, every 5 second for example re-render the diagram if it's dirty. It may cause a small lag but when taping continuously, it's better to have a small lag every 5 second than at each keystroke.

On the other hand, I doubt that the diagram render is really async despite the name of the function used (source), because of this await here. Why not using .then() instead, to make the call truly asynchronous?

[jsakas]

The poor performance could be improved with a simple debounce. If I type a word such as Redirect, it seems to try to render the graph for every keypress, which kills the performance. Is there already a debounce in place? It doesn't seem like it from my end.

[sidharthv96]

There is debouncing added when the render time exceeds a threshold.

https://mermaid.live/edit#pako:eNrtlj1PxDAMhv-KlelOOsReISQORhCIj62LSd0mutYOTnJSQfffyVHK18raTPHrN9abJ0vejJWGTGUGz82AoWYAFUmr1aewXh8lgFv1nec4FQDXwh04H5PoOGtV5a3wqkVo8eRZZLeeO3cSco_qIyYvPKsAW_XJRwdh6kOIo3XSSzcC5uRE4VF4hG1-xc9T9xQJ1bp5xi0DtS3Z5PdMMZ496-k5cgMtYcpK8YfvIicZSgALVulPkKf4bZ3W5YdnT5DIOvYv-a_hISkm6sq40COz5-53_0K7PBAnKBDDV_dRpP8adEcMx7ABA-ks3pAO6JuF-kJ9ob5QX6gv1Bfq_6RO5Z4UkzMbM0zPUH48b0dPbZKjgWpTlW2DuqtNzYfiK8TkYWRrqqSZNkYld85ULfaxVDk0Je6Vx05xmCyHdzDu63Y