Hexo-filter-sequence-fixed NPM

hexo-filter-sequence-fixed

Generate UML sequence diagrams for Hexo. origin projecthexo-filter-sequenceis not maintained。Fork to rebuid.
Install

npm install --save hexo-filter-sequence-fixed

Changelog

2023/07/13 feature: support svg scale.
2023/07/11 bugfix
1、plugin not works on hexo； 2、update sequence-diagram-min.js version to 2.0.x to fix in isses

Usage

This plugin is based on js-sequence-diagrams, so you can defined the chart as follow:
(js-sequence-diagrams v1.x is not supported now. Please use 2.x instead.)

```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": "http://npm.elemecdn.com/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.js",
  "style": "",
  "options": {
    "theme": "simple",
    "css_class": ""
  }
}

Recommend: Define your svg style, such as align center:

/* NOTE: add to your css files */

/* style for svg container tag, e.g. <div/> */
.sequence-container {
  text-align: center;
  overflow: auto;
}

/* style for svg tag */
.sequence {
  overflow: hidden; 
  position: relative; 
  max-width: 100%; 
  height: auto;
}