Mermaid does not render if all diagrams have directives

[fdaugs]

If all charts have directives (in my case, the theme), they will not render:

As soon as I add a diagram without directive all diagrams work again.

The verbose output contains no errors.

[geoffreymcgill]

Hi @fdaugs. I was not able to reproduce the issue.

I think the following sample is exactly how you have it above, but can you copy the following and give it another try?

```mermaid
%%{init: { 'theme': 'forest' }}%%
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

The above was pulled directly from the Mermaid Directives docs at https://retype.com/components/mermaid/#directives.

If the sample above is failing, please add the following sample.md Page to your project and see if this new diagram is rendering properly:

# Sample

```mermaid
%%{init: { 'theme': 'forest' }}%%
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

If sample.md is failing, please open the browser developer tools and see if there are any JavaScript errors being thrown. You can open the Developer Tools from the View > Developer > Developer Tools menu if using Chrome.

Which version of Retype are you using? Please check using the command retype --version

Hope this helps.

[fdaugs]

Hi @geoffreymcgill,

thanks for your reply. I'm using retype v3.0.0. Here is a screen recording of a minimal example (The browser inside of VS Code is just for demo purposes, other browsers also don't work):

https://github.com/retypeapp/retype/assets/15034591/7edd4fff-35de-4465-93e2-6e603f359dc0

Hot reloading after inserting the directive seems to work, but as soon as I reload the page, the diagram stops rendering. It also works, as soon as at least one diagram without directive is present:

# Sample

```mermaid
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

%%{init: { 'theme': 'forest' }}%%
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

[geoffreymcgill]

We upgraded the Mermaid version to their latest release and that seems to have fixed the problem. The new Mermaid version will be included in the upcoming Retype v3.1 release, which should be public very soon.

Until that time, it would be best to avoid using Mermaid Directives, or at least put those charts containing a Directive below a chart that does not contain a Directive.

[fdaugs]

Okay. Thank you!

[xendarboh]

this bug is still present in retypeapp 3.1.0

[geoffreymcgill]

this bug is still present in retypeapp 3.1.0

Hi @xendarboh. Any chance you could provide a .md sample demonstrating how to reproduce?

As well, which web browser and OS are you testing with?

I tried several different Mermaid with directives samples and they all seemed to be rendering correctly.

[xendarboh]

this bug is still present in retypeapp 3.1.0

I was wrong. Confirmed working correctly in v 3.1.0. (I had a mismatch of global vs local versions.)

The mermaid feature works great, thanks!