bubkoo / hexo-filter-sequence Goto Github PK

View Code? Open in Web Editor NEW

39.0 5.0 12.0 8 KB

Generate UML sequence diagrams for Hexo.

License: MIT License

JavaScript 100.00%

hexo-filter uml-sequence-diagram hexo-filter-sequence

hexo-filter-sequence's Introduction

hexo-filter-sequence

Generate UML sequence diagrams for Hexo.

Install

npm install --save hexo-filter-sequence

Usage

This plugin is based on js-sequence-diagrams, so you can defined the chart as follow:

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

Config

In your site's _config.yml:

sequence:
  # webfont:     # optional, the source url of webfontloader.js
  # snap:        # optional, the source url of snap.svg.js
  # underscore:  # optional, the source url of underscore.js
  # sequence:    # optional, the source url of sequence-diagram.js
  # css: # optional, the url for css, such as hand drawn theme 
  options: 
    theme: 
    css_class:

Your config will be merged into default config:

{
  "webfont": "https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js",
  "snap": "https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js",
  "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",
  "sequence": "https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
  "style": "",
  "options": {
    "theme": "simple",
    "css_class": ""
  }
}

hexo-toc Insert a markdown TOC before posts be rendered.
hexo-filter-fenced-code Extend syntax for the native fenced code block.
hexo-filter-flowchart Generate flowchart diagrams for Hexo.
hexo-filter-sub Generate subscript (<sub>) tag for Hexo.
hexo-filter-sup Generate superscript (<sup>) tag for Hexo.
hexo-theme-formula Hexo theme base on jade and less.

Contributing

Pull requests and stars are highly welcome.

For bugs and feature requests, please create an issue.

hexo-filter-sequence's People

Contributors

Stargazers

Watchers

Forkers

it-boyer david-wey kobevino 0x5010 chang196700 f-12 xingchen0730 shanghua521 doyokii miniontim

hexo-filter-sequence's Issues

时序图显示失败-解决方案

主要参考这篇文章：
http://wewelove.github.io/fcoder/2017/09/06/markdown-sequence/

1.在 _config.yml 中添加 sequence:相关配置
2.修改 node_modules/hexo-filter-sequence/index.js文件，将其彻底清空，然后将博客中 index.js 内容copy进去
3.修改 node_modules/hexo-filter-sequence/lib/renderer.js文件，将 26 - 31 行，var config = this.config.flowchart; 及以下的 data.content 等行，按照博客中修改。
4.修改完毕后执行 hexo clean，hexo g，hexo s
5.时序图可以正常显示了

how to custom small font size

i have a sequence.but the pic was so large
https://ahaochan.github.io/Java/JavaWeb/Tomcat/Tomcat%E5%90%AF%E5%8A%A8%E6%B5%81%E7%A8%8B%E8%AF%A6%E8%A7%A3.html#more
how to set the font size?

Bootstrap->Bootstrap: main()
Bootstrap->Bootstrap: init()
Bootstrap->Bootstrap: load()

Bootstrap->Catalina: load()
Catalina->Standard\nServer: init()
Standard\nServer->Standard\nService: init()
Standard\nService->Container: init()
Container-->Standard\nService: 
Standard\nService->Mapper\nListener: init()
Mapper\nListener-->Standard\nService: 
Standard\nService->Executor: init()
Executor-->Standard\nService: 
Standard\nService->Connector: init()
Connector-->Standard\nService: 
Standard\nService-->Standard\nServer: 
Standard\nServer-->Catalina: 
Catalina-->Bootstrap: 

Bootstrap->Bootstrap: start()
Bootstrap->Catalina: start()
Catalina->Standard\nServer: start()
Standard\nServer->Standard\nService: start()
Standard\nService->Container: start()
Container-->Standard\nService: 
Standard\nService->Mapper\nListener: start()
Mapper\nListener-->Standard\nService: 
Standard\nService->Executor: start()
Executor-->Standard\nService: 
Standard\nService->Connector: start()
Connector-->Standard\nService: 
Standard\nService-->Standard\nServer: 
Standard\nServer-->Catalina: 
Catalina-->Bootstrap:

不显示时序图(生成失败)

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.3.5"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-filter-sequence": "^1.0.3",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}

_config.yml
sequence:
  webfont: https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js
  snap: https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js
  underscore: https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js
  sequence: https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js
  style: 
  options: 
    theme: simple
    css_class:

f12报错
Uncaught ReferenceError: Raphael is not defined
at sequence-diagram.js:792
at sequence-diagram.js:1468
(anonymous) @ sequence-diagram.js:792
(anonymous) @ sequence-diagram.js:1468
(index):90 Uncaught ReferenceError: Diagram is not defined
at (index):90

我看到使用了jq(google的) 怎么能自定义给搞成国内的

how to config for next theme

i cannot display currently sequence use readme method

只显示流程图

我装了你的另一个插件https://github.com/bubkoo/hexo-filter-flowchart,
如果写了流程图的情况下，当前页面会将下面的时序图加载出来，如果当前页面没有写流程图，就不加载了。

sequence-diagram.js:792Uncaught ReferenceError: Raphael is not defined

Hi:
js error

sequence-diagram.js:792Uncaught ReferenceError: Raphael is not defined
  at sequence-diagram.js:792
  at sequence-diagram.js:1468
(anonymous) @ sequence-diagram.js:792
(anonymous) @ sequence-diagram.js:1468
(index):403 Uncaught ReferenceError: Diagram is not defined
  at (index):403
(anonymous) @ (index):403

please close it

ok.i got it, just missing the raphael js .

hexo.config.flowchart = assign({
  raphael: 'https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js',# That's it 
  webfont: 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js',
  snap: 'https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js',
  underscore: 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js',
  sequence: 'https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js',
  css: '',
  options: {
    theme: 'simple'
  }
}, hexo.config.flowchart);

Please check and modify js-sequence-diagrams link of Cloudflare

The Cloudflare library link seems to be broken. js-sequence-diagrams Modifying and running the related libraries as shown below will normally display the sequence diagram in hexo.

Also, if you change the setting in _config.yml as above, the setting is not reflected, so I modified the code myself.

So, please check and modify it.

[bug]时序图代码块内输入<tag>时会自动在尾部增加</tag>

在 sequence 代码块内输入标签时，会自动在尾部闭合代码快内出现过的标签，如下所示。

Alice->Bob: 1. sendMessage(message:Message<T>)
Bob->Coco: 2. sendMessage(message:Message<T>)

看了下 render.js 的源码，应该是 hexo 中标签插件 {% raw %}的默认行为。

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('');

解决思路：提前将sequence 代码块中的 < >符号替换为 &lt和 &gt，代码如下。

 data.content += sequences.map(function (code, index) {
   var seqId = getId(index);
   var codeId = seqId + '-code';
   var optionsId = seqId + '-options';
+ code = code.replace(/</g,'&lt').replace(/>/g,'&gt');
   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('');

解决后的效果：

It's not work!

sequence-diagram.js:792 Uncaught ReferenceError: Raphael is not defined
at sequence-diagram.js:792
at sequence-diagram.js:1468