Comments (2)
Good catch, previously we had AWS_BORDER_COLOR
which I wanted to leave defined for backward compatibility. I didn't need to add $AWS_BORDER_COLOR
since it was an older value for the orange color (which is now $AWS_COLOR_SMILE
). I'll probably remove in future docs, but leave defined as to not break anyone.
For built-in theming, I updated color palette to align with AWS branding and to support toggling between light and dark mode, which uses the same BorderColor $AWS_COLOR_GRAY
.
What kind of color theming where you thinking about? Would you mind creating a sample diagram and posting the source / image as an example? You might be able to just add your own skinparam
sections in your diagram to override the BorderColor
.
skinparam rectangle {
BorderColor #FF9900
}
from aws-icons-for-plantuml.
So... the way I do this right now is using the following on a theme file:
!$AWS_DARK = false
!$PUML_MODE = 'dark'
!$CUSTOM_COLOR_BLUE_DARK = '#240E89'
!$CUSTOM_COLOR_ORANGE_LIGHTEST = '#FAE2D2'
!$CUSTOM_COLOR_ORANGE_LIGHT = '#F1B66A'
!$CUSTOM_COLOR_ORANGE_DARK = '#E18815'
!$CUSTOM_COLOR_PURPLE_LIGHT = '#DCDEEB'
!$CUSTOM_COLOR_PURPLE_DARK = '#903AA9'
!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v16.0/dist
!include AWSPuml/AWSCommon.puml
skinparam Default {
TextAlignment center
}
skinparam Database {
ArrowColor $CUSTOM_COLOR_BLUE_DARK
ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
BorderColor $CUSTOM_COLOR_PURPLE_DARK
BorderThickness 2
FontColor $INFO
}
skinparam frame {
ArrowColor $CUSTOM_COLOR_BLUE_DARK
ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
BorderColor $CUSTOM_COLOR_PURPLE_DARK
BorderThickness 2
FontColor $INFO
FrameFontColor $INFO
}
skinparam rectangle {
ArrowColor $CUSTOM_COLOR_BLUE_DARK
ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
BorderColor $CUSTOM_COLOR_PURPLE_DARK
BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
FontColor $DARK_DARK
}
skinparam component {
ArrowColor $CUSTOM_COLOR_BLUE_DARK
ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHTEST
BorderColor $CUSTOM_COLOR_ORANGE_DARK
FontColor $DARK_DARK
}
skinparam legend {
ArrowColor $CUSTOM_COLOR_BLUE_DARK
ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHT
BorderColor $CUSTOM_COLOR_ORANGE_DARK
FontColor $CUSTOM_COLOR_BLUE_DARK
BorderThickness 3
}
left to right direction
!definelong AWSEntityColoring(stereo)
skinparam rectangle<<stereo>> {
$AWS_common_skinparam()
BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHTEST
BorderColor $CUSTOM_COLOR_ORANGE_DARK
BorderThickness 2
FontColor $DARK_DARK
}
!enddefinelong
!procedure $AWSGroupColoring($stereo, $border_color=$AWS_FG_COLOR, $border_style="plain")
skinparam rectangle<<$stereo>> {
ArrowColor $CUSTOM_COLOR_BLUE_DARK
BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
BorderColor $CUSTOM_COLOR_PURPLE_DARK
BorderStyle $border_style
BorderThickness 2
FontColor $AWS_FG_COLOR
FontSize 25
Shadowing false
StereotypeFontSize 0
}
!endprocedure
!include all_the_puml_files_I_need
It's very extensible, but there's a risk of it becoming difficult to maintain (for instance, migrating from v14 to v16 was a bit tougher than I expected). It would be fantastic if we could have some sort of alias for colors that are reused among all of the components. for instance:
!$AWS_DARK = false
!$PUML_MODE = 'dark'
!$CUSTOM_COLOR_BLUE_DARK = '#240E89'
!$CUSTOM_COLOR_ORANGE_LIGHTEST = '#FAE2D2'
!$CUSTOM_COLOR_ORANGE_LIGHT = '#F1B66A'
!$CUSTOM_COLOR_ORANGE_DARK = '#E18815'
!$CUSTOM_COLOR_PURPLE_LIGHT = '#DCDEEB'
!$CUSTOM_COLOR_PURPLE_DARK = '#903AA9'
!$AWS_FG_COLOR = $DARK_DARK
!$AWS_BG_COLOR = $CUSTOM_COLOR_PURPLE_LIGHT
!$AWS_ARROW_COLOR = $CUSTOM_COLOR_BLUE_DARK
!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v16.0/dist
!include AWSPuml/AWSCommon.puml
!include all_the_puml_files_I_need
This way we can fully color ALL the components thanks to
AWS_deployment_skinparam, AWSEntityColoring, AWSGroupColoring
etc...
from aws-icons-for-plantuml.
Related Issues (20)
- Icons are not high resolution and dull in colors HOT 1
- Sequence diagrams are unstyled with the newest PlantUML version HOT 4
- Syntax error on AWS objects HOT 3
- 404 Not Found HOT 1
- SecurityGroup puml doesnot work HOT 1
- Including General/Globe.puml results in a syntax error HOT 2
- Please add AwS Location Service puml/image HOT 6
- Define variable in puml files to reference color HOT 6
- AWSSimplified.puml should also take into account sequence diagrams HOT 5
- Request: Overlapping Groups HOT 2
- Request: List of content HOT 2
- Can we add the GraphQL icon to the overall set? HOT 5
- Question: Is it possible to generate fully scalable (SVG) diagrams? HOT 2
- Question: how can I modify the default label on Groups elements? HOT 2
- Update to Release 17-2023.10.23 of AWS Architecture Icons
- VSCODE Reder Errror HOT 11
- Full list of the available icons HOT 1
- It's always dark mode even no dark mode is specified HOT 8
- Syntax error for ApplicationIntegration/{all,EventBridge*}.puml HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aws-icons-for-plantuml.