hexo-增加时序图

发表于 本文字数： 238 阅读时长 ≈ 1 分钟

hexo默认是不支持UML时序图的，但是官方网站上提供了一个插件让我们支持时序图

安装

hexo-filter-sequence 插件:

1
npm install --save hexo-filter-sequence

配置

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

1
2
3
4
5
6
7
8
9
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:

源码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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);

示例

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

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

效果如下：
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob–>Alice: I am good thanks!