PlantUML 是個有趣的工具,因為它可以讓你用純文字的方式來表達視覺化的 UML,如以下的例子:

@startuml

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List <|-- AbstractList
Collection <|-- AbstractCollection

Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList

class ArrayList {
    Object[] elementData
    size()
}

@enduml

能用來產生這張圖:

這樣的概念並不是新的,像 Graphvis 這套工具就是用 DOT language 來描述「圖」,PlantUML 只是將這概念套用在 UML 上。對 programmer 來說,這種表示方法是再自然不過了,因為這樣能將內容與呈現方式分離,而當要修改內容時你所需要的只是你最愛的文字編輯器。

有許多種方式來使用 PlantUML:

  • 手動撰寫內容,然後單純使用它來產生 UML 圖檔 (JPG, PNG, or SVG)
  • 用程式自動產生內容,再經由 PlantUML 產生圖檔
  • 將它嵌入其他文件 (程式碼、Word 文件、網頁) 裡,當呈現時再動態產生圖檔
  • 因為是純文字,所以很容易可以在網站上直接編輯內容,產生唯一的 image URL,需要呈現時再從網站下載

非常地有彈性及符合 DRY 原則,這也是為什麼 Pragmatic Programmer 告訴你要用純文字來保存你的知識。

所以如果你想在 Octopress 裡面直接內嵌 PlantUML 可以打下面這個 patch:

diff --git a/plugins/backtick_code_block.rb b/plugins/backtick_code_block.rb
index 40e7900..2023c25 100644
--- a/plugins/backtick_code_block.rb
+++ b/plugins/backtick_code_block.rb
@@ -28,6 +28,14 @@ module BacktickCodeBlock
    if @lang.nil? || @lang == 'plain'
        code = tableize_code(str.gsub('<','&lt;').gsub('>','&gt;'))
        "<figure class='code'>#{@caption}#{code}</figure>"
+      elsif @lang == 'plantuml'
+        svg = ''
+        IO.popen('plantuml -pipe -tsvg', 'r+t') do |f|
+          f.write "@startuml\n#{str}\[email protected]"
+          f.close_write
+          svg = f.read
+        end
+        "<figure>#{svg}</figure>"
    else
        if @lang.include? "-raw"
        raw = "``` #{@options.sub('-raw', '')}\n"