PlantUMLでAWSアイコンを使ったシステム構成図を作る

2019-04-25

UML

Page content

公開されているAWS Simple Iconsのpumlファイルをincludeすることで、PlantUMLで簡単に図に導入できる。

ダイアグラム別UML徹底活用第2版

Amazonで調べる

楽天市場で調べる

Yahooショッピングで調べる

7netで調べる

AWSを使ったクラウドサービスを開発している人は、一度はPowerPointやVisioで構成図を作って説明したことがあるはず。

これも簡単なものならPlantUMLでさらっと書ける。

概要

GitHubで公開されてます。

AWS-PlantUML

使い方

.puファイル内でincludeする。

@startuml

!define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/18-2-22/dist
!includeurl AWSPUML/common.puml

!includeurl AWSPUML/ApplicationServices/AmazonAPIGateway/AmazonAPIGateway.puml
!includeurl AWSPUML/Compute/AWSLambda/LambdaFunction/LambdaFunction.puml
!includeurl AWSPUML/Database/AmazonDynamoDB/table/table.puml
...

サービスのパスは上のGitHubを見ながら、ほしいものをincludeしていく。

書いてみる

includeしたAWSアイコンは、基本的に以下の書式で書ける。

AWS_SERVICE_NAME_UPPERCASE(puml resource name, display name)

cloudみたいに、{}で括って他のサービスを入れられる。

@startuml

!define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/18-2-22/dist
!includeurl AWSPUML/common.puml
!includeurl AWSPUML/ApplicationServices/AmazonAPIGateway/AmazonAPIGateway.puml
!includeurl AWSPUML/Compute/AWSLambda/LambdaFunction/LambdaFunction.puml
!includeurl AWSPUML/Database/AmazonDynamoDB/table/table.puml
!includeurl AWSPUML/General/AWScloud/AWScloud.puml
!includeurl AWSPUML/General/client/client.puml
!includeurl AWSPUML/General/users/users.puml
!includeurl AWSPUML/NetworkingContentDelivery/AmazonCloudFront/AmazonCloudFront.puml
!includeurl AWSPUML/NetworkingContentDelivery/AmazonRoute53/AmazonRoute53.puml
!includeurl AWSPUML/NetworkingContentDelivery/AmazonVPC/AmazonVPC.puml
!includeurl AWSPUML/Storage/AmazonS3/bucket/bucket.puml

AWSCLOUD(aws) {
    AMAZONROUTE53(route53)
    AMAZONCLOUDFRONT(cloudfront)

    AMAZONVPC(vpc) {
        LAMBDAFUNCTION(lambda,RestFunction)
        AMAZONAPIGATEWAY(api,RestApi)
        BUCKET(web_bucket,web)
        BUCKET(log_bucket,log)
        TABLE(table, records)
    }
}

USERS(users,Users)
CLIENT(client)

users -> client
client -> route53
client -> cloudfront
cloudfront -> api

api -> lambda
lambda -> web_bucket
lambda -> table

web_bucket .> log_bucket

route53 .[hidden]. cloudfront
table .[hidden]. web_bucket

@enduml

図にすると以下のような感じ。