Mermaid Support

Create dynamic charts in your Slab posts with Mermaid

Updated over a week ago

Mermaid is a tool that renders dynamic charts. In Slab, you can create, modify, and visualize Mermaid charts all within a post. Mermaid enhances your team's ability to visually communicate processes and keep them up to date!

Some examples of the types of charts that you can create are:

You can view all chart types here.

Creating Mermaid charts

To create a Mermaid chart, simply create a code block and select Mermaid as the language.

Once your Mermaid code is entered, a Preview button will appear at the top right corner. Clicking the button will show your Mermaid code as a chart. In read mode, the rendered result is the default view.

If you need to make any modifications to your chart:

  1. Hover over the equation and click the Edit button at the top-right corner.

  2. Make changes to your Mermaid code.

  3. Click the Preview button at the top-right corner to see the rendered change.

If your code has syntax errors, the preview button will be disabled until the errors are resolved.

If you are unfamiliar with Mermaid code, you can learn all about it in Mermaid's documentation website.

Technical details

  • Mermaid version: 10.3.0

Did this answer your question?