You have an idea and you want to represent it with visuals, but do not want to spend time on a regular photo or image editing tool like Photoshop or business drawing tool like Visio. You do not want speed big time with your mouse to create a stunning looking diagrams to be used in business presentations. Your target is to create visuals to represent your ideas. You also do not want to spend $$ for this purpose. This could be a simple dependency graph could be a gantt chart with dependency and timeline. Well, there ways to achieve that.

Mermaid is one of the application which perfectly fits for this purpose. This is an open source application with lots of ports and comes with implementations that can be plugged into other applications. You just need to learn simple syntaxes which does not need more than 30 mins. But once you go through that you can recreate different complex graphs in no time. Those are good looking too. In fact many of them can be used on business presentations as well. Mermaid also gives you option to get all these things done without downloading a thing. Yes, you got it right, they have a web application as well. The over options you have is to install the application and use any text editor

GraphViz (short for Graph Visualization is another set of applications, first published way back in 1991 by AT&T Labs Research and is open source. This is still very relevant and can visualize very complex graph. It uses DOT language. DOT is a graph description language. DOT graphs are typically file with extension gv or dot . dot, neato, twopi, circo, fdp, and sfdp etc are part of the GraphViz program and can process dot files.

GVedit tool combines a text editor with noninteractive image viewer and can be used out of the box

Mermaid input syntax

Common use of mermaid graph is flow. Here is sample syntax of a top to down flow graph. It starts with a graph definition which is Graph follower by direction of flows.

Direction may be

  1. Top to bottom or down, represented by TD or TB.
  2. Bottom to top represented by BT
  3. Right to left represented by RL
  4. Left to right represented by LR

Example start line is Graph TD

Node

Next is node. Node is represented by a character or word. Multiple words can be added in a node. Node shapes are rectangle [ ] , rounded rectangle ( ) , diamond { } , circle (( )), asymmetric > ]

Link between Nodes

an arrow head is represented by --> between nodes. --- represents link with out head. -.-> represents dotted link texts on the link are done puting the text between | | .

Following is the entire code used to create the Picture here

Graph TD A(Start) -->|comment| C{Let me think} C -->|One| D[Box 1] C -->|Two| E[Box 2] C -->|Three| F[Box 3] F -->G(Stop) E -->G D -->G

Mermaid-Flow-TD

The same code but direction is changed by changing the direction on on the first line ( Simply changing TD to LR ). Following is the code and and graphs

Graph LR

A(Start) -->|comment| C{Let me think}

C -->|One| D[Box 1]

C -->|Two| E[Box 2]

C -->|Three| F[Box 3]

F -->G(Stop)

E -->G

D -->G

Mermaid-Flow-LR

So thats fun and it is super easy to create graph simply by writing.

I would like to cover Mermaid in greater details with other supported graph format in future articles. GraphViz syntaxes are very close to Mermaid texts. If you want to explore GraphViz and get started, please feel free to check my article Writing graph with GraphViz