Mermaid flowchart doesn't seem to be supported

[khoadoan91]

Hi,

It seems the mermaid flowchart isn't supported. I tried to work around by switching from "flowchart" to "graph", but subgraph can't interact with other components. Below is an example that the extension is not able to display. Can you help me check what the issue is?

flowchart TD
    subgraph sub
        direction LR
        a --> c
        b --> c
    end
    1 --> sub
    sub --> 2
    2 -->|info| 3

Loading

[woja]

I got here by trying to show a git graph - but I think the problem is the same. In my case I needed to remove the %%{init:{ ... from the start of the mermaid, and add a trailing colon : after gitGraph (neither change is required for valid mermaid syntax)

---

Looking into the code I think the issue is in the recognition of mermaid charts. There is a regex to check for valid charts - and this will not match flowchart:

matchRegex: /^(sequenceDiagram|graph\s+\w{2}|gantt|classDiagram|pie|gitGraph:|erDiagram|journey)\s*\n/,

It will also (unsurprisingly!) not match any of the other new diagram types added since August 2020

2 options would be:

• find the missing graph types (from mermaid releases) and update the regex
  • this would work until the next new type is added
  • it would not support the %%{init{ unless that was also added to the regex (care should be taken to allow for whitespace / new lines within the above)
• remove the regex for matching and always assume that a mermaid block may be valid and send it to the service
  • mermaid is robust to errors and this way the extension would show the mermaid error image if the mermaid syntax is invalid
  • this extension would be automatically as up to date with mermaid releases as the kroki.io service

[linuxcrash]

I have the same problem with the mermaid flowchart diagram. Would it be possible to get this fixed?

The plugin otherwise is very useful!