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

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

PlantUMLとは

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

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

導入

macOS Big Sur
Visual Studio Code 1.53.1

Java

% 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で入れる。

参考

# 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 [e-mail]_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を追加

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

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

装飾

アイコン

文字だけだと味気ないので、標準ライブラリとして提供されているアイコンを利用する。

先程の図に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

アイコンが表示された。

その他、例えばDevicons、Devicon 2にはよく使うミドルウェア、ソフトウェア、サービスのアイコンが多く収録されている。

色、フォント

skinparamコマンドを使うことで、色やフォントを指定することができる。

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

@startuml

skinparam backgroundColor floralwhite
skinparam DefaultFontName Courier
skinparam handwritten true

Alice -> Bob: test

@enduml

手書き風かわいい😚

構成図を書く

コンポーネント図、配置図を参考に、以下の記事で構築した環境の構成図を作成。

@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

なんかセンスないな..🤔

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