bug: Invalid Diagram Markdown

[dwmkerr]

In contrast to #11 if the diagram markdown syntax is incorrect, a different error type occurs and we get the following output:

Mermaid also drops this in the bottom of the page:

Suggest that we create a placeholder div for the diagram content so that at the very least the error content is inline where the user can see it (even better would be to catch the error, show a proper error message formatted correctly and not this mermaid content, but I have tried debugging the mermaid code and it looks like at this point it already tries to render the output - we might be able to grab the error element and delete it.

Example code that causes this issue:

please create a mermaid.js diagram showing the realationship between a chrome extension tab, content script, background script

graph TD
    subgraph Extension
        BackgroundScript((Background<br>Script))
        ContentScript((Content<br>Script))
        BackgroundScript-->ContentScript: Send message
        ContentScript-->BackgroundScript: Send message
    end
    subgraph Chrome
        Tab(Tab)
        Tab-->ContentScript
    end

Suggested Resolution

1. Give mermaid.js a div to work with for content, which is below the diagram, so that the error output is shown in a sensible place
2. Delete this div if we detect and error and show our own error
3. Delete the error content if it errors and we cannot control where the error is outputted
4. Make sure to be consistent with #11

[dwmkerr]

Note that #19 improves on this by encapsulating the mermaidjs error content in our container div.

[sebastienbo]

I also noticed that chatgpt can make simplified mermaid code or advanced mermaid syntax. This is what i do when i get the syntax error: When telling chatgpt to re-create the diagram using valid mermaid code, then it fallsback to simple syntax, and then I can visualize the simplified diagram.

Offcourse this is a workarround, it would be better if advanced syntax was supported.

I'm really a fan of this plugin.

I'd like also to propose an option to automaticly render de mermaid code to a visualisation(as default), and show code as an option (reverse), but if a syntax error is detected, offcourse only show the source code by default.

I've now added in my "custom instructions" in "How would you like ChatGPT to respond?" added : "Procedures, Relationships or workflows can be shown using mermaid markdown as this helps visually to understand a concept. "

Now it automaticly creates mermaid code whenever it is explaining one of such subjects. It greeatly helps understand knowledge as a visual learner