什么是 mermaid ?

Generation of diagrams and flowcharts from text in a similar manner as markdown.

使用与markdown行为类似的机制来生成流程图和图表。

格式

将以下内容保存为mermaid_sample.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
graph LR
        validate{验证输入合法性}
        clickNext[点击下一步]
        begin[进入找回密码]
        input[输入账号信息及验证码]
        request{调用接口验证成功}
        isPhone{是否是手机号}
        enterGetVerifyCode[进入获取收集验证码界面]
        isEmail{是否是email}
        showPromotion[进入发送成功提示界面]
        showValidateFailed[弹出错误提示]
        getImageVerify[获取图片验证码]
        getImageVerifySucceed{获取成功}
        showVerifyCode[展示图片验证码]
        showVerifyCodeErrorPlaceHolder[展示获取验证码失败占位图]
        clickContact[点击联系客服]
        enterContactView[进入联系客服页面]
        
        begin --> input
        
        subgraph 账号信息验证
            input --> clickNext
            clickNext --> validate
            validate -- YES --> request
            request -- YES --> isPhone
            isPhone -- YES --> enterGetVerifyCode
            isPhone -- NO --> isEmail
            isEmail -- YES --> showPromotion
            isEmail -- NO --> showValidateFailed
            validate -- NO --> showValidateFailed
            request -- NO --> showValidateFailed
        end
        
        begin --> getImageVerify
        
        subgraph 获取图片验证码
            getImageVerify --> getImageVerifySucceed
            getImageVerifySucceed -- YES --> showVerifyCode
            getImageVerifySucceed -- NO --> showVerifyCodeErrorPlaceHolder
        end
        
        begin --> clickContact
        
        subgraph 联系客服
            clickContact --> enterContactView
        end

命令行工具

安装

安装 phantomjs

PhantomJS

安装 mermaid

sudo npm install -g mermaid

使用方式

mermaid -p mermaid_sample.txt -e /path/to/your/phantomjs/bin/file -w 2000

  • /path/to/your/phantomjs/bin/file 表示 phantomjs 的可执行文件路径
  • mermaid_sample.txt 表示流程图文件路径
  • -p 指定输出格式为png
  • -e 指定 phantomjs 运行文件路径
  • -w 指定生成的图片宽度