Use Mermaid to Create Charts and Graphs Without Image Editing Tools

Have you ever tried to create a flowchart or any diagram using image editing software or built-in word processor tools? This is usually not very good, so there is special software for this job. But long-standing options like Mirosoft Visio are out of reach for the average person, and Lucidchart , a web-based alternative, limits free users to 60 “shapes” per document, after which you’ll pay $9 a month.

This is reasonable if you’re the type of person who makes flowcharts constantly, but asking for them to be used periodically is a bit too much. If you’d rather not pay for another subscription and want to learn a little about Markdown (essentially a way of adding formatting without a text editor or HTML tags), Mermaid is an open-source tool that can be used to create such diagrams using plaintext .

The easiest way to get started is to go to Mermaid.live . It’s a free online tool that lets you create flowcharts and a variety of other diagrams right in your browser. It offers a number of sample charts that can be found in the left column, and experimenting with some of them is a great way to get used to the tool. It includes flowcharts as well as productivity favorites like Gantt charts and pie charts.

Credit: Justin Poth

The left pane is where you place your text, and the right pane displays a preview of the chart. If you’ve used another Markdown editor before, it will feel familiar, even if it takes a while to memorize its features. If you’ve never used Markdown before, there’s a bit of a learning curve: figuring out how to best use the tool will 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 wish, or copy the code to use in another application. A number of applications, including Obsidian, Notion, and GitLab, have native support for Mermaid code injection. (Read the list of integrations to learn about additional tools that support Mermaid, as well as other special tools for creating with it.)

If you are an experienced user of flowcharts and diagramming tools, Mermaid is no substitute for more robust programs built for the task. But if you only need to create charts occasionally, and especially if you prefer to work with text-based tools, this can save you time and money.

More…

Leave a Reply