Friday, March 13, 2015

"mermaid" - OMG!!!!!

Ok, so I am really excited to have found mermaid- the software. LOL.
I was looking for a tool that I can generate a chart. It started off with markdown and I ended up running into mermaid.

mermaid is written in JavaScript, so you will need to have node.js installed on your lappy. Come to think of it, I haven't write an article about node.js, yet. I will do it later. *giggle*

NOTE: I found out later that mermaid requires Phantom.js and not node.js. I need to rewrite this section. One thing for sure, all of these require npm. Yeah, more stuffs to write about...

Installing mermaid

Installing mermaid is pretty simple, but only if you have node installed. So if you don't have node go ahead and install it on your puter.
The following is a script of me installing mermaid on my beloved Macbook Pro.

[reia-mbp15:~] reia% sudo npm install -g mermaid
Password:

> contextify@0.1.13 install /usr/local/lib/node_modules/mermaid/node_modules/d3/node_modules/jsdom/node_modules/contextify
> node-gyp rebuild

gyp WARN EACCES user "root" does not have permission to access the dev dir "/Users/reia/.node-gyp/0.10.33"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/mermaid/node_modules/d3/node_modules/jsdom/node_modules/contextify/.node-gyp"
  CXX(target) Release/obj.target/contextify/src/contextify.o
  SOLINK_MODULE(target) Release/contextify.node
  SOLINK_MODULE(target) Release/contextify.node: Finished
/usr/local/bin/mermaid -> /usr/local/lib/node_modules/mermaid/bin/mermaid.js
mermaid@0.4.0 /usr/local/lib/node_modules/mermaid
├── which@1.0.9
├── minimist@1.1.1
├── he@0.5.0
├── semver@4.3.1
├── mkdirp@0.5.0 (minimist@0.0.8)
├── moment@2.9.0
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── dagre-d3@0.3.3 (graphlib@1.0.1, dagre@0.6.4, lodash@2.4.1)
└── d3@3.4.13 (jsdom@1.0.0)
[reia-mbp15:~] reia% 

How do I run "mermaid"?

After the installation, I tried to run it but it failed.... *sad face*.

[reia-mbp15:~] reia% mermaid
mermaid: Command not found.
It turns out that I didn't have "/usr/local/bin" in my PATH, silly me. LOL.
Using absolute path fix that issue, for now.
Note to self, add /usr/local/bin/ into the .cshrc
[reia-mbp15:~] reia% /usr/local/bin/mermaid

You had errors in your syntax. Use --help for further information.
You must specify at least one source file.
Cannot find phantomjs in your PATH. If phantomjs is installed
you may need to specify its path manually with the '-e' option.
Run this executable with '--help' or view the README for more
details.
[reia-mbp15:~] reia% /usr/local/bin/mermaid --help

Usage: mermaid [options] ...

file    The mermaid description file to be rendered

Options:
  -s --svg             Output SVG instead of PNG (experimental)
  -p --png             If SVG was selected, and you also want PNG, set this flag
  -o --outputDir       Directory to save files, will be created automatically, defaults to `cwd`
  -e --phantomPath     Specify the path to the phantomjs executable
  -t --css             Specify the path to a CSS file to be included when processing output
  -c --sequenceConfig  Specify the path to the file with the configuration to be applied in the sequence diagram
  -h --help            Show this message
  -v --verbose         Show logging
  --version            Print version and quit
[reia-mbp15:~] reia%

Example

you can find a lot of example of mermaid at http://knsv.github.io/mermaid/. Here's just a short one:

sequenceDiagram
Customer ->> HelpDesk: Case Open
Note right of HelpDesk: SR open via CRM
if there is no known PR
Then HelpDesk open a new PR HelpDesk->> ACE: Create a new PR Note right of ACE: Update the PR
and change PR status to
"info"

No comments:

Post a Comment