図を書くのに苦労してますか？じゃPlantUML might be for youです


# Table of Contents

-   [図を書くのに苦労してますか？じゃぁPlantUML might be for youです](#org62511c0)
    -   [UMLってなに？](#org4b27e82)
    -   [PlantUMLでどんな感じな図ができるの？](#org6c2cb41)
        -   [Use case diagram](#orgeea7abf)
        -   [State machine diagram](#orgc61ff78)
        -   [Activity diagram](#org3a214fc)
        -   [Deployment diagram](#orgaf7131d)
        -   [Sequence diagram](#org79b79e2)
        -   [Class diagram](#orge5433a2)
    -   [PlanUMLの良いところ・悪いところ](#org71a505e)
        -   [良いところ](#org7fd6522)
        -   [悪いところ](#orgb3fb779)
    -   [Try it out!](#org2e06c39)


<a id="org62511c0"></a>

# 図を書くのに苦労してますか？じゃPlantUML might be for youです

PlantUMLはテキストでUMLの図を作成できるツールです。こんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/941c4cfc-4bdd-e07e-7072-52e4ae748fc1.png)


個人的にPossibly the best tool of my lifeなので紹介します。  
使うかどうかの判断材料にしてください。  


<a id="org4b27e82"></a>

## UMLってなに？

Unified Modeling Languageです。  
ソフトウェアの設計を表現できる図なので開発時のコミュニケーションやドキュメントを残すときに役立ちます。  

ビジネスとの仕様確認に下記の様な情報で認識の違いを防げます。  

-   機能とその機能を使う人（Use Case Diagram）
-   状態がどう変わるのか（State Machine Diagram）
-   システムのフロー（Activity Diagram）

下記のようなシステムのドキュメントを残しておくとメンテするときに開発者は楽になります。  

-   アプリの構成（Deployment Diagram）
-   処理の順序とオブジェクトの関係（Sequence Diagram）
-   オブジェクトの関係性（Class Diagram）


<a id="org6c2cb41"></a>

## PlantUMLでどんな感じな図ができるの？
PlantUMLでよく作る図を紹介していきます。  


<a id="orgeea7abf"></a>

### Use case diagram

システムの機能とその機能を使う人の関係を表します。全体像を表すのに使ってます。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/1e7bf24e-171c-a978-7695-31c8bb36dcb6.png)


<a id="orgc61ff78"></a>

### State machine diagram

状態がどんなアクションでどう変わるのかを表します。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/b8ff2ce1-ee60-6204-3876-56ba8c1b1b37.png)



<a id="org3a214fc"></a>

### Activity diagram

アクションや分岐を入れてフローを表すことができます。個人的にこれを一番使ってます。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/6c61da66-c6b8-14df-cd17-b5cfca24378f.png)


Swimlaneを使ったら誰が何をやってるのかも表現できます。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/f98c55ba-7d3e-1e03-0b5b-72401dbca7e9.png)


<a id="orgaf7131d"></a>

### Deployment diagram

いろんな図を表現できます。僕はインフラなどを表した図に使います。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/d71f258c-d8d1-633c-ff90-3472c759ea16.png)


<a id="org79b79e2"></a>

### Sequence diagram

処理の順序とオブジェクト同士の関係を表せます。開発者にとってはこの図はわかりやすいのでほとんどの場合開発への説明に使ってます。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/def6ca54-eb56-c27c-69df-70912cb746b7.png)


<a id="orge5433a2"></a>

### Class diagram

OOPのオブジェクトを表すことができます。  

-   クラスの関係性
-   どんなField、Methodがあるのか
-   Field、Methodのアクセスレベル (public, privateとか)
-   クラスの種類 (Abstract, Interfaceとか)

これは技術書などにたまに出てきますね。同じ記述でER図も書けます。個人的にはクラス図よりもER図によく使いますね。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983797/019582f7-e58c-845c-c696-695fa306bf63.png)


<a id="org71a505e"></a>

## PlanUMLの良いところ・悪いところ


<a id="org7fd6522"></a>

### 良いところ

-   UMLの作成が早い  
    -   マウス操作が不要ですべてキーボード完結
    -   レイアウトなど気にしないで良いので楽
-   テキストだから扱いやすい  
    -   gitなどのVersionControlに含めることができる
    -   更新が楽にできる
-   色々なIntegrationがある  
    -   GitLabでPlantUMLを書いたら勝手にイメージに変換してくれる
    -   IntelliJやVSCodeでPlantUMLを書いたらRealtimeでイメージのプレビューをしてくれる


<a id="orgb3fb779"></a>

### 悪いところ

-   学習コスト：言語なのでSyntaxを習う必要がある
-   レイアウトの修正は不可能、または難しい  
    -   複雑な図は向いてない、または書けない


<a id="org2e06c39"></a>

## Try it out!

僕は開発をするときはほぼすべてのプルリクにPlantUMLを添えてコードレビューしてもらってます。指摘があるときに図があると説明のしやすさが段違いです。  

個人的にはすごく役立っていて、手放せないツールとなっているのでおすすめです。