类库大魔王
类库大魔王 懒惰,傲慢,以及无耐心

Jekyll插入PlantUML代码显示图片

突然心血来潮,花了点时间写了个Jekyll的插件,用于生成PlantUML的各种图。用法大体是这样的:

  1. 下载编译一个Go程序,这个程序用于完成将PlantUML代码转换为图片的任务,支持远程http(s)调用和本地jar调用两种方式:
    1
    
    go get github.com/missdeer/plantuml-cmd
    
  2. 把生成的可执行文件拷贝到某个合适的路径,比如
    1
    
    cp $GOPATH/bin/plantuml-cmd /usr/local/bin/
    
  3. https://github.com/missdeer/plantuml-cmd这个仓库中的所有.rb文件保存到Jekyll项目的_plugins目录
  4. 修改Jekyll项目的_config.yml文件,加几行:
    1
    2
    3
    4
    
    plantuml:
      remote: "enabled"
      plantuml_cmd: /usr/local/bin/plantuml-cmd   
      tmp_folder: _plantuml
    
  5. 然后就可以在文章直接书写PlantUML代码了,Jekyll运行时会调用插件将PlantUML代码转为图片并插入HTML中,除了Ditaa类型是插入外部PNG作为img tag外,其他类型都是直接插入SVG代码到HTML中。
  6. 大功告成!各种类型如何使用见下方示例。

PlantUML示例

代码
{% plantuml %}
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
{% endplantuml %}
输出显示
AliceAliceBobBobAuthentication RequestAuthentication ResponseAnother authentication Requestanother authentication Response

Ditaa示例

代码
{% ditaa %}
+--------+   +-------+    +-------+
|        +---+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
	:                         ^
	|       Lots of work      |
	+-------------------------+
{% endditaa %}
输出显示

Graphviz dot示例

代码
{% dot %}
digraph foo {
  node [style=rounded]
  node1 [shape=box]
  node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
  node3 [shape=record, label="{ a | b | c }"]

  node1 -> node2 -> node3
}
{% enddot %}
输出显示
foo node1 node1 node2 node2 node1->node2 node3 a b c node2->node3

思维导图示例

代码
{% mindmap %}
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
{% endmindmap %}
输出显示
OSUbuntuLinux MintKubuntuLubuntuKDE NeonLMDESolydXKSteamOSRaspbianWindows 95Windows 98Windows NTWindows 8Windows 10

甘特图示例

代码
{% gantt %}
[Test prototype] lasts 10 days
[Prototype completed] happens at [Test prototype]'s end
[Setup assembly line] lasts 12 days
[Setup assembly line] starts at [Test prototype]'s end
{% endgantt %}
输出显示
12345678910111213141516171819202122Test prototypePrototype completedSetup assembly line

Math示例

代码
{% math %}
f(t)=(a_0)/2 + sum_(n=1)^ooa_ncos((npit)/L)+sum_(n=1)^oo b_n\ sin((npit)/L)
{% endmath %}
输出显示

LaTeX示例

代码
{% latex %}
\sum_{i=0}^{n-1} (a_i + b_i^2)
{% endlatex %}
输出显示

想想其实好像没啥用哈,我极少要用到这些,真是浪费时间。

感觉本文不错,不妨小额鼓励我一下!
微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

如果你有Visa、MasterCard之类的国际银行卡,也可以考虑以下选项:
如果你看不到评论框,说明Disqus被墙了。