Mermaid diagrams are rendered randomly

[igeofr]

Hi,

We have insider status and we try to take full advantage of the mermaid rendering but we get a random rendering.

graph LR
  A[Start] --> B{Error?};
  B -->|Yes| C[Hmm...];
  C --> D[Debug];
  D --> B;
  B ---->|No| E[Yay!];

Loading

If we reload the page several times we get a visual error :

Syntax error in graph
mermaid version 8.8.4

And the console shows this error:

bundle.e7b111c5.min.js:3 Uncaught Error: Parse error on line 1:
Syntax error in grap
^
Expecting 'open_directive', 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    at Xt.parseError (flow.jison:293)
    at Xt.parse (flow.jison:363)
    at xe (flowRenderer.js:291)
    at Object.render (mermaidAPI.js:339)
    at bundle.e7b111c5.min.js:3
    at Object.next (bundle.e7b111c5.min.js:3)
    at t._next (bundle.e7b111c5.min.js:3)
    at t.next (bundle.e7b111c5.min.js:3)
    at bundle.e7b111c5.min.js:3
    at Je (bundle.e7b111c5.min.js:3)

The configuration can be viewed here : https://github.com/geotribu/website/blob/features/mermaid/mkdocs.yml#L198-L202

[squidfunk]

Thanks for reporting. Can you create a reproducible example? If so, please open a new issue, it’s probably a quick fix then 😊

[Guts]

you're using fence_div_format. This is not officially supported with the embedded integration.

Yes, I've switched on the fence_code_format on the switching branch

You might try and remove the minify plugin for the transitioning phase.

Okay, let's try it!

[Guts]

Sorry for the delay, we have been very busy on the tags side lately.

Done:

• switched to format: !!python/name:pymdownx.superfences.fence_code_format - see mkdocs.yml
• removed the concurrent mermaid.min.js 8.6.4 from th extra_javascript section
• removed the custom script block from the main template (see this commit)
• try without the minify plugin: no changes. So we enabled it again but disabling JS minifying (see relevant section into mkdocs.yml)

And... we still have an erratic behavior with sometimes a error message into the FF console:

Uncaught Error: Parse error on line 1:
Syntax error in grap
^
Expecting 'open_directive', 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    parseError flow.jison:293
    parse flow.jison:363
    xe flowRenderer.js:291
    render mermaidAPI.js:339
    ui bundle.4b1ed6f7.min.js:3

I've made a quick video to show you the behavior:

mermaid_insiders_glitch.mp4

[squidfunk]

Thanks for getting back. I have no idea where this error is coming from. It certainly doesn't have to do with minifying, so it doesn't really matter how you configure the minify plugin. I'm afraid I don't have the time to dig into your code base, but if you can reduce it to a small reproduction, I'm happy to look into it. I haven't seen this behavior until now, and my guess is that it's related to your customizations. You could try to remove your customizations one-by-one to narrow it down.

[facelessuser]

I may be able to give it a spin this weekend. I'd like to see how reproducible this is. I'm not currently using Insiders right now, but I can access it and set it up locally to test. I do have Mermaid working with Material without issues: https://facelessuser.github.io/pymdown-extensions/extras/mermaid/. Material's work I know is at least loosely based on the experiments and work I did, though I honestly haven't looked to see how much (if at all) it deviates. I may be able to identify what is going on, assuming I can reproduce it.

[facelessuser]

Yeah, maybe I'll wait for a minimal example. I too am not excited about sifting through custom conflicts.

[Guts]

Hi @igeofr @facelessuser and @squidfunk ,

It seems that it has been fixed by #3232

[squidfunk]

Yep, I was finally able to reproduce it 😊 Glad it's fixed now for you too.