在Markdown中绘制流程图、时序图

发表于 更新于 分类于

Gravizo

介绍一个在markdown中插入流程图、各种图的方法
http://g.gravizo.com
打开上面这个网站, 这个网站提供动态生成各种图的http接口
像这样使用, 接口根据传入的参数返回图

1
2
3
4
5
6
7
8
9
10
11
12
<img src='https://g.gravizo.com/svg?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
'/>

使用

官网中介绍Markdown中是这样使用的

1
2
3
4
5
6
7
8
9
10
11
12
![Alt text](https://g.gravizo.com/svg?
    digraph G {
        main -> parse -> execute;
        main -> init;
        main -> cleanup;
        execute -> make_string;
        execute -> printf
        init -> make_string;
        main -> printf;
        execute -> compare;
    }
)

不过在Hexo直接这样写是不行的, 需要进行编码, 找到官网靠近底部的Test/Encoder, 这里提供一个简单的编码器, 输入你想生成的图 如:

1
2
3
4
5
6
7
8
9
10
digraph G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf
    init -> make_string;
    main -> printf;
    execute -> compare;
}

点击编码, 把右边的链接复制过来, 放在Markdown的图片标签里就可以了

1
![digraph](https://g.gravizo.com/svg?digraph%20G%20%7B%0A%20%20%20main%20-%3E%20parse%20-%3E%20execute%3B%0A%20%20%20main%20-%3E%20init%3B%0A%20%20%20main%20-%3E%20cleanup%3B%0A%20%20%20execute%20-%3E%20make_string%3B%0A%20%20%20execute%20-%3E%20printf%0A%20%20%20init%20-%3E%20make_string%3B%0A%20%20%20main%20-%3E%20printf%3B%0A%20%20%20execute%20-%3E%20compare%3B%0A%20%7D)

效果如下
digraph

由于只是图片的链接, 所以在任何支持Markdown或者Html的地方都能用, 非常方便