|
|
|
|
Diagramme de composants
|
Component Diagram
|
|
Diagramme de composants: Un diagramme de composants est un type de diagramme structurel utilisé dans UML (Unified Modeling Language) pour visualiser l'organisation et les relations des composants d'un système. Ces diagrammes aident à décomposer des systèmes complexes en composants gérables, en montrant leurs interdépendances, et en assurant une conception et une architecture efficaces du système.
Avantages de PlantUML:
- Simplicité: Avec PlantUML, vous pouvez créer des diagrammes de composants en utilisant des descriptions textuelles simples et intuitives, éliminant le besoin d'outils de dessin complexes.
- Intégration: PlantUML s'intègre de manière transparente à divers outils et plateformes, ce qui en fait un choix polyvalent pour les développeurs et les architectes.
- Collaboration: Le forum PlantUML offre une plateforme aux utilisateurs pour discuter, partager et demander de l'aide sur leurs diagrammes, favorisant ainsi une communauté de collaboration.
|
Component Diagram: A component diagram is a type of structural diagram used in UML (Unified Modeling Language) to visualize the organization and relationships of system components. These diagrams help in breaking down complex systems into manageable components, showcasing their interdependencies, and ensuring efficient system design and architecture.
Advantages of PlantUML:
- Simplicity: With PlantUML, you can create component diagrams using simple and intuitive text-based descriptions, eliminating the need for complex drawing tools.
- Integration: PlantUML seamlessly integrates with various tools and platforms, making it a versatile choice for developers and architects.
- Collaboration: The PlantUML forum offers a platform for users to discuss, share, and seek assistance on their diagrams, fostering a collaborative community.
|
Composants
|
Components
|
|
Les composants doivent être mis entre parenthèses.
Vous pouvez également utiliser le mot-clé component pour définir un composant
.
Et vous pouvez définir un alias, en utilisant le mot-clé as
.
Cet alias sera utilisé plus tard, lors de la définition des relations
@startuml
[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4
@enduml
WARNING This translation need to be updated. WARNING
|
Components must be bracketed.
You can also use the component keyword to define a component. In this case the brackets can be omitted, but only if the component name does not include white-space or special characters.
You can define an alias, using the as keyword.
This alias will be used later, when defining relations.
@startuml
[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4
@enduml
Naming exceptions
Note that component names starting with $ cannot be hidden or removed later, because hide and remove command will consider the name a $tag instead of a component name. To later remove such component they must have an alias or must be tagged.
@startuml
component [$C1]
component [$C2] $C2
component [$C2] as dollarC2
remove $C1
remove $C2
remove dollarC2
@enduml
|
Interfaces
|
Interfaces
|
|
Les interfaces sont définies à l'aide du symbole () (parce que cela ressemble à un cercle).
Vous pouvez aussi utiliser le mot-clé interface pour définir une interface.
Vous pouvez aussi définir un alias, à l'aide du mot-clé as .
Cet alias pourrait être utilisé plus tard, lors de la définition des relations.
Nous verrons plus tard qu'il n'est pas obligatoire de définir les interfaces.
@startuml
() "First Interface"
() "Another interface" as Interf2
interface Interf3
interface "Last\ninterface" as Interf4
[component]
footer //Adding "component" to force diagram to be a **component diagram**//
@enduml
|
Interface can be defined using the () symbol (because this looks like a circle).
You can also use the interface keyword to define an interface.
And you can define an alias, using the as keyword.
This alias will be used latter, when defining relations.
We will see latter that interface definition is optional.
@startuml
() "First Interface"
() "Another interface" as Interf2
interface Interf3
interface "Last\ninterface" as Interf4
[component]
footer //Adding "component" to force diagram to be a **component diagram**//
@enduml
|
Exemple de base
|
Basic example
|
|
Les liens entre les éléments sont établis à l'aide de combinaisons de symboles de lignes pointillées
( .. ), de lignes droites ( -- ) et de flèches ( --> )
@startuml
DataAccess - [First Component]
[First Component] ..> HTTP : use
@enduml
|
Links between elements are made using combinations of dotted line
( .. ), straight line ( -- ), and arrows ( --> )
symbols.
@startuml
DataAccess - [First Component]
[First Component] ..> HTTP : use
@enduml
|
Utilisation des notes
|
Using notes
|
|
Vous pouvez utiliser les mots-clés
note left of , note right of ,
note top of , note bottom of
pour définir des notes relatives à un seul objet.
Une note peut également être définie seule avec les mots-clés note
, puis liée à d'autres objets à l'aide du symbole ..
@startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
note left of HTTP : Web Service only
note right of [First Component]
A note can also
be on several lines
end note
@enduml
WARNING This translation need to be updated. WARNING
|
You can use the
note left of , note right of ,
note top of , note bottom of
keywords to define notes related to a single object.
@startuml
[Component] as C
note top of C: A top note
note bottom of C
A bottom note can also
be on several lines
end note
note left of C
A left note can also
be on several lines
end note
note right of C: A right note
@enduml
A note can be also defined alone with the note
keywords, then linked to other objects using the .. symbol or whatever arrow symbol ( - , -- , ...).
@startuml
[Component] as C
note as N
A floating note can also
be on several lines
end note
C .. N
@enduml
Another note example:
@startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
note left of HTTP : Web Service only
note right of [First Component]
A note can also
be on several lines
end note
@enduml
|
Regroupement de composants
|
Grouping Components
|
|
Vous pouvez utiliser plusieurs mots-clés pour regrouper des composants et des interfaces
package
node
folder
frame
cloud
database
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml
|
You can use several keywords to group components and interfaces together:
package
node
folder
frame
cloud
database
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml
|
Changement de direction des flèches
|
Changing arrows direction
|
|
Par défaut, les liens entre les classes ont deux tirets -- et sont orientés verticalement.
Il est possible d'utiliser un lien horizontal en mettant un seul tiret (ou point) comme ceci
@startuml
[Component] --> Interface1
[Component] -> Interface2
@enduml
Vous pouvez également changer de direction en inversant le lien :
@startuml
Interface1 <-- [Component]
Interface2 <- [Component]
@enduml
Il est également possible de changer la direction de la flèche en ajoutant les mots-clés left , right , up
ou down à l'intérieur de la flèche
@startuml
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
Vous pouvez raccourcir la flèche en utilisant uniquement le premier caractère de la direction (par exemple, -d- au lieu de
-down- )
ou les deux premiers caractères ( -do- ).
Veuillez noter que vous ne devez pas abuser de cette fonctionnalité : Graphviz donne généralement de bons résultats sans modification.
Et avec le paramètre left to right direction paramètre
@startuml
left to right direction
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
_See also 'Change diagram orientation' on [Deployment diagram](deployment-diagram) page._
|
By default, links between classes have two dashes -- and are vertically oriented.
It is possible to use horizontal link by putting a single dash (or dot) like this:
@startuml
[Component] --> Interface1
[Component] -> Interface2
@enduml
You can also change directions by reversing the link:
@startuml
Interface1 <-- [Component]
Interface2 <- [Component]
@enduml
It is also possible to change arrow direction by adding left , right , up
or down keywords inside the arrow:
@startuml
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
You can shorten the arrow by using only the first character of the direction (for example, -d- instead of
-down- )
or the two first characters ( -do- ).
Please note that you should not abuse this functionality : Graphviz gives usually good results without tweaking.
And with the left to right direction parameter:
@startuml
left to right direction
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
See also 'Change diagram orientation' on Deployment diagram page.
|
Utiliser la notation UML2
|
Use UML2 notation
|
|
Par défaut (à partir de la version v1.2020.13-14), la notation UML2 est utilisée.
@startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
By default (from v1.2020.13-14), UML2 notation is used.
@startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
Utiliser la notation UML1
|
Use UML1 notation
|
|
La commande skinparam componentStyle uml1 est utilisée pour passer à la notation UML1
@startuml
skinparam componentStyle uml1
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
The skinparam componentStyle uml1 command is used to switch to UML1 notation.
@startuml
skinparam componentStyle uml1
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
Utiliser le style rectangle (supprime toute notation UML)
|
Use rectangle notation (remove UML notation)
|
|
La commande skinparam componentStyle rectangle est utilisée pour changer vers le style rectangle (sans aucune notation UML).
@startuml
skinparam componentStyle rectangle
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
The skinparam componentStyle rectangle command is used to switch to rectangle notation (without any UML notation).
@startuml
skinparam componentStyle rectangle
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
Description longue
|
Long description
|
|
Il est possible de mettre un long texte sur plusieurs lignes en utilisant des crochets.
@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml
|
It is possible to put description on several lines using square brackets.
@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml
|
Couleurs individuelles
|
Individual colors
|
|
Vous pouvez spécifier une couleur après la définition du composant
@startuml
component [Web Server] #Yellow
@enduml
|
You can specify a color after component definition.
@startuml
component [Web Server] #Yellow
@enduml
|
Sprites et stéréotypes
|
Using Sprite in Stereotype
|
|
Vous pouvez utiliser des sprites dans les stéréotypes des composants.
@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}
rectangle " End to End\nbusiness process" <<$businessProcess>> {
rectangle "inner process 1" <<$businessProcess>> as src
rectangle "inner process 2" <<$businessProcess>> as tgt
src -> tgt
}
@enduml
|
You can use sprites within stereotype components.
@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}
rectangle " End to End\nbusiness process" <<$businessProcess>> {
rectangle "inner process 1" <<$businessProcess>> as src
rectangle "inner process 2" <<$businessProcess>> as tgt
src -> tgt
}
@enduml
|
Skinparam
|
Skinparam
|
|
Vous pouvez utiliser la commande skinparam
pour modifier les couleurs et les polices du dessin.
Vous pouvez utiliser cette commande :
Vous pouvez définir des couleurs et des polices spécifiques pour les composants et les interfaces stéréotypés
@startuml
skinparam interface {
backgroundColor RosyBrown
borderColor orange
}
skinparam component {
FontSize 13
BackgroundColor<<Apache>> Pink
BorderColor<<Apache>> #FF6655
FontName Courier
BorderColor black
BackgroundColor gold
ArrowFontName Impact
ArrowColor #FF6655
ArrowFontColor #777777
}
() "Data Access" as DA
Component "Web Server" as WS << Apache >>
DA - [First Component]
[First Component] ..> () HTTP : use
HTTP - WS
@enduml
@startuml
skinparam component {
backgroundColor<<static_lib>> DarkKhaki
backgroundColor<<shared_lib>> Green
}
skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared_node>> Magenta
}
skinparam databaseBackgroundColor Aqua
[AA] <<static_lib>>
[BB] <<shared_lib>>
[CC] <<static_lib>>
node node1
node node2 <<shared node>>
database Production
@enduml
WARNING This translation need to be updated. WARNING
|
You can use the skinparam
command to change colors and fonts for the drawing.
You can use this command :
You can define specific color and fonts for stereotyped components and interfaces.
@startuml
skinparam interface {
backgroundColor RosyBrown
borderColor orange
}
skinparam component {
FontSize 13
BackgroundColor<<Apache>> Pink
BorderColor<<Apache>> #FF6655
FontName Courier
BorderColor black
BackgroundColor gold
ArrowFontName Impact
ArrowColor #FF6655
ArrowFontColor #777777
}
() "Data Access" as DA
Component "Web Server" as WS << Apache >>
DA - [First Component]
[First Component] ..> () HTTP : use
HTTP - WS
@enduml
@startuml
skinparam component {
backgroundColor<<static lib>> DarkKhaki
backgroundColor<<shared lib>> Green
}
skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared_node>> Magenta
}
skinparam databaseBackgroundColor Aqua
[AA] <<static lib>>
[BB] <<shared lib>>
[CC] <<static lib>>
node node1
node node2 <<shared_node>>
database Production
@enduml
|
Paramètre de style spécifique
|
Specific SkinParameter
|
|
componentStyle
- Par défaut (ou avec
skinparam componentStyle uml2 ), vous avez une icône pour le composant
@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
component "A.1" {
}
component A.44 {
[A4.1]
}
component "A.2"
[A.3]
component A.5 [
A.5]
component A.6 [
]
}
[a]->[b]
@enduml
- Si vous voulez la supprimer, et n'avoir que le rectangle, vous pouvez utiliser
skinparam componentStyle rectangle
@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
component "A.1" {
}
component A.44 {
[A4.1]
}
component "A.2"
[A.3]
component A.5 [
A.5]
component A.6 [
]
}
[a]->[b]
@enduml
Ref. 10798]
|
componentStyle
- By default (or with
skinparam componentStyle uml2 ), you have an icon for component
@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
component "A.1" {
}
component A.44 {
[A4.1]
}
component "A.2"
[A.3]
component A.5 [
A.5]
component A.6 [
]
}
[a]->[b]
@enduml
- If you want to suppress it, and to have only the rectangle, you can use
skinparam componentStyle rectangle
@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
component "A.1" {
}
component A.44 {
[A4.1]
}
component "A.2"
[A.3]
component A.5 [
A.5]
component A.6 [
]
}
[a]->[b]
@enduml
[Ref. 10798]
|
Masquer ou supprimer un composant non lié
|
Hide or Remove unlinked component
|
|
Par défaut, tous les composants sont affichés
@startuml
component C1
component C2
component C3
C1 -- C2
@enduml
Mais vous pouvez :
hide @unlinked cacher des composants
@startuml
component C1
component C2
component C3
C1 -- C2
hide @unlinked
@enduml
- ou
remove @unlinked supprimer des composants
@startuml
component C1
component C2
component C3
C1 -- C2
remove @unlinked
@enduml
[Réf. QA-11052]
|
By default, all components are displayed:
@startuml
component C1
component C2
component C3
C1 -- C2
@enduml
But you can:
hide @unlinked components:
@startuml
component C1
component C2
component C3
C1 -- C2
hide @unlinked
@enduml
- or
remove @unlinked components:
@startuml
component C1
component C2
component C3
C1 -- C2
remove @unlinked
@enduml
[Ref. QA-11052]
|
Masquer, supprimer ou restaurer un composant balisé ou un joker
|
Hide, Remove or Restore tagged component or wildcard
|
|
Vous pouvez placer $tags (en utilisant $ ) sur des composants, puis supprimer, masquer ou restaurer des composants individuellement ou par balises.
Par défaut, tous les composants sont affichés
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml
Mais vous pouvez :
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
hide $tag13
@enduml
- ou
remove $tag13 composants
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
remove $tag13
@enduml
- ou
remove $tag13 and restore $tag1 composants
@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove $tag13
restore $tag1
@enduml
- ou
remove * and restore $tag1 composants
@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove *
restore $tag1
@enduml
[Réf. QA-7337 et QA-11052]
|
You can put $tags (using $ ) on components, then remove, hide or restore components either individually or by tags.
By default, all components are displayed:
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml
But you can:
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
hide $tag13
@enduml
- or
remove $tag13 components:
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
remove $tag13
@enduml
- or
remove $tag13 and restore $tag1 components:
@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove $tag13
restore $tag1
@enduml
- or
remove * and restore $tag1 components:
@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove *
restore $tag1
@enduml
[Ref. QA-7337 and QA-11052]
|
|
Display JSON Data on Component diagram
|
|
|
Simple example
@startuml
allowmixing
component Component
() Interface
json JSON {
"fruit":"Apple",
"size":"Large",
"color": ["Red", "Green"]
}
@enduml
[Ref. QA-15481]
For another example, see on JSON page.
|
|
Port [port, portIn, portOut]
|
|
|
You can add port with port , portin and portout keywords.
Port
@startuml
[c]
component C {
port p1
port p2
port p3
component c1
}
c --> p1
c --> p2
c --> p3
p1 --> c1
p2 --> c1
@enduml
PortIn
@startuml
[c]
component C {
portin p1
portin p2
portin p3
component c1
}
c --> p1
c --> p2
c --> p3
p1 --> c1
p2 --> c1
@enduml
PortOut
@startuml
component C {
portout p1
portout p2
portout p3
component c1
}
[o]
p1 --> o
p2 --> o
p3 --> o
c1 --> p1
@enduml
Mixing PortIn & PortOut
@startuml
[i]
component C {
portin p1
portin p2
portin p3
portout po1
portout po2
portout po3
component c1
}
[o]
i --> p1
i --> p2
i --> p3
p1 --> c1
p2 --> c1
po1 --> o
po2 --> o
po3 --> o
c1 --> po1
@enduml
|
|
|