Mermaid Plugin

The Mermaid Plugin brings the power of the mermaid.js library to Typemill. Create stunning flowcharts, pie charts, and a variety of other diagrams to visuale 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:

Visual Editor: In the visual editor, insert a code block and set the language to mermaid.
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.