Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

2022年10月29日
知恵
このエントリーをはてなブックマークに追加
Pocket

PlantUMLで、Twitter検索していたら、こちらを見つけました。

Kubernetes-PlantUML contains the PlantUML sprites, macros and stereotypes for creating PlantUML diagrams with the Kubernetes components

This work is based on the official Kubernetes Icons Set

➜ https://t.co/xZ4A0wWBEw pic.twitter.com/1lmUvIuPPu— Kubernetes Architect (@K8sArchitect) October 24, 2022

Kubernetes-PlantUMLは、Kubernetesコンポーネントを使ったPlantUML図を作成するためのPlantUMLスプライト、マクロ、ステレオタイプが含まれています。

この作品は、公式のKubernetes Icons Setをベースにしています。

PlantUMLでシステム構成図かけるんですね。知らなかったです。

PlantUMLで管理できれば、履歴管理できるので助かりますよね。(drawioとかで書いていました)

こちらは、Kubernetesに特化したものですが、例えば、AWSのアイコンセットを使って構成図を作ることも可能なようです。(こちらは、後述します。)

目次

VSCodeでPlantUMLで図が描けるように設定する

すでに、Visual Studio Codeの設定が完了している前提で記載していきます。

まだの方は、以下のページを参考にインストールしてみてください。

PlantUML(プラントユーエムエル)でシーケンス図を書くぞ！

PlantUML(プラントユーエムエル)でシーケンス図を書くぞ！

みなさん、シーケンス図は何を使って書いていますか？ エクセルとかスプレッドシート…
zaitakukinmu.com

システム構成図を描く

詳細は、以下のgitリポジトリを参照してください。

Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

GitHub - dcasati/kubernetes-PlantUML: Kubernetes diagrams using VS Code

Kubernetes diagrams using VS Code. Contr…
github.com

まず、Visual Studio Codeで、拡張子が下記のいづれかのファイルを作成します。

  • wsd
  • pu
  • puml
  • plantuml
  • iuml

作成したらファイルの先頭に以下をコピペします。

' Kubernetes
!define KubernetesPuml https://raw.githubusercontent.com/dcasati/kubernetes-PlantUML/master/dist

' global definition
!includeurl KubernetesPuml/kubernetes_Common.puml
!includeurl KubernetesPuml/kubernetes_Context.puml
!includeurl KubernetesPuml/kubernetes_Simplified.puml

' k8s specific components
!includeurl KubernetesPuml/OSS/KubernetesPod.puml
!includeurl KubernetesPuml/OSS/KubernetesPsp.puml
!includeurl KubernetesPuml/OSS/KubernetesPv.puml
!includeurl KubernetesPuml/OSS/KubernetesPvc.puml

たったこれだけです。あとは、コードを書いていきます。

上記を含む、以下のサンプルコードを貼り付けてみてください。

@startuml kubernetes

footer Kubernetes Plant-UML
scale max 1024 width

skinparam nodesep 10
skinparam ranksep 10

' Kubernetes
!define KubernetesPuml https://raw.githubusercontent.com/dcasati/kubernetes-PlantUML/master/dist

!includeurl KubernetesPuml/kubernetes_Common.puml
!includeurl KubernetesPuml/kubernetes_Context.puml
!includeurl KubernetesPuml/kubernetes_Simplified.puml

!includeurl KubernetesPuml/OSS/KubernetesSvc.puml
!includeurl KubernetesPuml/OSS/KubernetesIng.puml
!includeurl KubernetesPuml/OSS/KubernetesPod.puml
!includeurl KubernetesPuml/OSS/KubernetesRs.puml
!includeurl KubernetesPuml/OSS/KubernetesDeploy.puml
!includeurl KubernetesPuml/OSS/KubernetesHpa.puml

actor "User" as userAlias
left to right direction

' Kubernetes Components
Cluster_Boundary(cluster, "Kubernetes Cluster") {
    Namespace_Boundary(ns, "Back End") {
        KubernetesIng(ingress, "your.domain.com", "")
        KubernetesSvc(svc, "service", "")
        KubernetesPod(pod1, "pod1", "")
        KubernetesPod(pod2, "pod2", "")
        KubernetesPod(pod3, "pod3", "")

        KubernetesRs(rs,"","")
        KubernetesDeploy(deploy,"deployment","")
        KubernetesHpa(hpa, "HPA", "")
    }
}

