제목

PlantUML 는 다이어그램을 생성하는 DSL.
예를 들어, 아래와 같이 써 plantuml 커멘드로 화상 변환하면,

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

다음과 같은 이미지 파일 (png)이 완성됩니다.



위는 시퀀스 다이어그램의 예이지만 UML 세트는 물론 와이어 프레임, 간트 차트, 마인드 맵까지 쓸 수 있습니다.

이번에는 이 PlantUML에서 Google Cloud Platform의 시스템 구성도를 작성해 보자.

개발 환경

#OS

$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.2 LTS (Bionic Beaver)"

# Visual Studio Code

Version: 1.33.1
Commit: 51b0b28134d51361cf996d2f0a1c698247aeabd8
Date: 2019-04-11T08:20:22.771Z
Electron: 3.1.6
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Linux x64 4.15.0-47-generic

실천

plantuml-gcp-icons

"plantuml-gcp-icons"이라는 GCP의 각 서비스의 아이콘을 보여주는 도구를 사용.
덧붙여서, AWS의 각 서비스의 아이콘을 도시하는 것도 있는 것 같다.
htps : // 기주 b. 코 m / mi-min r 병 r / WS-P 펜츠 ML

전제

이하는 구구하면 곧 알기 때문에 생략.

Visual Studio Code 설치

Visual Studio Code의 PlantUML 플러그인 설치

plantuml-gcp-icons 얻기

샘플

우선은 plantuml-gcp-icons 사이트의 README 에 있는 것을 그대로 화상 변환해 본다.

@startuml
!include ./common.puml
!include ./GCP Icons/Products & Services/Storage & Databases/Cloud Bigtable.puml
!include ./GCP Icons/Products & Services/Big Data/BigQuery.puml

GCP_CloudBigtable(foo, "My BigTable")
GCP_BigQuery(bar, "Data Processing")

foo -> bar

@enduml

※Visual Studio Code의 PlantUML 플러그인이 표시한 미리보기

소매업을 위한 실시간 인벤토리 시스템

이하에 실려 있는 아키텍쳐도를 표현해 본다.
htps : // c ぉ d. 오, ぇ. 코 m / 소 치온 s / 부이 l ぢ ん れ あ ー ー ち め ー ー ゔ ぇ와 ry-sys ms 싶어 l? hl = 그럼

@startuml
!include ./common.puml
!include ./Icons/Compute/App Engine.puml
!include ./Icons/Big Data/Cloud PubSub.puml
!include ./Icons/Big Data/Cloud Dataflow.puml
!include ./Icons/Storage & Databases/Cloud SQL.puml
!include ./Icons/Big Data/BigQuery.puml
!include ./Icons/Storage & Databases/Cloud Bigtable.puml

rectangle RetailStore as rs {
    node "Inventory Changes" <<"Point of sale">>
}

rectangle Ingest {
    GCP_AppEngine("cc","Capture Changes")
}
rectangle Messaging {
    GCP_CloudPubSub("sc", "Streaming Changes")
}
rectangle Services {
    GCP_AppEngine("ia","Inventory APIs")
}
rectangle Processing {
    GCP_CloudDataflow("is", "Inventory Streams")
}
rectangle Aggregates {
    GCP_CloudSQL("ic", "Inventory Counts")
}
rectangle Analytics {
    GCP_BigQuery("dw", "Data Warehouse")
}
rectangle Events {
    GCP_CloudBigtable("pc", "Processed Changes")
}

rectangle Integrations as i {
    node "Google Services"
}

rectangle BackOffice as bo {
    node "Businness Applications"
}


rs -> cc
cc --> sc
sc --> ia
sc -> is
is --> ic
ic -left-> ia
is -> pc
is -> dw
ia --> bo
ia --> i

@enduml

※Visual Studio Code의 PlantUML 플러그인이 표시한 미리보기

요약

조금 아직 표현력으로서는 아쉽다고 하는 느낌일까. . .
물론 PlantUML을 쓰는 방법을 더 이해하면 좀 더 좋은 그림이 될 것 같지만.

이번 소스는 ↓
htps : // 기주 b. 코 m / 스카이 0621 / try-p ぁ つ ml / t Ree /