Mermaid Plugin

The Mermaid Plugin brings the power of the mermaid.js library to Typemill. With mermaid, you can create flowcharts, pie charts, and a variety of other diagrams to visualize your workflows and illustrate your data.

Features

The Mermaid library supports a wide range of charts and diagrams, including:

• Flowcharts
• Pie charts
• Sequence diagrams
• Gantt charts
• Class diagrams
• State diagrams
• Entity-Relationship (ER) diagrams
• User Journey diagrams
• Git Graph
• Timeline diagrams

How To Use

You can use the visual editor or the raw editor to create codeblocks with mermaid syntax:

1. Visual Editor: In the visual editor, insert a code block and set the language to mermaid.
2. Markdown Editor: In raw markdown, use fenced code blocks with mermaid as the language.

Example Chart

Here’s an example of Mermaid syntax to create a pie chart. Copy and paste the following code into the raw markdown editor of Typemill. Make sure to remove the backslashes before saving.

\```mermaid
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" : 5
\```

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" : 5

Read the Mermaid Documentation

Not familiar with Mermaid? Check out their GitHub page for syntax examples and detailed documentation.