Plantuml介绍以及在Hexo中的相关插件

plantuml logo

PlantUML 简介

PlantUML是一个画图脚本语言,官方介绍如下:

Generate UML diagram from textual description

用它可以快速地画出:

  1. Sequence diagram
  2. Use case diagram
  3. Class diagram
  4. Activity diagram
  5. Component diagram
  6. State diagram
  7. Object diagram
  8. Deployment diagram
  9. Timing diagram

对于工程师们来说,用代码的方式来画图,简直是为其量身定做的。PlantUML语法也非常简单,参见PlantUML Language Reference Guide,它支持很多工具,可以生成PNG、SVG、LaTeX和二进制图片。

工具

有非常多的工具来协助工程师们使用PlantUML的语法来进行画图,比如ATOM有language-plantumlplantuml-viewermarkdown-preview-enhanced等各种Packages。当然其他的编辑器也有同样的类似的插件。

另外,我也写了一个plantuml-tour的项目,其中有哦PlantUML的一些例子,执行脚本,以及安装说明等。大家有兴趣,也可以去看看这个项目。

例子

下面的例子是通过在线示例工具生成的。

比如这样简单的三行文本,就能生成一个基本的时序图。

@startuml
Bob -> Alice : hello
@enduml

plantuml online sequence diagram

http://www.planttext.com/planttext也是一个类似的导出工具,并且可以在这个网站上直接查看和测试Plantuml不同图形的语法。

除了之前说过的可以生成的图形,还能生成其他图形,比如生成🌍图形。

xearth diagram

下面是生成上面地图的plantuml描述

@startuml
xearth
61.17 -150.00 "Anchorage" # Alaska, USA
38.00 23.73 "Athens" # Greece
33.4 44.4 "Baghdad" # Iraq
13.73 100.50 "Bangkok" # Thailand
39.92 116.43 "Beijing" # China
52.53 13.42 "Berlin" # Germany
32.3 -64.7 "Bermuda" # Bermuda
42.33 -71.08 "Boston" # Massachusetts, USA
-15.8 -47.9 "Brasilia" # Brazil
-4.2 15.3 "Brazzaville" # Congo
-34.67 -58.50 "Buenos Aires" # Argentina
31.05 31.25 "Cairo" # Egypt
22.5 88.3 "Calcutta" # India
-33.93 18.47 "Cape Town" # South Africa
33.6 -7.6 "Casablanca" # Morocco (Rabat?)
41.83 -87.75 "Chicago" # Illinois, USA
32.78 -96.80 "Dallas" # Texas, USA
28.63 77.20 "New Delhi" # India
39.75 -105.00 "Denver" # Colorado, USA
24.23 55.28 "Dubai" # UAE (Abu Dhabi?)
-27.1 -109.4 "Easter Island" # Easter Island
-18.0 178.1 "Fiji" # Fiji
13.5 144.8 "Guam" # Guam
60.13 25.00 "Helsinki" # Finland
22.2 114.1 "Hong Kong" # Hong Kong
21.32 -157.83 "Honolulu" # Hawaii, USA
52.2 104.3 "Irkutsk" # Irkutsk, Russia
41.0 29.0 "Istanbul" # Turkey (Ankara?)
-6.13 106.75 "Jakarta" # Indonesia
31.8 35.2 "Jerusalem" # Israel
34.5 69.2 "Kabul" # Afghanistan
27.7 85.3 "Kathmandu" # Nepal
50.4 30.5 "Kiev" # Ukraine
3.13 101.70 "Kuala Lumpur" # Malaysia
6.45 3.47 "Lagos" # Nigeria
-12.10 -77.05 "Lima" # Peru
51.50 -0.17 "London" # United Kingdom
40.42 -3.72 "Madrid" # Spain
14.6 121.0 "Manila" # The Phillipines
21.5 39.8 "Mecca" # Saudi Arabia
19.4 -99.1 "Mexico City" # Mexico
25.8 -80.2 "Miami" # Florida, USA
6.2 -10.8 "Monrovia" # Liberia
45.5 -73.5 "Montreal" # Quebec, Canada
55.75 37.70 "Moscow" # Russia
-1.28 36.83 "Nairobi" # Kenya
59.93 10.75 "Oslo" # Norway
48.87 2.33 "Paris" # France
-32.0 115.9 "Perth" # Australia
45.5 -122.5 "Portland" # Oregon, USA
-0.2 -78.5 "Quito" # Ecuador
64.15 -21.97 "Reykjavik" # Iceland
-22.88 -43.28 "Rio de Janeiro" # Brazil
41.88 12.50 "Rome" # Italy
11.0 106.7 "Ho Chi Minh City" # Vietnam (Hanoi?)
37.75 -122.45 "San Francisco" # California, USA
9.98 -84.07 "San Jose" # Costa Rica
18.5 -66.1 "San Juan" # Puerto Rico
-33.5 -70.7 "Santiago" # Chile
1.2 103.9 "Singapore" # Singapore
42.67 23.30 "Sofia" # Bulgaria
59.33 18.08 "Stockholm" # Sweden
-33.92 151.17 "Sydney" # Australia
-17.6 -149.5 "Tahiti" # Tahiti
16.8 -3.0 "Timbuktu" # Mali (Bamako?)
35.67 139.75 "Tokyo" # Japan
43.70 -79.42 "Toronto" # Ontario, Canada
32.9 13.2 "Tripoli" # Libya
47.9 106.9 "Ulan Bator" # Mongolia
49.22 -123.10 "Vancouver" # B.C., Canada
48.22 16.37 "Vienna" # Austria
38.9 -77.0 "Washington" # United States
-41.28 174.78 "Wellington" # New Zealand
62.5 -114.3 "Yellowknife" # N.T., Canada
90.00 0.00 "North Pole" # North Pole
-90.00 0.00 "South Pole" # South Pole
@enduml

PlantUML和Hexo整合

无意中,发现一个Hexo的插件,就是hexo-tag-plantuml,这个插件能够让Hexo生成的网站可以方便的集成PlantUML来生成相关的图。

使用起来也非常简单,只需要将原来的plantuml文件中的@startuml@enduml分别改成,既可以将原来一个个的plantuml文件中的图形,展示在网站上。

安装hexo-tag-plantuml

npm install hexo-tag-plantuml --save

比如我们通过hexo-tag-plantuml插件,在网站上展示相对复杂的类图

最后,再安利一句,plantumlhexo-tag-plantuml,你值得拥有。