Create Mermaid Diagrams With MermaidJS

Over many years, I learned the power of being able to turn words and thoughts into diagrams. I started out like most diagrammers, using a language called Unified Modelling Language (UML). In short, UML is a set of standard diagrams to aid software development. Instantly, I saw the power a diagram could have. I'd go as far to say it's become a superpower. The ease with which you can explain something with a diagram is like nothing else, but it always felt a bit cumbersome to do with the tools that were on offer.

Then, along came MermaidJS, a tool to write diagrams as you would code, and automatically render them from that code. It wasn't the first to do this, but I'd argue it's the first to go very mainstream, and see widespread adoption and support. Suddenly, creating Mermaid diagrams made diagramming became so much more accessible. You didn't need a special program, all you needed was a text editor. Since then, I've advocated for adopting Mermaid with the companies and individuals I work with, and never looked back.

What Do Mermaid Diagrams Look Like?

Before diving into specific use cases for creating Mermaid diagrams, let's take a look at its power. Here's some markup to create a Mermaid diagram:

  flowchart LR
    a --> b & c--> d

That's Mermaid markup. It looks pretty simple, right? Here's how that Mermaid diagram looks:

          flowchart LR
            a --> b & c--> d
        

This diagram was created using diagrams as code.

A fun fact: the Mermaid diagram above was rendered in your browser by Mermaid. There's special tools or programs needed, no manual exporting of images, Mermaid has the ability to instantly render a diagram from simple markup.

Ready to get started? Check out the use cases at the top to pick one you're most interested in, or start with architecture diagrams.

Learn To Create Mermaid Diagrams

Now that you've seen the power of MermaidJS, perhaps you want to learn more and get really in-depth.

The guides on this website are a perfect introduction, but if you want to learn even more I cover how to create application flow diagrams, along with a number of other use cases and diagrams, in my book: Creating Software Using Modern Diagramming Techniques, published via The Pragmatic Programmers.