제대로 구성도를 쓰는데 PlantUML이 잘 듣고.

PlantUML이란?

htps : // p ぁつ ml. 코 m/그럼/
텍스트로 UML을 작성할 수 있는 도구.

장점
각 컴포넌트를 좋은 느낌으로 배치해 준다.
텍스트 기반이기 때문에 diff를 가져갈 수 있습니다.

소개

macOS Big Sur
Visual Studio Code 1.53.1

자바

% 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 [email protected]_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

뭔가 센스 없어..🤔


향후는 샘플을 보고 공부하거나, 우선 써 보거나를 반복해, 살짝 이케테르도가 그릴 수 있도록 노력하겠습니다. 끝.