为 Hexo 增加时序图解析功能

转载自：http://wewelove.github.io/fcoder/2017/09/06/markdown-sequence/

安装

1	npm install --save hexo-filter-sequence

配置

站点配置文件 _config.yml 中增加如下配置:

sequence:
  webfont: https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js
  raphael: https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js
  underscore: https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js
  sequence: https://cdn.bootcss.com/js-sequence-diagrams/1.0.6/sequence-diagram-min.js
  css: # optional, the url for css, such as hand drawn theme 
  options: 
    theme: simple
    css_class:

源码

源码修改后才能正常使用，进入插件目录作如下修改：

// index.js
var assign = require('deep-assign');
var renderer = require('./lib/renderer');
hexo.config.sequence = assign({
  webfont: 'https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js',
  raphael: 'https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js',
  underscore: 'https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js',
  sequence: 'https://cdn.bootcss.com/js-sequence-diagrams/1.0.6/sequence-diagram-min.js',
  css: '',
  options: {
    theme: 'simple'
  }
}, hexo.config.sequence);
hexo.extend.filter.register('before_post_render', renderer.render, 9);

// lib/renderer.js, 25 行
if (sequences.length) {
      var config = this.config.sequence;
      // resources
      data.content += '<script src="' + config.webfont + '"></script>';
      data.content += '<script src="' + config.raphael + '"></script>';
      data.content += '<script src="' + config.underscore + '"></script>';
      data.content += '<script src="' + config.sequence + '"></script>';
      ......
}

示例

新建文章，增加如下内容：

1
2
3

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!