Mac + VSCode + PlantUMLで構成図を書いてみる

ちゃちゃっと構成図を書くのにPlantUMLが良さげと聞き。

# PlantUMLとは

https://plantuml.com/ja/
テキストでUMLを書くことができるツール。

メリット
各コンポーネントを良い感じに配置してくれる。
テキストベースのため、diffが取れる。

# 導入

macOS Big Sur
Visual Studio Code 1.53.1

## Java

```sh
% java -version
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
```

Javaが入っていないのでbrewで入れる。

参考

https://qiita.com/ponsuke0531/items/9be8dee67a91c6c78d4f

https://qiita.com/___xxx_/items/17655df4e80ebadd8fc3

https://qiita.com/takuma-jpn/items/b49785a314fb4db85775


```sh
# brewをインストール
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# brewの確認
% brew -v
Homebrew 3.0.4
Homebrew/homebrew-core (git revision a2cad; last commit 2021-03-06)
% brew doctor 
Your system is ready to brew.

# java11を検索
% brew search java11
==> Formulae
java11

# java11をインストール
% brew install java11
==> Downloading https://homebrew.bintray.com/bottles/openjdk%4011-11.0.10.big_sur.bottle.tar.gz
==> Downloading from https://d29vzk4ow07wi7.cloudfront.net/327ca0eb47ef48009be2f97b5ad7756ee856d7673d39b9c601715e0f8450686c?r
######################################################################## 100.0%
==> Pouring openjdk@11-11.0.10.big_sur.bottle.tar.gz
==> Caveats
For the system Java wrappers to find this JDK, symlink it with
  sudo ln -sfn /usr/local/opt/openjdk@11/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-11.jdk

openjdk@11 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have openjdk@11 first in your PATH, run:
  echo 'export PATH="/usr/local/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc

For compilers to find openjdk@11 you may need to set:
  export CPPFLAGS="-I/usr/local/opt/openjdk@11/include"

==> Summary
🍺  /usr/local/Cellar/openjdk@11/11.0.10: 654 files, 297.3MB

% sudo ln -sfn /usr/local/opt/openjdk@11/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-11.jdk
% echo 'export PATH="/usr/local/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc
% export CPPFLAGS="-I/usr/local/opt/openjdk@11/include"
% source ~/.zshrc
% java -version
openjdk version "11.0.10" 2021-01-19
OpenJDK Runtime Environment (build 11.0.10+9)
OpenJDK 64-Bit Server VM (build 11.0.10+9, mixed mode)
```

VSCodeのマーケットプレースで「Java Extension Pack」を検索し、インストール
`setting.json`に`java.home`を追加

```sh
# JAVA_HOMEの確認
% /usr/libexec/java_home
/usr/local/Cellar/openjdk@11/11.0.10/libexec/openjdk.jdk/Contents/Home
```

```json:setting.json
{
    "java.home": "/usr/local/Cellar/openjdk@11/11.0.10/libexec/openjdk.jdk/Contents/Home"
}
```

## GraphViz

```
% brew install graphviz
```

## PlantUML

VSCodeのマーケットプレースで「PlantUML」を検索し、インストール

適当な場所にファイルを作成

```
@startuml
Alice -> Bob: test
@enduml
```

alt + dでプレビューが開き、以下のような図が表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065197/8f918109-8e06-093d-e15e-08d4c21e4d5b.png)

# 装飾

## アイコン

文字だけだと味気ないので、[標準ライブラリ](https://plantuml.com/ja/stdlib)として提供されているアイコンを利用する。

先程の図に[PlantUML Icon-Font Sprites](https://github.com/tupadr3/plantuml-icon-font-sprites)を使ってアイコンを追加する。

```
@startuml

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.2.0
!includeurl ICONURL/common.puml
!includeurl ICONURL/font-awesome/female.puml
!includeurl ICONURL/font-awesome/male.puml

FA_FEMALE(Alice, Alice)
FA_MALE(Bob, Bob)

Alice -> Bob: test

@enduml
```

アイコンが表示された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065197/b916d1fa-0c6b-d0b2-45fe-ddfd2f108d6a.png)

その他、例えば[Devicons](https://github.com/tupadr3/plantuml-icon-font-sprites/blob/master/devicons/index.md)、[Devicon 2](https://github.com/tupadr3/plantuml-icon-font-sprites/blob/master/dev2/index.md)にはよく使うミドルウェア、ソフトウェア、サービスのアイコンが多く収録されている。

## 色、フォント

[skinparamコマンド](https://plantuml.com/ja/skinparam)を使うことで、色やフォントを指定することができる。

先程の図に対して、背景色とフォントの指定をし、手書き風にしてみる。

```
@startuml

skinparam backgroundColor floralwhite
skinparam DefaultFontName Courier
skinparam handwritten true

Alice -> Bob: test

@enduml
```

手書き風かわいい😚
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065197/b6b5c659-8f2f-74ad-781d-e9f56186dc6e.png)

# 構成図を書く

[コンポーネント図](https://plantuml.com/ja/component-diagram)、[配置図](https://plantuml.com/ja/deployment-diagram)を参考に、以下の記事で構築した環境の構成図を作成。

https://qiita.com/mamfrog/items/4c14e112c6156c9a6dea

```

@startuml 

skinparam backgroundColor floralwhite
skinparam handwritten true

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/master/dist
!includeurl AWSPuml/AWSCommon.puml
!includeurl AWSPuml/Analytics/KinesisDataFirehose.puml
!includeurl AWSPuml/Storage/SimpleStorageServiceS3.puml
!includeurl AWSPuml/Compute/ElasticKubernetesService.puml
!include <kubernetes/k8s-sprites-labeled-25pct>

cloud AWS {
    ElasticKubernetesService(eksAlias, "アプリ", "APPのログをfluentdで収集") {
        component "<$node>\nnode" as node {
            component "<$rs>\nAPP" as rs
            component "<$ds>\nfluentd" as fluentd
        }
    }
    KinesisDataFirehose(kinesisAlias, "ログ収集", "EKSからstreamにログが送られる")
    SimpleStorageServiceS3(storageAlias, "ログ格納", "firehoseから送られるログを保存")
}

fluentd --> kinesisAlias
kinesisAlias --> storageAlias

@enduml
```

なんかセンスないな..🤔
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065197/c64d428f-e2cd-7311-928b-d9fca3cc4d22.png)

今後はサンプルを見て勉強したり、とりあえず書いてみたりを繰り返して、ささっとイケテル図が描けるように頑張ります。終わり。