[PlanetUML] 모양새 Tips 메모

현재 잘 나가는 회사는 납품 관계로 대부분 Excel로 문서를 제작한다
그림은 가능한 한 PlanetUML로 대체하여 사용 범위를 조금씩 넓히고 싶다.
(주로 pg로 출력하여 Excel에 붙여넣는 방법
다만, 외관 등 본질적으로 다른 부분에서는 조금 지적됐다.
작은 공예품을 조금 사용했기 때문에 Tips를 적어야 합니다.

색상 수정

기본적으로 다음 색상이 사용됩니다. 회사에서 지정한 슬라이드 모판,
다른 사람이 만든 자료에 함께 싣다 보면 통일감이 없을 때도 있다.

색상 변경은 아래 페이지에서 설명한 바와 같이skinparam을 지정하면 변경할 수 있습니다.
https://plantuml.com/ja/skinparam
지정할 수 있는 항목은 여러 가지 측면이 있는데, 먼저 대충 색깔을 바꾸고 싶다면
아래 5개 변경하시면 됩니다.

화살표 색상(ArroowColor)

글꼴 색상(DefaultFontColor)

경계선 색상(XXXXXXXBorder Color)

배경색(XXXXBackgroundColor)

활성 또는 상태 마이그레이션 맵의 시작 끝 색상(XXXStartColor, XXXEndColor)

또 개인 취향으로는 다음과 같은 경우도 상황에 따라 지정한다.

dpi

섀도우 없음

글꼴(DefaultFontName)

다음은 변경 예입니다.

몇 가지 색깔의 패키지를 만들어 아래와 같이 제출해 보았습니다.
https://github.com/Kazuhito00/PlantUML-ColorSet-Example
skinparam의 설정을 총괄했기 때문에 복제 후include
URL을 지정하여 GiitHub의 파일include에 설정을 적용할 수 있습니다.

@startuml
!include https://raw.githubusercontent.com/Kazuhito00/PlantUML-ColorSet-Example/main/colorset/colorset00.txt
'!include colorset/colorset00.txt

start
if (AAAA?) then (yes)
  :BBBB;
else (no)
  :CCCC;
endif
stop
@enduml

이미지 삽입

자료를 만들 때도'삽화를 첨부해 주세요'같은 의뢰를 받기도 한다.
태그를 사용하여 이미지를 삽입할 수 있습니다.
문자를 삽입할 수 있는 곳에서는 기본적으로 사용할 수 있을 것 같다.
(이미지를 예쁘게 삽입할 것인지는 또 다른 문제입니다.
다음 느낌으로 삽입할 수 있습니다.

@startuml
!include https://raw.githubusercontent.com/Kazuhito00/PlantUML-ColorSet-Example/main/colorset/colorset00.txt

start
if (AAAA?) then (yes)
  :BBBB \n <img:image/icon50.jpg>;
else (no)
  :CCCC \n <img:https://raw.githubusercontent.com/Kazuhito00/Kazuhito00/master/image/icon50.jpg>;
endif
stop
@enduml

다음은 다양한 곳을 삽입해 본 예다.

AWS 아이콘

다음 저장소를 사용하여 AWS의 맵을 작성합니다.
https://github.com/awslabs/aws-icons-for-plantuml
사용법을 대략적으로 쓰면 다음과 같은 느낌이다.
① URL을 AWSPuml로 정의

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v11.1/dist

② AWSCommon 포함

!include AWSPuml/AWSCommon.puml

③ 사용할 구성 요소 포함

!include AWSPuml/General/User.puml
!include AWSPuml/ApplicationIntegration/APIGateway.puml
!include AWSPuml/SecurityIdentityCompliance/Cognito.puml
!include AWSPuml/Compute/Lambda.puml
!include AWSPuml/Database/DynamoDB.puml

④ 어셈블리 정의

User(user, "APIコール", "User01")
APIGateway(api, "サンプルAPI", "API01")
Lambda(dbexe, "DB登録実行", "Lambda01")
DynamoDB(db, "サンプルDB", "Database01")

⑤ 정의 관련성

left to right direction
user --> api
api --> dbexe
dbexe --> db

는 다음과 같이 표시됩니다.

또한 AWSCommon은pull과 사용 구성 요소 사이에 'AWSSsimplified.pull' 을 삽입하면 아이콘 표시가 간단합니다.

!include AWSPuml/AWSCommon.puml

!include AWSPuml/AWSSimplified.puml

!include AWSPuml/General/User.puml

plantuml-icon-font-sprites

일부 그림 (예시도와 설정도 등) 에서만 사용할 수 있지만, plantuml-icon-font-sprites 을 사용하여 각종 아이콘을 사용할 수 있다.


아이콘 목록은 아래에 있습니다.
개인적으로 자주 사용합니다Devicons.
https://github.com/tupadr3/plantuml-icon-font-sprites#icon-sets
이쪽 사용법도 AWS 아이콘과 비슷하다.
↓첫번째 예

@startuml
!include https://raw.githubusercontent.com/Kazuhito00/PlantUML-ColorSet-Example/main/colorset/colorset00.txt

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.3.0
!include ICONURL/common.puml

!include ICONURL/devicons/android.puml
!include ICONURL/devicons/apple.puml

DEV_ANDROID(ICON01, "Text1")
DEV_APPLE(ICON02, "Text2")

ICON01 <-> ICON02
@enduml

↓ 두 번째 예

@startuml
!include https://raw.githubusercontent.com/Kazuhito00/PlantUML-ColorSet-Example/main/colorset/colorset00.txt

!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.3.0
!include ICONURL/common.puml

!include ICONURL/devicons/aptana.puml

DEV_APTANA(ICON01, "XXXX")

left to right direction
rectangle "GitHub" as GitHub {
  usecase "Clone" as usecase01
  usecase "Fork" as usecase02
}
ICON01 --> usecase01
ICON01 --> usecase02
@enduml

위치 관계

PlanetUML의 매력은 자동으로 배치할 수 있다는 점입니다.
자료를 첨부할 때 위치 관계를 컨트롤하고 싶을 때가 있다.
아래 기록을 하면 위에서 아래로 뻗은 그림이 생성됩니다.

(AAAA) --> (BBBB)

(BBBB) --> (CCCC)
(AAAA) --> (CCCC)

(AAAA) --> (DDDD)
(BBBB) --> (DDDD)

(CCCC) --> (EEEE)
(DDDD) --> (FFFF)

(CCCC) --> (GGGG)
(DDDD) --> (HHHH)

Powerport에 붙일 때 가로로 붙이는 것이 좋을 때가 있기 때문에 다음과 같은 내용을 지정해야 한다
왼쪽에서 오른쪽으로 흐르는 그림을 생성합니다.

left to right direction

(AAAA) --> (BBBB)

또한right/left/up/down(단축형 r/l/u/d)을 지정하여 그림이 설정한 위치를 지정합니다
어느 정도는 컨트롤할 수 있다.

!include https://raw.githubusercontent.com/Kazuhito00/PlantUML-ColorSet-Example/main/colorset/colorset00.txt

(AAAA) -r-> (BBBB)

(BBBB) --> (CCCC)
(AAAA) --> (CCCC)

(AAAA) --> (DDDD)
(BBBB) --> (DDDD)

(CCCC) -l-> (EEEE)
(DDDD) -r-> (FFFF)

(CCCC) --> (GGGG)
(DDDD) --> (HHHH)

위치 관계를 조사했다면, 아래 기사에 매우 상세하게 기재되어 있다.
더 자세히 알고 싶은 사람은 여기를 참조하세요.
https://zenn.dev/kitabatake/articles/plantuml-layout
이상.