Use Mermaid to Create Charts and Diagrams Without Image Editing Tools

Have you ever tried to make a flowchart, or any kind of diagram for that matter, using image editing software or a word processor's embedded tools? It generally doesn't go well, which is why there's dedicated software for the job. But longstanding options like Mirosoft Visio aren't easily available to the average person, and Lucidchart, a web-based alternative, limits free users to 60 "shapes" per document, after which point you'll pay $9 a month.

That's reasonable if you're the kind of person who constantly makes flowcharts, but it's a lot to ask for the occasional use. If you'd rather avoid paying for another subscription, and are willing to learn a little bit of Markdown (essentially, a way to add formatting without a text editor or HTML tags), Mermaid is an open source tool that can be used to create such charts using plaintext.

The simplest way to get started is heading to Mermaid.live. It's a free online tool that allows you to create flowcharts and a number of other diagrams right in your browser. It offers a number of sample diagrams, found in the left-hand column, and playing around with a few of them is a great way to learn your way around the tool. It includes flowcharts, as well as productivity favorites like Gantt diagrams and pie charts.

Credit: Justin Pot

The left panel is where you put the text, and the right panel shows a preview of the chart. If you've used another Markdown editor before it will feel familiar, even if the specifics take some time to memorize. If you've never used Markdown before, there's a bit of a learning curve-figuring out how to best use this tool is going to require either experimenting within Mermaid itself, reading the documentation, or both.

Once created, you can export your charts from this web tool as an image, if you want, or copy the code to use in another app. A number of applications, including Obsidian, Notion, and GitLab, come with built-in support for embedding Mermaid code. (Read the list of integrations to learn about more tools that support Mermaid, and about other dedicated tools for creating within it.)

If you're a power user of flowcharts and diagramming tools, Mermaid isn't going to replace more robust programs built for the task. But if you only occasionally need to make a chart, and especially if you prefer working with text-based tools, it might save you time, and money.