esa.ioで簡単に図を書きたい（UML記法）

## 導入

[以前書いた記事](http://qiita.com/usagizmo/items/d2882b43239cfcf229ff)でも少し触れましたが、先日、[esa.io](https://docs.esa.io/)が[UML記法に対応](https://docs.esa.io/posts/196) ([PlantUML](http://plantuml.com/))したようです。
これにより、**簡単に**[UML](https://ja.wikipedia.org/wiki/%E7%B5%B1%E4%B8%80%E3%83%A2%E3%83%87%E3%83%AA%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)を書くことができるようになりました。

実際に利用してみると正しいUMLを書けているかが気になり躊躇してしまう部分もあったのですが、UMLの形式にはそこまでこだわらず、**意思疎通を図るために図が書けるようになった**との認識で使っていこうと思っています。

<img width="381" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/ce84c219-1962-9aea-f4d8-be0638f9b5ee.png">

    ```uml
    node esa.io
    
    :私: -> esa.io : 使う
    :私: <- esa.io : 理解
    
    esa.io <-up. (図) : ＋
    esa.io <-up. (資料)
    
    esa.io <-up. (Markdown - 構造化)
    (Markdown - 構造化) <-up. (画像)
    (Markdown - 構造化) <-up. (文章)
    
    esa.io -> :誰か: : 意思疎通
    ```

### UMLの種類と書き方

UMLに関しては、[UML入門 \- IT専科](http://www.itsenka.com/contents/development/uml/)や[\- UML超入門](http://objectclub.jp/technicaldoc/uml/umlintro)が大変参考になります。
UMLの**種類**と**使い方**を上記サイトで見て、**書き方**を[PlantUML](http://plantuml.com/)で調べるのがよさそうです。

書き方では[PlantUML Cheat Sheet \- Qiita](http://qiita.com/ogomr/items/0b5c4de7f38fd1482a48)もわかりやすいです。
esa.ioではアクティビティ図に[書きやすくなった表記](http://plantuml.com/activity-diagram-beta)を利用できるため、そちらは公式サイトを参考にした方がいいでしょう。

## 書き方

ここでは、

- [ユースケース図](http://www.itsenka.com/contents/development/uml/usecase.html) ([Use Case Diagram](http://plantuml.com/usecase-diagram))
- [シーケンス図](http://www.itsenka.com/contents/development/uml/sequence.html) ([Sequence Diagram](http://plantuml.com/sequence-diagram))
- [アクティビティ図](http://www.itsenka.com/contents/development/uml/activity.html) ([Activity Diagram](http://plantuml.com/activity-diagram-beta))

（にある要素）を利用して、自動販売機にかかわる行動/処理を図にしてみようと思います。

### ユースケース図

ユースケース図は、以下が正しいUMLとなるようです。

<img width="262" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/954723aa-ca8e-4ea8-7322-4fb701e056bb.png">

    ```uml
    left to right direction
    :利用者:
    
    rectangle 自動販売機 {
        :利用者: -- (商品を購入する)
    }
    ```

引用: [良いユースケースを書くための発想法](http://www.aerith.net/design/use-case-j.html)

ですが、各要素の使い方を無視し、**表現したいこと**を重視して図を書くこともできます。

<img width="477" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/52574287-00f8-7219-91f8-679f7244d2bd.png">

    ```uml
    left to right direction
    note top of 私 : **9pm** お風呂上がり
    :私:
    
    rectangle 自動販売機 {
        :私: .> (コーヒー) : 寝る前にコーヒーは……
        :私: .> (紅茶) : 甘くない方がいいな
        :私: .> (お茶) : もう少しスカッとしたい
        :私: -> (コーラゼロ) : これに決めた！
    }
    ```

[配置図](http://www.itsenka.com/contents/development/uml/deployment.html) ([Deployment Diagram](http://plantuml.com/deployment-diagram)) の要素を使って書いてもいいかもしれません。

<img width="582" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/acf212a2-5f60-4a5b-7811-6f3bb9b4e3ac.png">

    ```uml
    frame 自動販売機の飲み物 {
        usecase コーヒー [
            **コーヒー**
            ---
            寝る前にコーヒーは……
        ]
        usecase 紅茶 [
            **紅茶**
            ---
            甘くない方がいいな
        ]
        usecase お茶 [
            **お茶**
            ---
            もう少しスカッとしたい
        ]
        node コーラゼロ [
            **コーラゼロ**
            ---
            お……？！
        ]
    }
    
    :私: -> コーラゼロ : これに決めた！
    ```

### シーケンス図

時間の流れがわかりやすい図です。

<img width="331" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/a27fe3f0-1f3f-52d0-d22b-2c6524c80c72.png">

    ```uml
    私 -> Aさん : お金を渡す
    activate Aさん
    
    Aさん -> 自動販売機 : お茶を買う
    activate 自動販売機
    
    Aさん <-- 自動販売機 : お茶を出す
    deactivate 自動販売機
    
    私 x<-- Aさん : お茶を渡す
    Aさん -> Aさん : お茶を飲む
    deactivate Aさん
    
    ...5 分後...
    
    私 -> Aさん : お金を渡す
    activate Aさん
    
    Aさん -> 自動販売機 : コーラを買う
    activate 自動販売機
    
    Aさん <-- 自動販売機 : コーラを出す
    deactivate 自動販売機
    
    私 <-- Aさん : コーラを渡す
    activate 私
    
    私 -> 私 : コーラを飲む
    deactivate 私
    
    私 <-- Aさん : お茶のお金を返す
    deactivate Aさん
    ```

`alt` / `loop` / `group` を利用すると、より汎用的でわかりやすくすることができます。

### アクティビティ図

一連の手続きを表現することができます。

<img width="241" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/6b96925d-62ad-11bf-10ca-dcf7ce376328.png">

    ```uml
    :私がAさんにお金を渡す;
    :Aさんが自動販売機で商品を購入する;
    while (コーラゼロ？) is (違う)
        :Aさんが商品を飲みきる;
        -[#black,dotted]-> 5分後;
        :私がAさんにお金を渡す;
        :商品を購入する;
    endwhile (あってる)
        :😊;
        :Aさんが飲んだ分のお金を私に返す;
    ```

## おわりに

今までは、小さな図を[Skitch](https://www.sketchapp.com/)や[OmniGraggle](https://www.omnigroup.com/omnigraffle)で書くのも、書いたデータを共有して管理するのも手間となっていました。
esa.io x PlantUMLでは、UMLないし図の共有/管理がしやすく、編集も簡単にでき、バージョン管理もされてしまいます。
今後はUMLについても学びながら、積極的に利用していきたいと思っています。