plantUMLで業務フローを整理する

本記事は[OPENLOGI AdventCalendar](https://qiita.com/advent-calendar/2018/openlogi) 4日目の記事です。

11月からオープンロジ社に入社したPMの小川です。Qiita初投稿です。
まずは今、自分がちょこちょことやっているplantUMLを利用した業務フローの整理について書きます。

<!--

- ↓最初に作成した業務フロー図
![test1.png](https://qiita-image-store.s3.amazonaws.com/0/68543/09e56493-c326-72f4-1ba3-e41af9faf957.png)


- ↓がんばって発展させて業務フロー図
![（オープンロジを利用して）ユーザーが荷物をエンドユーザーに届けるまで.png](https://qiita-image-store.s3.amazonaws.com/0/68543/212beac1-017a-fa03-4216-bc16079fc9e4.png)

-->

# plantUMLの入手
本家はこちら→[PlantUML 概要](http://plantuml.com/)

## 環境
MacBook Air 13-inch, 2017
macOS Mojave 10.14.1
エディタ：Visual Studio Code 1.29.1
パッケージ管理：Homebrew 1.8.3

## インストール

インストールはこの辺の記事を参考にしました。→[Visual Studio Code で UML を描こう！](https://qiita.com/couzie/items/9dedb834c5aff09ea7b2)


#### Homebrew でgraphvizをインストール

```terminal
brew install graphviz
```

#### Homebrew で javaのインストール

```terminal
brew cask install java
```

参考→[Homebrewでjavaをインストールする](https://qiita.com/y__ueda/items/049009c38068b1cea4a1)



#### Visual Studio Codeの拡張機能でPlantUMLをインストール→有効化。
↓画像参照
![Visual Studio CodeのPlantUML拡張](https://qiita-image-store.s3.amazonaws.com/0/68543/0ade3374-f870-0704-edee-6c96c9995b39.png)

#### 動作確認

- Visual Studio Codeにて新規ファイルを作成し、拡張子を「.pu」にして保存。
- ファイルに下記を入力し、"alt+D"でプレビューを表示。

プレビューが表示されれば準備完了です。

```test.pu
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml
```

![スクリーンショット 2018-12-03 12.43.33.png](https://qiita-image-store.s3.amazonaws.com/0/68543/29c5d652-88d1-6dff-094e-85a64bd44d9d.png)



# 業務フローの整理

## 整理する業務を見つけ、資料を集める

いきなり業務フローを整理しようと思っても、入社したての頃は何も分かりません。
まず最初に整理したい業務に当たりを付け、社内のwiki、Slack、GoogleDriveなどから情報を集めましょう。

今回は例として、弊社サービスの**オープンロジ**を介して、ユーザーが荷物をエンドユーザーに届けるまでの業務フローをシーケンス図にまとめます。

オープンロジの詳しいサービスの説明はこちらです↓
[**日々の物流業務をもっと効率的に。物流アウトソーシングサービス OPENLOGI**](https://www.openlogi.com/)


## ファイルを用意する

- Visual Studio Codeにて新規ファイルを作成し、適当な名前をつけ、拡張子を「.pu」にして保存します。
- 開始行に`@startuml`、最終行に`@enduml`を入力。必要ならばタイトルを入力する。

```
@startuml
title:オープンロジを利用してユーザーが荷物をエンドユーザーに届けるまで

@enduml
```

## 登場人物（オブジェクト）を洗い出す

オープンロジでは、ユーザーの荷物を預かり、必要に応じてエンドユーザーに荷物を送る**物流業務のアウトソーシングサービス**を利用できるプラットフォームを提供しています。

- ユーザー：荷物を送る人。
- オープンロジ：物流プラットフォームサービス
- エンドユーザー：荷物を受け取る人。


### tips：オブジェクト名の書き方

```test.pu
actor ユーザー as user
participant オープンロジ as opl
actor エンドユーザー as enduser
```
![分類子.png](https://qiita-image-store.s3.amazonaws.com/0/68543/2c9aca7b-15b2-5717-3788-9c6afc84c9ae.png)


`actor ○○`、`participant ○○`で書いた部分がオブジェクトです。
オブジェクトには他にも`database`、`boundary`、`entity`などが利用できます。
`as ☓☓`を使って、その後で省略して入力できます。

最初のうちはいろいろ悩まずに`participant ○○`だけでよいと思います。四角いので。

## メッセージ（関係）を取り出す。

- ユーザーはオープンロジを通して荷物を預けます。
- エンドユーザーはオープンロジを経由して荷物を受け取ります。

### tips：メッセージ（関係）

```
user -> opl : 荷物
opl -> enduser : 荷物
```

![メッセージ.png](https://qiita-image-store.s3.amazonaws.com/0/68543/a4d7f97a-d920-f1ba-ec5f-32e6c12777bf.png)


`☓☓ -> △△` でメッセージ（関係）を記述できます。コメントは`:`で区切って入力します。改行を使う場合は`\n`を使います


![スクリーンショット 2018-12-03 13.37.52.png](https://qiita-image-store.s3.amazonaws.com/0/68543/7f81d529-5aca-a674-603d-86dd56c753f0.png)


これだけ見れば非常にシンプルな業務フローですが、オープンロジは物流プラットフォームサービスのため、実際に荷物を保管する提携先の**倉庫会社**や荷物を運ぶ**配送会社**のオブジェクトが必要です。

- 倉庫会社：荷物を預かる会社。
- 配送会社：荷物を運ぶ会社。

一旦、オープンロジを外して荷物の動きに着目すると、次のようになります。

![スクリーンショット 2018-12-03 14.13.03.png](https://qiita-image-store.s3.amazonaws.com/0/68543/3d7f7e23-264f-56d4-6d06-d0f85c35c8a7.png)


業務としては

- ユーザーの荷物を預かる→**入庫**
- ユーザーの荷物をエンドユーザーに届ける→**出庫**

の大きくふたつに分かれることがわかります。

### tips：グループ化

`group`と`end`で囲むとグループが作成できます。

```
group 入庫
    user -> dc : 配送を依頼
    wh -> dc : 荷物を届ける
end
```
![グループ.png](https://qiita-image-store.s3.amazonaws.com/0/68543/5df4886e-30a2-55d1-137e-bc36d56f28ab.png)



### tips：アクティベート（activate:活性化）

```

dc -> wh : 荷物を預ける
activate wh

wh -> dc : 荷物を渡す
deactivate wh

```

![活性化.png](https://qiita-image-store.s3.amazonaws.com/0/68543/867e0a19-3c70-a121-b20c-0949d5791249.png)


`activate "オブジェクト名"`を付けると、オブジェクトから上下に伸びる縦の破線が強調されます（活性化）。`deactivate "オブジェクト名"`で解除されます。




## 入庫：荷物を倉庫に預ける

繰り返しになりますが、オープンロジは**ユーザーと倉庫の間をつなぐプラットフォームサービス**です。これまで煩雑だったユーザーと倉庫の間の連絡をシンプルに実現します。

例えば、倉庫会社に荷物を預けるには**倉庫に事前に荷物が届くことを連絡しておく**必要があります（=**入庫依頼**）。オープンロジを利用することで倉庫への事前の連絡がスムーズに作成できます。

![スクリーンショット 2018-12-03 15.05.15.png](https://qiita-image-store.s3.amazonaws.com/0/68543/e278b558-45af-e675-cd38-1fc416a9606a.png)


### tips：オブジェクトのグループ化

 `box "グループ名" /box end`を使うとオブジェクトのグループを作成できます。

```
box
boundary "ユーザー側\nオープンロジ" as opl_user
database "サーバ＆DB" as DB
boundary "倉庫側\nオープンロジ" as opl_wh
end box
```

### tips：alt/elseによるグループ化

`group` 〜 `end`ではなく`alt` 〜 `else` 〜 `end`を使うことで、条件分岐を表現できます。

## 出庫：荷物を倉庫からエンドユーザーに届ける
入庫と同様に、出庫もオープンロジを通して簡単に出庫依頼を作成できます。
出庫依頼は1日2回に分けて倉庫に連絡され、順次出庫されます。


![スクリーンショット 2018-12-03 23.10.47（2）.png](https://qiita-image-store.s3.amazonaws.com/0/68543/ce28197f-7902-226c-f58f-613ac9d34b67.png)


### tips：refによるリファレンスの挿入

`ref`を用いて、図中にリファレンスを挿入できます。

```
ref over "オブジェクト名"
 コメント〜
end ref
```

### tips：skinparamで色を変える
`skinparam`を設定すると、図の色を変更できます。
参考→[Atom+PlantUMLで見た目もいい感じのシーケンス図を作成する](https://qiita.com/k_nakayama/items/77ca73753ebd049a66de)

今回は`skinparam backgroundColor transparent`を設定して、グループの背景色を透過させています。


# 一旦完成

![（オープンロジを利用して）ユーザーが荷物をエンドユーザーに届けるまで.png](https://qiita-image-store.s3.amazonaws.com/0/68543/7935aab1-2288-7b7d-067a-6821c2539da1.png)



PlantUMLはテキストベースでフロー図が作れるため、他の作図ツールに比べて管理コストが低いのがよいところだと思います。色つけなどいろいろできますが変に拘ると作業が進まなくなるので、まずは簡単な範囲でさくっと図解していきましょう。