Rel(userAlias,ingress," ")
Rel(ingress,svc," ")

Rel(svc,pod1," ")
Rel(svc,pod2," ")
Rel(svc,pod3," ")

Rel_U(rs,pod1," ")
Rel_U(rs,pod2," ")
Rel_U(rs,pod3," ")

Rel_U(deploy,rs, " ")
Rel_U(hpa,deploy, " ")

@enduml

すると、プレビューにこちらが表示されます。

Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

kubernetes-PlantUML のステンシルは、他の PlantUML ファイルと混ぜて使用することができるとのことです。例えば、このリファレンス・アーキテクチャのマイクロサービスを説明するために、Azure-PlantUML ファイルと一緒に使用する例が以下になります。

@startuml kubernetes

footer Kubernetes Plant-UML
scale max 1024 width

skinparam nodesep 10
skinparam ranksep 10

' Azure
!define AzurePuml https://raw.githubusercontent.com/RicardoNiepel/Azure-PlantUML/release/2-1/dist

!includeurl AzurePuml/AzureCommon.puml
!includeurl AzurePuml/AzureSimplified.puml

!includeurl AzurePuml/Containers/AzureContainerRegistry.puml
!includeurl AzurePuml/Databases/AzureCosmosDb.puml
!includeurl AzurePuml/Databases/AzureSqlDatabase.puml
!includeurl AzurePuml/DevOps/AzurePipelines.puml
!includeurl AzurePuml/Identity/AzureActiveDirectory.puml
!includeurl AzurePuml/Networking/AzureLoadBalancer.puml
!includeurl AzurePuml/Security/AzureKeyVault.puml

' Kubernetes
!define KubernetesPuml https://raw.githubusercontent.com/dcasati/kubernetes-PlantUML/master/dist

!includeurl KubernetesPuml/kubernetes_Common.puml
!includeurl KubernetesPuml/kubernetes_Context.puml
!includeurl KubernetesPuml/kubernetes_Simplified.puml

!includeurl KubernetesPuml/OSS/KubernetesApi.puml
!includeurl KubernetesPuml/OSS/KubernetesIng.puml
!includeurl KubernetesPuml/OSS/KubernetesPod.puml

actor "DevOps" as devopsAlias
collections "Client Apps" as clientalias
collections "Helm Charts" as helmalias

left to right direction

' Azure Components
AzureActiveDirectory(aad, "\nAzure\nActive Directory", "Global")
AzureContainerRegistry(acr, "ACR", "Canada Central")
AzureCosmosDb(cosmos, "\nCosmos DB", "Global")
AzureKeyVault(keyvault, "\nAzure\nKey Vault", "Global")
AzureLoadBalancer(alb, "\nLoad\nBalancer", "Canada Central")
AzureSqlDatabase(sql, "\nExternal\ndata stores", "Canada Central")
AzurePipelines(ado, "CI/CD\nAzure Pipelines", "Global")

' Kubernetes Components
Cluster_Boundary(cluster, "Kubernetes Cluster") {
    KubernetesApi(KubernetesApi, "Kubernetes API", "")

    Namespace_Boundary(nsFrontEnd, "Front End") {
        KubernetesIng(ingress, "API Gateway", "")
    }

    Namespace_Boundary(nsBackEnd, "Back End") {
        KubernetesPod(KubernetesBE1, "", "")
        KubernetesPod(KubernetesBE2, "", "")
        KubernetesPod(KubernetesBE3, "", "")
    }

    Namespace_Boundary(nsUtil, "Utiliy Services") {
        KubernetesPod(KubernetesUtil1, "", "")
        KubernetesPod(KubernetesUtil2, "","")
    }
}

Rel(devopsAlias, aad, "AUTH")
Rel(helmalias, KubernetesApi, "helm upgrade")

Rel(aad, keyvault, " ")
Rel(KubernetesApi, aad, "RBAC", "ASYNC")

