Table of Contents

mermaid

项目地址:

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

mermaid依赖于phantomjs

PhantomJS是一个无界面的,可脚本编程的WebKit浏览器引擎。

mac 安装

npm install -g mermaid
brew install phantomjs

使用

term 输入 mermaid –help

Usage: mermaid [options] <file>...

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`
  -O --outputSuffix    Suffix to output filenames in front of '.svg' or '.png', defaults to ''
  -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
  -g --ganttConfig     Specify the path to the file with the configuration to be applied in the gantt diagram
  -h --help            Show this message
  -v --verbose         Show logging
  -w --width           width of the generated png (number)
  --version            Print version and quit

时序图例子

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    alt good
        Bob-->John: Jolly good!
    else bad
        Bob-->John: Jolly bad!
    end
 

流程图例子

        graph LR
            A-->B
            B-->C
            C-->|back|A
            D-.->|dot|C
 

甘特图例子

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d