Mermaid

TinaCMS now supports MermaidJS diagrams in version 2.3.0+

What is Mermaid?

Mermaid is a diagram definition syntax for Markdown.

For more details, check the MermaidJS documentation.

Use this simple graph description language to create flowcharts, sequence diagrams, Gantt charts, and more. Below is a basic example of Mermaid syntax:

Mermaid Configuration

You can also pass configuration options directly inside your Mermaid code block to control how diagrams are rendered. For example, you can set the theme to dark mode as shown below:

Charts

Mermaid can also draw charts. TinaCMS renders any diagram type Mermaid supports, including pie charts and XY charts.

Pie Charts

Use pie to show parts of a whole. See the Mermaid pie chart syntax for every option.

In the TinaCMS editor, select Preview on the code block to see the chart:

XY Charts

Use xychart-beta to plot bar and line series against an x and y axis. See the Mermaid XY chart syntax for every option.

Editing and Previewing Mermaid Diagrams

Once a Mermaid diagram is inserted, you can switch between Edit Mode (for modifying the Mermaid code) and Preview Mode (to see the rendered diagram).

• Desktop: Hover over the diagram to display the edit/preview controls.
• Mobile: Click on the diagram to reveal the edit button, then toggle between modes.

Syntax Error Handling

If there is a syntax error in your Mermaid code, a red error box will appear beneath the diagram. This box displays helpful information and errors reported by the Mermaid parser. Correct the syntax, and the diagram will update.

Deleting Mermaid Diagrams

To delete a Mermaid diagram:

• Desktop: Click on the diagram and press Delete on your keyboard.
• While Editing: Press Backspace at the start of the code block.

Mermaid Package Versioning

TinaCMS uses the Mermaid NPM package to render and parse the Mermaid syntax. TinaCMS 3.7.4 and later use Mermaid v11. Earlier versions are locked to v9.3.0, which does not support XY charts.

However, when installing Mermaid in your own application, you are free to use any version of Mermaid or other compatible rendering packages.

Examples

Set up for Mermaid in React

To quickly get started with MermaidJS in your React project, follow these steps:

1. Install the Mermaid Package

First, install the Mermaid package using your package manager:

2. Create a MermaidElement Component

This component will render Mermaid diagrams in your application. Use the following code:

3. Add the Mermaid Component to <TinaMarkdown />

Integrate the MermaidElement into the <TinaMarkdown /> component to handle Mermaid diagrams:

4. Done! 🎉

Your React app will now be able to render Mermaid diagrams created in the TinaCMS editor.