Rel(clientalias, alb, "HTTP", "ASYNC")
Rel(alb, ingress, "HTTP", "ASYNC")

Rel(ingress, KubernetesBE1, " ")
Rel(KubernetesBE1, KubernetesBE2, " ")
Rel(KubernetesBE1, KubernetesBE3, " ")

Rel(KubernetesBE2, sql, " ")
Rel(KubernetesBE3, keyvault, "Pod Identity")
Rel(KubernetesBE3, cosmos, " ")

Rel(ado, acr, "docker push")
Rel_U(KubernetesApi, acr, "docker pull")
@enduml
Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

いい感じですね。

AWSの構成図を描く

AWSのものは、こちらのリポジトリです。

Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

GitHub - awslabs/aws-icons-for-plantuml: PlantUML sprites, macros, and other includes for Amazon Web Services services and resources

PlantUML sprites, macros, and other incl…
github.com

Kubernetes-PlantUMLと同じように、以下を読み込めばよいようです。

' Define the main location (URL or local file path)
!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v14.0/dist
' Include main AWSCommon and then resource files
!include AWSPuml/AWSCommon.puml
!include AWSPuml/BusinessApplications/all.puml
!include AWSPuml/Storage/SimpleStorageServiceS3.puml

サンプルコードを入力してみます。

@startuml Two Modes - Technical View

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v14.0/dist
!include AWSPuml/AWSCommon.puml

' Uncomment the following line to create simplified view
' !include AWSPuml/AWSSimplified.puml

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

left to right direction

Users(sources, "Events", "millions of users")
APIGateway(votingAPI, "Voting API", "user votes")
Cognito(userAuth, "User Authentication", "jwt to submit votes")
Lambda(generateToken, "User Credentials", "return jwt")
Lambda(recordVote, "Record Vote", "enter or update vote per user")
DynamoDB(voteDb, "Vote Database", "one entry per user")

sources --> userAuth
sources --> votingAPI
userAuth <--> generateToken
votingAPI --> recordVote
recordVote --> voteDb

@enduml

こんな形で描けます。

Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

また、以下のサンプルを入力すると、サーバとシーケンスをあわせて表現できます。

@startuml Sequence Diagram - Images
'Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
'SPDX-License-Identifier: MIT (For details, see https://github.com/awslabs/aws-icons-for-plantuml/blob/master/LICENSE)

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v14.0/dist
!include AWSPuml/AWSCommon.puml
!include AWSPuml/Compute/Lambda.puml
!include AWSPuml/ApplicationIntegration/APIGateway.puml
!include AWSPuml/General/Internetalt1.puml
!include AWSPuml/Database/DynamoDB.puml

'Comment out to use default PlantUML sequence formatting
skinparam participant {
    BackgroundColor AWS_BG_COLOR
    BorderColor AWS_BORDER_COLOR
}
skinparam sequence { 
    ArrowThickness 2
    LifeLineBorderColor AWS_COLOR
    LifeLineBackgroundColor AWS_BORDER_COLOR
    BoxBorderColor AWS_COLOR
}

'Hide the bottom boxes / Use filled triangle arrowheads
hide footbox
skinparam style strictuml

actor User as user
box AWS Cloud
'Instead of using ...Participant(), native creole img tags can be used
participant "$APIGatewayIMG()\nCredit Card System\nAll methods are POST" as api << REST API >>
participant "$LambdaIMG()\nAuthorizeCard\nReturns status" as lambda << python3.9 >>
participant "PaymentTransactions\n$DynamoDBIMG()\nsortkey=transaction_id+token" as db << on-demand >>
endbox
participant "Authorizer\nReturns status and token\n$Internetalt1IMG()" as processor

'Use shortcut syntax for activation with colored lifelines and return keyword
user -> api++ #CC2264: Process transaction\nPOST /prod/process
api -> lambda++ #D86613: Invokes lambda with cardholder details
lambda -> processor++ #232F3E: Submit via API token\ncard number, expiry, CID
processor -> processor: Validate and create token
return status code and token
lambda ->> db: PUT transaction id, token
return status code, transaction id
return status code
@enduml
Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

実際の細かい記述については、本記事では割愛したいと思います。

PlantUMLでシステム構成図を書いていこうと思います。