search

awslabs / aws-icons-for-plantuml

PlantUML sprites, macros, and other includes for Amazon Web Services services and resources
Other
887 stars 149 forks source link

Icons are not high resolution and dull in colors #43

Closed bansmani closed 2 years ago

bansmani commented 2 years ago

Can we do anything about making the icons looks more appealing also can we customize the size of icons (I am not sure if that's possible)

hakanson commented 2 years ago

I'm including some short term solutions below and we are designing for better looking images in an upcoming release.

The current release is using the native PlantUML sprite format, which is a grayscale image. These sprites have been generated as [64x64/16z], which is a 64 x 64 resolution at 16 shades of gray. Then, the sprites are re-colored back with the syntax like <color:#D86613><$Lambda></color> which is likely whey they don't look appealing.

Also included in the current distribution alongside the .puml files are 64x64 .png image files which can be referenced using the creole <img> syntax. It is possible to customize the size of the icons using the PlantUML {scale=X} syntax, which works both for the native sprites and png images. Here is an example of that syntax:

participant "<color:#D86613><$Lambda{scale=2}></color>\nLambda"
participant "<img https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v11.1/dist/Compute/Lambda.png{scale=2}>\nLambda"

This image (generated by PlantUML version 2022.5) is each of the Sprite and PNG for Lambda at normal scale, .5 scale, as 2x scale:

Issue 43

Below is the full .puml for the image above. It also defines a custom $AWSPNGImage function to make that <img> generation easier.

@startuml Issue 43
'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/v11.1/dist
!include AWSPuml/AWSCommon.puml
!include AWSPuml/Compute/Lambda.puml

!function $AWSPNGImage($img, $scale=1)
!return "<img " + AWSPuml + "/" + $img + "{scale=" + $scale + "}>"
!endfunction

'Hide the bottom boxes
hide footbox

actor User as user
participant "<color:#D86613><$Lambda></color>\nLambda" as lambda1
participant "<color:#D86613><$Lambda{scale=.5}></color>\nLambda" as lambda2
participant "<color:#D86613><$Lambda{scale=2}></color>\nLambda" as lambda3
participant "$AWSPNGImage(Compute/Lambda.png)\nLambda" as lambda4
participant "$AWSPNGImage(Compute/Lambda.png,.5)\nLambda" as lambda5
participant "$AWSPNGImage(Compute/Lambda.png,2)\nLambda" as lambda6

user -> lambda1: colored sprite
user -> lambda2: colored sprite (scale .5)
user -> lambda3: colored sprite (scale 2)
user -> lambda4: png
user -> lambda5: png (scale .5)
user -> lambda6: png (scale 2)
@enduml