We have flowcharts and sequential diagrams supported on Hexo. Everything, including styles and fonts, are customizable.

Flowchart

The flowchart feature is supported by the package hexo-filter-flowchart:

1
npm install --save hexo-filter-flowchart

You can configure your flowchart layout in the site's _config.yml:

1
2
3
4
5
6
7
flowchart:
options:
scale: 1
line-width: 2
line-length: 50
text-margin: 10
font-size: 12

Raw code like

1
2
3
4
5
6
7
8
9
10
11
12
13
st=>start: Start
e=>end: End
op1=>operation: Operation (Open Google in New Tag)|past:>http://www.google.com[blank]
op2=>operation: Operation (Go to Google):>http://www.google.com
sub1=>subroutine: Subroutine
cond=>condition: Succeed?
c2=>condition: Solved?
io=>inputoutput: Input/Output
st(bottom)->op1(bottom)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

in a flow code block, produces a nice flowchart as below:

Sequence

This is supported by the hexo-filter-sequence package:

1
npm install --save hexo-filter-sequence

However, the package is no longer maintained and has several bugs that requires manual fixing in source files. First replace contents in the package's index.js file with

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var assign = require('deep-assign');
var renderer = require('./lib/renderer');

hexo.config.sequence = assign({
webfont: 'https://bramp.github.io/js-sequence-diagrams/js/webfont.js',
snap: 'https://bramp.github.io/js-sequence-diagrams/js/snap.svg-min.js',
underscore: 'https://bramp.github.io/js-sequence-diagrams/js/underscore-min.js',
sequence: 'https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js',
options: {
theme: 'simple'
}
}, hexo.config.sequence);

hexo.extend.filter.register('before_post_render', renderer.render, 9);

Then, replace the render function in /lib/renderer.js with

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
exports.render = function (data) {
if (!ignore(data)) {

var sequences = [];
data.content = data.content
.replace(reg, function (raw, start, startQuote, lang, content, endQuote, end) {
var seqId = getId(sequences.length);
sequences.push(content);
return start + '<div id="' + seqId + '"></div>' + end;
});

if (sequences.length) {
var config = this.config.sequence;
// resources
data.content += '<script src="' + config.webfont + '"></script>';
data.content += '<script src="' + config.snap + '"></script>';
data.content += '<script src="' + config.underscore + '"></script>';
data.content += '<script src="' + config.sequence + '"></script>';
// exec
data.content += sequences.map(function (code, index) {
var seqId = getId(index);
var codeId = seqId + '-code';
var optionsId = seqId + '-options';
return '' +
'{% raw %}' +
'<textarea id="' + codeId + '" style="display: none">' + code + '</textarea>' +
'<textarea id="' + optionsId + '" style="display: none">' + JSON.stringify(config.options) + '</textarea>' +
'<script>' +
' var code = document.getElementById("' + codeId + '").value;' +
' var options = JSON.parse(decodeURIComponent(document.getElementById("' + optionsId + '").value));' +
' var diagram = Diagram.parse(code);' +
' diagram.drawSVG("' + seqId + '", options);' +
'</script>' +
'{% endraw %}';
}).join('');
}
}
};

Finally, in your site's _config.yml, add

1
2
3
4
5
6
7
8
sequence:
options:
theme: 'simple'
scale: 1
line-width: 2
line-length: 50
text-margin: 10
font-size: 12

and then you're good. A simple sequential diagram would be generated within a sequence block:

1
2
3
4
Andrew->Harry: Hello!
Note right of Harry: Harry thinks
Harry-->Andrew: How are you?
Andrew->>Harry: I am good thanks!

which produces