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

Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s