スプライトが公開されている

いろいろネットを探すと、アイコンを PlantUML で使えるスプライトにしたものが公開されていました。

!define GCPPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-icons-GCP/master/dist
!include GCPPuml/GCPCommon.puml
!include GCPPuml/Compute/Cloud_Functions.puml

listsprites

よし、使えそう。

駄菓子菓子！

公開されているものは最終更新日が 2020年であり、結構時間が経っています。そのためか、一部のサービスのアイコンは未搭載だったりしていますね・・・

自前で何とかする

実装内容確認

現在使用できるアイコンが、どんな感じに定義されているか調べてみます。

gcp-icons-for-plantuml/dist/Compute/CloudFunctions.puml at master · davidholsgrove/gcp-icons-for-plantuml · GitHub

sprite $Cloud_Functions [64x64/16z] {
hogehoge...
}

EntityColoring(Cloud_Functions)
!define Cloud_Functions(e_alias, e_label, e_techn) Entity(e_alias, e_label, e_techn, #036ffc, Cloud_Functions, Cloud_Functions)
!define Cloud_Functions(e_alias, e_label, e_techn, e_descr) Entity(e_alias, e_label, e_techn, e_descr, #036ffc, Cloud_Functions, Cloud_Functions)
!define Cloud_FunctionsParticipant(p_alias, p_label, p_techn) Participant(p_alias, p_label, p_techn, #036ffc, Cloud_Functions, Cloud_Functions)
!define Cloud_FunctionsParticipant(p_alias, p_label, p_techn, p_descr) Participant(p_alias, p_label, p_techn, p_descr, #036ffc, Cloud_Functions, Cloud_Functions)

縦横 64px の sprite が定義されている。
マクロが定義されている。

これを真似れば、できるはず。

アイコン入手

GCP の各サービスを表すアイコンはここから入手できそう cloud.google.com

今回は Cloud API Gateway を使えるようにしてみます。

変換手順

入手したアイコン素材を、スプライトに変換します。

java -jar ./plantuml-1.2023.10.jar -encodesprite 16z ./cloud_api_gateway.png > cloud_api_gateway.puml

出力されたデータを使ってみます。

sprite $Cloud_API_Gateway_1 [512x512/16z] {
... 
}

listsprites

大きすぎる... だって、512px だもの。

ということで、64px にサイズダウンして再挑戦です。

sprite $Cloud_API_Gateway_2 [64x64/16z] {
... 
}

listsprites

大きさは良いですが、色が黒い・・・
透過色が無視されるんでしょうね。

透過色を消した画像を作ります。

convert cloud_api_gateway.png -background white -flatten -alpha off output.png

ImageMagick のコマンドラインツールを使いました。オプションの意味は次のとおりだそうです by ChatGPT

background white: 出力画像の背景色を白に設定。透明なアルファチャンネルを持っている場合に、そのアルファチャンネルを白で埋める。
flatten: 画像のアルファチャンネルを実際の色情報に合成して、アルファチャンネルを削除。完全に不透明な画像として保存される。
alpha off: アルファチャンネルを無効にします。画像が透明情報を持たないようになる。

変換した画像使って、再びスプライトにして、試します。
最終的なコードはこちら。

sprite $Cloud_API_Gateway [64x64/16z] {
...
}
EntityColoring(Cloud_API_Gateway)
!define Cloud_API_Gateway(e_alias, e_label, e_techn) Entity(e_alias, e_label, e_techn, #036ffc, Cloud_API_Gateway, Cloud_API_Gateway)
!define Cloud_API_Gateway(e_alias, e_label, e_techn) Entity(e_alias, e_label, e_techn, #036ffc, Cloud_API_Gateway, Cloud_API_Gateway)
!define Cloud_API_Gateway(e_alias, e_label, e_techn, e_descr) Entity(e_alias, e_label, e_techn, e_descr, #036ffc, Cloud_API_Gateway, Cloud_API_Gateway)
!define Cloud_API_GatewayParticipant(p_alias, p_label, p_techn) Participant(p_alias, p_label, p_techn, #036ffc, Cloud_API_Gateway, Cloud_API_Gateway)
!define Cloud_API_GatewayParticipant(p_alias, p_label, p_techn, p_descr) Participant(p_alias, p_label, p_techn, p_descr, #036ffc, Cloud_API_Gateway, Cloud_API_Gateway)

listsprites