Multilingual Wiki Documentation

You are currently using syntax.
In an attempt to improve PlantUML documentation...
Please do not use this website for your own diagrams.
You can click here and use the online server here for your own documentation.

Wiki Toc    View page history    Add new chapter    Reorder page    Raw


Couleurs

Colors

Vous pouvez utiliser pour spécifier les couleurs de remplissage et de ligne soit :

Une valeur de couleur spéciale transparent peut être utilisée, synonyme de transparent black (#00000000).

Exemple de diagramme de Gantt

@startgantt
[Activity1] lasts 5 days
[Activity2] lasts 5 days
[Activity1] is colored in White/Red
[Activity2] is colored in Silver/SeaGreen
[Activity1] -> [Activity2]
@endgantt

Exemple sur le Diagramme de Séquence

@startuml
actor Bob #Red/Yellow
actor Alice #FF0000/FFFF00
Alice -> Bob : hello
@enduml

Ceci utilise le dégradé de couleurs, voir la section suivante. Voir aussi 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.

Dégradé de couleurs

Color gradient

Vous pouvez également utiliser un dégradé de couleurs en arrière-plan, avec la syntaxe suivante : deux noms de couleurs séparés soit par :

  • | ,
  • / ,
  • \ , ou
  • -

selon la direction du dégradé.

Voir la section précédente, et Dégradé de couleurs sur la page Diagramme de classes.

You can also use color gradient in background, with the following syntax: two colors names separated either by:

  • |,
  • /,
  • \, or
  • -

depending the direction of the gradient.

See the previous section, and Color gradient on Class diagram page.

Couleur de police automatique

Automatic font color

La valeur spéciale automatic peut être utilisée pour la couleur de la police (premier plan du texte). Dans ce cas, la couleur est soit noire, soit blanche, en fonction de l'arrière-plan actuel

@startuml
skinparam classFontColor automatic
skinparam classHeaderBackgroundColor #444

class classA {
testMethodCode()        
}

class classB #fff {
testMethodCode()       
}
@enduml

The special value automatic can be used for font (text foreground) color. In that case, the color is either black or white, depending on the current background.

@startuml
skinparam classFontColor automatic
skinparam classHeaderBackgroundColor #444

class classA {
testMethodCode()        
}

class classB #fff {
testMethodCode()       
}
@enduml

Préprocesseur et gestion des couleurs

Color with preprocessing

Vous pouvez manipuler la couleur avec le préprocesseur et les fonctions intégrées

Nom Description Exemple Retour
%darken Retourne une couleur foncée d'une couleur donnée avec un certain ratio %darken("red", 20) #CC0000
%is_dark Vérifie si une couleur est foncée %is_dark("#000000") true
%is_light Vérifie si une couleur est claire %is_light("#000000") false
%lighten Renvoie une couleur claire d'une couleur donnée avec un certain ratio %lighten("red", 20) #CC3333
%reverse_color Inverse une couleur en utilisant RGB %reverse_color("#FF7700") #0088FF
%reverse_hsluv_color Inverser une couleur en utilisant 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

View colors in PlantUML

View colors in PlantUML

Un utilisateur a récemment créé une image pour afficher toutes les couleurs connues par PlantUML. (Un grand merci à lui!)

En conséquence, une nouvelle fonctionnalité a été rajoutée pour afficher toutes les couleurs avec le diagramme suivant:

@startuml
colors
@enduml

Il est aussi possible d'afficher une palette de couleurs proches d'une certaine couleur (en donnant son nom ou sa valeur hexadécimale).

@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:

@startuml
colors
@enduml

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

Couleurs d'Archimate

Archimate colors

Archimate utilise des noms de couleurs qui reflètent l'objectif d'un nœud :
  • Application
  • Entreprise
  • Mise en œuvre
  • Motivation
  • Physique
  • Stratégie
  • Technologie

@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

Couleurs de 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


Please report any bugs to plantuml@gmail.com or here.
This website is still in beta testing.