How to install and play with Mermaid (Markdown Tool) in MACOSX

Mermaid in MacOSX

An great tool for using Markdown to plot blockdiagram. That's see how to install and use it in the MACOS system.

Installation in MacOS

Install Mermaid

Open a terminal from your MACOS. And execute the following CMD line.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node && npm install -g phantomjs && npm install -g mermaid

Started to Use Mermaid

edit file ma

In the terminal, you can use vim editor to add the following to the file ma.

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

execute mermaid

junmeinde-MacBook-Pro:~ junmein$ mermaid ma
Num files to execute : 1
ready to execute png: ma.png
CONSOLE: [08:12:23 (825)]  Starting rendering diagrams (from line # in "")
CONSOLE: [08:12:23 (829)]  Start On Load before: undefined (from line # in "")
CONSOLE: [08:12:23 (830)]  Initializing mermaidAPI (from line # in "")
CONSOLE: [08:12:23 (837)]  Setting conf  gantt - useWidth (from line # in "")
CONSOLE: [08:12:23 (837)]  Setting config: gantt useWidth to 1200 (from line # in "")
CONSOLE: [08:12:23 (867)]  Adding message from=A to=B message=Query type=0 (from line # in "")
CONSOLE: [08:12:23 (867)]  Adding message from=B to=C message=Forward query type=0 (from line # in "")
CONSOLE: [08:12:23 (868)]  Adding message from=C to=B message=Response type=0 (from line # in "")
CONSOLE: [08:12:23 (868)]  Adding message from=B to=A message=Forward response type=0 (from line # in "")
CONSOLE: [08:12:23 (913)]  For line height fix Querying: #mermaidChart0 .actor-line (from line # in "")
saved png: ma.png

You will see the ma.png

open ma.png 

You will see the block diagram.

Web Demo

Here is the Web Demo.

http://knsv.github.io/mermaid/live_editor/

Some more examples.

http://knsv.github.io/mermaid/#flowcharts-basic-syntax