PlantUMLでAWSサービスを含む図を作る

プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。

せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツールを開くのは面倒だな、テキストで図を描ければ、ソースコードとして管理できるから似たような図を量産するのも楽だし、バージョン管理で変更点もわかりやすい。

ということで探したところ、Plantuml が見つかりました。日本語のマニュアルもあるし、評判もいいみたい。

インストールしようとしたところ、図を1,2個作るだけならオンラインでできるようです。試すだけならハードルはとても低い。

マニュアルを参考にして作ったのがこちら

@startuml [Github] as github [さくらVPS] as vps [local machine] as localmachine :ユーザー: <.... github :1) pull :ユーザー: ....> localmachine :2) Sculpinで変換 :ユーザー: ....> vps :3) upload(scp) :ユーザー: ....> github :4) push :訪問者: .left.> vps:閲覧 @enduml

変換した図がこれ

要素の順序や線の向きなど、細かく指定する方法もあるみたいですが、それをやりだすと大変そう。「まあ大体わかればいいか」というレベルで済むなら、驚くほど簡単でした。

# png でも svg でも作れるので、svg で問題ない環境なら svg もいいですね。WordPress ではまだ大変みたいなので png で貼っておきます

PlantUML で AWS の構成図を描く

UML で使えるアイコンはもちろん広く用意されているのですが、サービスのアイコンについても利用者が作って公開しているようです。AWS のサービスを表す図を公開している milo-minderbinder/AWS-PlantUML を見つけたので、これを使ってみました。

Github 上のライブラリを、前記のオンラインエディタから参照できるので、こちらも簡単です。使いたいコンポーネントを AWS-PlantUML から探して、include するだけで使えるようになります。

@startuml !define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/17-10-18/dist !includeurl AWSPUML/common.puml !includeurl AWSPUML/Storage/AmazonS3/AmazonS3.puml !includeurl AWSPUML/Storage/AmazonS3/bucket/bucket.puml !includeurl AWSPUML/General/user/user.puml !includeurl AWSPUML/General/AWScloud/AWScloud.puml !includeurl AWSPUML/NetworkingContentDelivery/AmazonCloudFront/AmazonCloudFront.puml [BitBucket] as bitbucket [CircleCI] as circleci AWSCLOUD(aws) { AMAZONS3(s3) { BUCKET(blog, "akimoto.jp") } AMAZONCLOUDFRONT(cloudfront,"CDN") } :ユーザー: -right-> bitbucket :**1**) push bitbucket -right-> circleci :**2**) kick circleci -right-> blog :**3**) upload blog --> cloudfront :**4**) distribute :訪問者: .> cloudfront:閲覧 note "ビルド&テスト" as note_build_and_test circleci .u. note_build_and_test @enduml

変換後

これも、コンポーネントの配置順が気に入らない、とかで調整しようとするとたちまち難しくなってきたので、まあ関係性が読めればいいか、で気にしないことにします。マニュアルを読み込んで頑張れば調整もできるのだとは思いますが。

プレゼン中の図も小さなテキストで管理できるようになったので満足です。