Feature image

Hexo UML插件

介绍

技术类博客总是不可避免的要插入各种UML图，昨天偶然发现一个有意思的Javascript库Jumly，用于渲染UML sequence diagram和robustness diagram。于是制作了一个hexo插件，便于在博客中插入。

Sequence Diagram

1
@found "You", ->
  @message "Think", ->
    @message "Write your idea", "hexo-tag-uml", ->
      @message "", "JUMLY", ->
        @create "Diagram"
hexo_tag_uml.css "background-color":"#8CC84B"

Robustness Diagram

1
@actor "User" :-> @view "Browser"
@view "Browser" :-> @controller "Server"
@controller "Server" :-> @entity "Database"

安装

1
$ npm install hexo-tag-uml --save

初始化

在blog文件夹中执行：

1
$ hexo uml install

在_config.yml文件中添加：

1
plugins:
- hexo-tag-uml

在主题的.ejs文件的合适位置插入：

1
<%- partial('jumly') %>

一般而言可以放在<head>一节里，需要注意的是Jumly依赖于jQuery，如果主题里引用了其它位置的jQuery，会导致冲突。
比如hexo的默认主题landscape就在after-footer.ejs中插入了jQuery，需要将相应行去掉，替换为上面语句。
也是因为实际主题的实现哥又不同，这个插件没能实现自动修改theme layout文件。

语法

1
2
{&#37; uml [diagram_type] %}
{&#37; uml %}

diagram_type可以取的值为：

  • sequence
  • robustness

如果留空，默认为sequence。

示例

1
2
3
4
5
6
7
8
9
10
11
12
{&#37; uml %}
@found "Browser", ->
  @alt {
    "[200]": -> @message "GET href resources", "HTTP Server"
    "[301]": -> @ref "GET the moved page"
    "[404]": -> @ref "show NOT FOUND"
  }
@find(".ref").css(width:256, "padding-bottom":4)
  .find(".tag").css float:"left"
get_the_moved_page.css "background-color":"#80c080"
show_not_found.css "background-color":"#f0b0b0"
{&#37; enduml %}

效果

1
@found "Browser", ->
  @alt {
    "[200]": -> @message "GET href resources", "HTTP Server"
    "[301]": -> @ref "GET the moved page"
    "[404]": -> @ref "show NOT FOUND"
  }
@find(".ref").css(width:256, "padding-bottom":4)
  .find(".tag").css float:"left"
get_the_moved_page.css "background-color":"#80c080"
show_not_found.css "background-color":"#f0b0b0"

Jumly的表达式规则详见：Jumly Reference Manual

在线编辑器：Try Jumly