Mermaid Live Editor | Guide for Beginners

Mermaid Live Editor is an online tool that allows us to create, edit, preview, and share Mermaid diagrams/charts. It is a live editor, so you will see the output in real-time. Mermaid Live Editor is an open-source tool that makes it completely free to use for personal or commercial projects.

Basically, Mermaid Editor was created to help you quickly draw flowcharts and Gantt charts.

There are many platforms and tools that support Mermaid out of the box. Most of them either have native support for Mermaid or allow integration by means of plugins, extensions, etc. They are great in their respective use cases, but if you are looking for a free online Mermaid diagram editor to quickly render and save a Mermaid diagram, the Mermaid Live Editor will be the preferred choice.

Today, I’ll teach you about the different features of this editor and how to use them.

After reading this guide, you will be ready to start creating diagrams in Mermaid Live Editor.

Mermaid Live Editor Features

• Edit and preview Gantt charts, flowcharts, and sequence diagrams in real time.
• Save the result in SVG format.
• Get a link to a viewer of the diagram so that you can share it with others.
• Get a link to edit the diagram so that someone else can tweak it and send a new link back

Docker

Run published image

docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor

To configure renderer URL

When building, Set the Environment variable MERMAID_RENDERER_URL to the rendering service. Default is https://mermaid.ink

To configure Kroki Instance URL

When building, Set the Environment variable MERMAID_KROKI_RENDERER_URL to your Kroki instance. Default is https://kroki.io

Development

docker compose up --build

Then open http://localhost:8000

Setup

Volta is used for managing node and yarn versions.

This project is set up using Yarn:

yarn install

Development

yarn dev -- --open

This app is created with Svelte Kit.

Release

When a PR is created targeting master, it will be built and deployed by Netlify. The URL will be indicated in a Comment in the PR.

Once the PR is merged, it will automatically be released.