search

Typemill Plugins

Mermaid Plugin

Use the mermaid syntax to create beautiful flowcharts, pie charts, or various kind of diagrams with Typemill.

How To Use

You can use mermaid in code blocks. Add the keyword "mermaid" in the language field for code blocks in the visual mode or add "mermaid" in raw markdown. This mermaid-syntax:

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

Will result in this mermaid chart:

Screenshot of the rendered pie chart with mermaid

The plugin works with the visual editor as of version 2.3.3 of Typemill. You can check some examples on the GitHub-page of mermaid.

GitHub

If you find a bug or if you want to contribute code, please go to the github repository: https://github.com/succeun/typemill-plugins-mermaid