DSC01888

オブジェクト指向なプログラミング言語を使っている人であれば、PlantUML(http://plantuml.com)というライブラリをご存知のかたも多いと思います。簡単なテキストを書くだけでUMLなどの各種ダイアグラムへ変換してくれる夢のようなツールです。いまや沢山のツールがこのライブラリに対応していようです。(僕は仕事で使ったことはないのですが)

Emacsのorg-modeはPlantUMLとの連携に対応しているので、別途UMLエディターを使わなくてもUML画像付きの文書作成がEmacsの中だけで完結してしまうという素晴しさ。

知らない人のためにどんな感じのことができるかを紹介しましょう。

クラス図

まずは普通にクラス図の場合、org-modeにこんな感じで書いておきます。

#+BEGIN_SRC plantuml :file planuml1.png
package Package #GreenYellow/LightGoldenRodYellow {
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
}
#+END_SRC
#+RESULTS:

このコード上で C-c C-c を押すとコードを実行するか確認されるので yes を入力します。すると次のような画像が表示されるはずです。

package Package #GreenYellow/LightGoldenRodYellow {
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
}

planuml1.png

orgファイルと同一ディレクトリにplantuml1.pngというファイルが作られているはずです。

もし画像が表示されないようでしたら C-c C-x C-v を押してみてください。このショートカットは押すたびに画像のインライン表示が切り替わります。

コードを修正する度に C-c C-c するだけで画像も更新されるのでとても便利です。

シーケンス図

#+BEGIN_SRC plantuml :file plantuml2.png
skinparam handwritten true
skinparam backgroundColor #FAA

actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C

User -> A: DoWork
activate A

A -> B: Create Request
activate B

B -> C: DoWork
activate C
C --> B: WorkDone
destroy C

B --> A: Request Created
deactivate B

A --> User: Done
deactivate A
#+END_SRC

このコードを実行すると、次のような画像が生成されます。

skinparam handwritten true
skinparam backgroundColor #FAA

actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C

User -> A: DoWork
activate A

A -> B: Create Request
activate B

B -> C: DoWork
activate C
C --> B: WorkDone
destroy C

B --> A: Request Created
deactivate B

A --> User: Done
deactivate A

plantuml3.png

ユーザーインターフェイスみたいな図

ユーザーマニュアルを簡易につくるときに使えそうな、ユーザーインターフェイスの画像も作れます。

#+BEGIN_SRC plantuml :file plantuml3.png
salt
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
}
#+END_SRC
#+RESULTS:
salt
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
}

ツリーの図

ツリー型の図形もつくれます。

#+BEGIN_SRC plantuml :file plantuml4.png
salt
{
{T
 + World
 ++ America
 +++ Canada
 +++ USA
 ++++ New York
 ++++ Boston
 +++ Mexico
 ++ Europe
 +++ Italy
 +++ Germany
 ++++ Berlin
 ++ Africa
}
}
#+END_SRC
#+RESULTS:
salt
{
{T
 + World
 ++ America
 +++ Canada
 +++ USA
 ++++ New York
 ++++ Boston
 +++ Mexico
 ++ Europe
 +++ Italy
 +++ Germany
 ++++ Berlin
 ++ Africa
}
}

サンプルのコードは http://plantuml.com/screenshot.html から引用・修正させていただきました。

まだまだいろいろな図に対応していますので 詳しい使いかたは次のサイトをご覧ください。→ http://plantuml.com/screenshot.html

セットアップ

それでは簡単にセットアップの手順について説明します。

PlantUMLのダウンロード

まずはPlantUMLを次のサイトからダウンロードしてください。

http://plantuml.com/download.html

Emacsの設定

org-modeの設定を行ないます。

M-x customize-option を実行し org-babel-load-languages を開きます。INSボタンを押下してPlantUMLを追加。Activateをonします。

次に同じく M-x customize-optionorg-plantuml-jar-path を開きます。先ほどダウンロードしたplantuml.jarを指定してください。例えば /home/foobar/plantuml.jar に保存した場合、そのまま /home/foobar/plantuml.jar と入力します。

以上、使える状態になっているはずです。

そのままWordPressにアップロード

このブログのエントリーは org2blog/wp-mode を使って書いているので、画像の貼り付け作業も自動的にEmacsからコマンド一発でポストしています。 (2017/02/21 現在 Jekyllへ移行しています)

PlantUMLもすごいけれど、こういう連携ができるorg-modeがすごい、というのがこの記事の趣旨だったりします。最近、このパターンが多くてすみません。