虽然我已经用markedjs让博客支持markdown文档了，但是有时写文章需要用到流程图，如果用画图软件画好截图再上传实在是太麻烦了，而且图片修改也麻烦。

这个时候我想到了引入mermaid，让md支持流程图。

我设计的语法如下

　```mermaid
  graph TD
    A[/Christmas\]
    A -->|Get money| B[\Go shopping/]
    B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
    C -->|One| D[/Laptop/]
    C -->|Two| E[\iPhone\]
    C -->|Three| F[Car] 
　```

和code一样，只是语言是mermaid就渲染成图表。

首先我是到markedjs官方文档上看怎么扩展自定义语法的，官方文档地址：https://marked.js.org/using_pro ，结果很遗憾，官方提供的都是重写方法的方式。没办法，只能改源码了。
在marked.js找到如下代码

 _proto.code = function code(_code, infostring, escaped) {
      var lang = (infostring || '').match(/\S*/)[0];

在后面添加代码如下

_proto.code = function code(_code, infostring, escaped) {
      var lang = (infostring || '').match(/\S*/)[0];
      //支持mermaid by wangmianzhe
      if(lang =='mermaid'){
        return '<div class="mermaid">'+ _code +'</div>'
      }

这样markedjs渲染就会将其渲染成div节点了。但是mermaid是页面加载才会将.mermaid渲染成图表。 这个时候我们需要在marked()方法后，手动调用下渲染

mermaid.init()

效果如下

graph TD
    A[/Christmas\]
    A -->|Get money| B[\Go shopping/]
    B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
    C -->|One| D[/Laptop/]
    C -->|Two| E[\iPhone\]
    C -->|Three| F[Car]