|
|
|
|
|
色
|
Colors
|
|
|
塗りつぶし色と線の色をそれぞれ指定することができます：
transparentという特別な値を使うこともできます。これは、 transparent black ( #00000000)と同じ意味です。
ガントチャートの例：
@startgantt
[Activity1] lasts 5 days
[Activity2] lasts 5 days
[Activity1] is colored in White/Red
[Activity2] is colored in Silver/SeaGreen
[Activity1] -> [Activity2]
@endgantt
シーケンス図の例：
@startuml
actor Bob #Red/Yellow
actor Alice #FF0000/FFFF00
Alice -> Bob : hello
@enduml
ここでは、色のグラデーションを使用しています、次のセクションを参照してください。
また、 skinparamも参照してください。
|
You can use specify fill and line colors either:
A special color values: transparent can be used, synonym of transparent black ( #00000000).
Example on Gantt Diagram:
@startgantt
[Activity1] lasts 5 days
[Activity2] lasts 5 days
[Activity1] is colored in White/Red
[Activity2] is colored in Silver/SeaGreen
[Activity1] -> [Activity2]
@endgantt
Example on Sequence Diagram:
@startuml
actor Bob #Red/Yellow
actor Alice #FF0000/FFFF00
Alice -> Bob : hello
@enduml
This uses Color Gradient, see next section.
See also skinparam.
|
色のグラデーション
|
Color gradient
|
|
|
次の構文で背景に色のグラデーションを設定することもできます。 2つの色の名前を次のいずれかで区切って記述してください：
グラデーションの方向に応じて記号を使い分けてください。
前のセクションの例、および、 クラス図 色のグラデーションを参照してください。
|
You can also use color gradient in background, with the following syntax: two colors names separated either by:
depending the direction of the gradient.
See the previous section, and Color gradient on Class diagram page.
|
フォント色の自動設定
|
Automatic Font Color
|
|
|
フォント(テキストの前景)色に automaticという特別な値を設定することができます。こうすると、背景の色に応じて自動的にblackまたはwhiteが選択されます。
@startuml
skinparam classFontColor automatic
skinparam classHeaderBackgroundColor #444
class classA {
testMethodCode()
}
class classB #fff {
testMethodCode()
}
@enduml
In this example, since the background is dark blue, the font color automatically switches to white for better contrast in the message "hello", while keeping black for the participant labels.
WARNING This translation need to be updated. WARNING
|
PlantUML allows dynamic font color selection using the #? syntax. The system automatically chooses between two colors based on the current background color to ensure optimal contrast and readability.
How It Works:
- The
#? prefix defines a conditional color choice.
- Two colors follow, separated by a colon.
- The engine selects one based on the background:
- If the background is light, it uses the first color.
- If the background is dark, it uses the second color to maintain contrast.
Thus, the #?black:white syntax ensures that text remains legible across different background colors.
@startuml
<style>
document {
BackGroundColor darkblue
}
root {
FontColor #?black:white
LineColor white
}
</style>
alice -> bob : hello
@enduml
In this example, since the background is dark blue, the font color automatically switches to white for better contrast in the message "hello", while keeping black for the participant labels.
|
色と前処理
|
Color with preprocessing
|
|
|
前処理と ビルトイン関数を使って、色を操作することができます。
|
名前
|
説明
|
例
|
結果
|
%darken
|
与えられた色を一定割合で暗くした色を返します
|
%darken("red", 20)
|
#CC0000
|
%is_dark
|
与えられた色が暗い色かどうかを判定します
|
%is_dark("#000000")
|
true
|
%is_light
|
与えられた色が明るい色かどうかを判定します
|
%is_light("#000000")
|
false
|
%lighten
|
与えられた色を一定割合で明るくした色を返します
|
%lighten("red", 20)
|
#CC3333
|
%reverse_color
|
RGB基準で色を反転します
|
%reverse_color("#FF7700")
|
#0088FF
|
%reverse_hsluv_color
|
HSLuv基準で色を反転します
|
%reverse_hsluv_color("#FF7700")
|
#602800
|
|
You can manipulate color with Preprocessing, and the Builtin functions:
|
Name
|
Description
|
Example
|
Return
|
%darken
|
Return a darken color of a given color with some ratio
|
%darken("red", 20)
|
#CC0000
|
%is_dark
|
Check if a color is a dark one
|
%is_dark("#000000")
|
true
|
%is_light
|
Check if a color is a light one
|
%is_light("#000000")
|
false
|
%lighten
|
Return a lighten color of a given color with some ratio
|
%lighten("red", 20)
|
#CC3333
|
%reverse_color
|
Reverse a color using RGB
|
%reverse_color("#FF7700")
|
#0088FF
|
%reverse_hsluv_color
|
Reverse a color using HSLuv
|
%reverse_hsluv_color("#FF7700")
|
#602800
|
|
PlantUMLの色の一覧
|
View colors in PlantUML
|
|
|
とあるユーザにより、 PlantUMLで使用できる色名の一覧が作られました。(彼に感謝します！)
そこで、色の一覧を出力する特別なダイアグラムの機能が追加されました：
また、特定の色(色名または16進数)に近い色のパレットを表示することもできます。
@startuml
colors chocolate
@enduml
|
A user has recently created an image to display all names colors used by PlantUML. (We thank him by the way!)
So a new feature has been added to print all those colors using a special diagram description:
It is also possible to print a palette of colors close to some other color (using its name or HEX value).
@startuml
colors chocolate
@enduml
|
Archimateの色
|
Archimate colors
|
|
|
Archimateでは、ノードの用途に対応した色名を利用できます：
- Application
- Business
- Implementation
- Motivation
- Physical
- Strategy
- Technology
@startuml
skinparam minClassWidth 125
skinparam nodesep 10
skinparam ranksep 10
rectangle Application #Application
rectangle Business #Business
rectangle Implementation #Implementation
rectangle Motivation #Motivation
rectangle Physical #Physical
rectangle Strategy #Strategy
rectangle Technology #Technology
@enduml
|
Archimate uses color names that reflect the purpose of a node:
- Application
- Business
- Implementation
- Motivation
- Physical
- Strategy
- Technology
@startuml
skinparam minClassWidth 125
skinparam nodesep 10
skinparam ranksep 10
rectangle Application #Application
rectangle Business #Business
rectangle Implementation #Implementation
rectangle Motivation #Motivation
rectangle Physical #Physical
rectangle Strategy #Strategy
rectangle Technology #Technology
@enduml
|
PlantUMLの色
|
PlantUML colors
|
|
|
@startuml
skinparam minClassWidth 200
skinparam nodesep 10
skinparam ranksep 10
rectangle "ClassColor" {
rectangle "Class_C_Background\n #ADD1B2" #ADD1B2
rectangle "Class_N_Background\n #E3664A" #E3664A
rectangle "Class_A_Background\n #A9DCDF" #A9DCDF
rectangle "Class_I_Background\n #B4A7E5" #B4A7E5
rectangle "Class_E_Background\n #EB937F" #EB937F
}
rectangle "DefaultColor" {
rectangle "BackGroundColor_Default\n #FEFECE" #FEFECE
rectangle "LineColor_Default\n #A80036" #A80036
rectangle "Legend_BackGroundColor\n #DDDDDD" #DDDDDD
rectangle "//TBC//\n..."
}
@enduml
|
@startuml
skinparam minClassWidth 200
skinparam nodesep 10
skinparam ranksep 10
rectangle "ClassColor" {
rectangle "Class_C_Background\n #ADD1B2" #ADD1B2
rectangle "Class_N_Background\n #E3664A" #E3664A
rectangle "Class_A_Background\n #A9DCDF" #A9DCDF
rectangle "Class_I_Background\n #B4A7E5" #B4A7E5
rectangle "Class_E_Background\n #EB937F" #EB937F
}
rectangle "DefaultColor" {
rectangle "BackGroundColor_Default\n #FEFECE" #FEFECE
rectangle "LineColor_Default\n #A80036" #A80036
rectangle "Legend_BackGroundColor\n #DDDDDD" #DDDDDD
rectangle "//TBC//\n..."
}
@enduml
|
|
|
|
