mermaid: diagram, flowchart from text

mermaid_comp

There are a large number of tools (like Gliffy or Visio) available to generate diagrams an flowcharts. Each has its own unique features. But how about visually documenting your projects through text (like markdown)? I am not speaking o ASCII art here. mermaid is a new tool under development to make it possible.

mermaid is written in JS (javascript) and has simple directives to generate a particular kind of construct. For example, the diagram above has been generated by the following code:

graph LR;
    A[Hard edge]-->|Link text|B(Round edge);
    B-->C{Decision};
    C-->|One|D[Result one];
    C-->|Two|E[Result two];

Here’s a live example.

At the time of writing mermaid can draw charts, graphs, nodes or links of different shapes and sizes and understand directions of arrows among other features. It also supports defining re-usable classes like templates.

Installation

Run:

$bower install mermaid --save-dev
// OR
$npm install mermaid --save-dev

Usage

Include mermaid module in your webpage as

mermaid will look for tags with class="mermaid". From these tags mermaid will try to read the chart definition which will be replaced with the svg chart. Check the project page for extensive documentation.

I’ld love to see support for sequence diagrams and other UML artifacts in mermaid.

Webpage: mermaid

2 thoughts on “mermaid: diagram, flowchart from text”

  1. I downloaded the zip file for mermaid. Unzipped the file. Attempted running a quick html script, using mermaid, but I can not get it to work. From what I’ve read about mermaid, it seems like a nice tool to have. I really would like to get it to work. I don’t have npm on my system (windows 7), do I need it? What guidance provided will be greatly appreciated.

    Thanks in advance.

    Cliff

Leave a Reply

Your email address will not be published. Required fields are marked *