Skip to content

Mermaid Diagrams not Properly Rendering in Snippets

Summary

Mermaid diagrams render as code blocks in a snippet's included markdown files, and in the snippet's description. When editing the description of a snippet, the preview button does properly render the markdown diagrams.

Demo

This issue appears unique to mermaid, and doesn't seem to affect PlantUML graphs, for example.

Steps to reproduce

  1. Make a new snippet

  2. Add a markdown file, and put the following code in the snippet's description, as well as in the markdown file:

    View Code 
    ```mermaid
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
```

  3. Click Preview

  4. See intended behavior

  5. Create the snippet

  6. View the snippet, see bug

Example Project

Here's a snippet I made demonstrating this bug.

What is the current bug behavior?

Mermaid graphs are rendered as code blocks, instead of being rendered in the markdown document:

image

What is the expected correct behavior?

Mermaid graphs should be rendered in the markdown document:

image