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.
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
🎉 Copied! 
 | @startuml
[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4
@enduml
|
WARNING
This translation need to be updated. WARNING
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.
🎉 Copied!
| @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
|
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 (
-->)
🎉 Copied!
| @startuml
DataAccess - [First Component]
[First Component] ..> HTTP : use
@enduml
|
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
.. 🎉 Copied!
| @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
Vous pouvez utiliser plusieurs mots-clés pour regrouper des composants et des interfaces
packagenodefolderframeclouddatabase
🎉 Copied!
| @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
|
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
🎉 Copied!
| @startuml
[Component] --> Interface1
[Component] -> Interface2
@enduml
|
Vous pouvez également changer de direction en inversant le lien :
🎉 Copied!
| @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
🎉 Copied!
| @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
🎉 Copied!
| @startuml
left to right direction
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
|
Par défaut
(à partir de la version v1.2020.13-14), la notation UML2 est utilisée.
🎉 Copied!
| @startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
La commande
skinparam componentStyle uml1 est utilisée pour passer à la notation UML1
🎉 Copied!
| @startuml
skinparam componentStyle uml1
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
La commande
skinparam componentStyle rectangle est utilisée pour changer vers le style rectangle
(sans aucune notation UML).
🎉 Copied!
| @startuml
skinparam componentStyle rectangle
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
Il est possible de mettre un long texte sur plusieurs lignes en utilisant des crochets.
🎉 Copied!
| @startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml
|
Vous pouvez spécifier une couleur après la définition du composant
🎉 Copied!
| @startuml
component [Web Server] #Yellow
@enduml
|
Vous pouvez utiliser des sprites dans les stéréotypes des composants.
🎉 Copied!
| @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
|
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
🎉 Copied!
| @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
|
🎉 Copied!
| @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
componentStyle
- Par défaut (ou avec
skinparam componentStyle uml2), vous avez une icône pour le composant
🎉 Copied!
| @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
🎉 Copied!
| @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] Par défaut, tous les composants sont affichés
🎉 Copied!
| @startuml
component C1
component C2
component C3
C1 -- C2
@enduml
|
Mais vous pouvez :
hide @unlinked cacher des composants
🎉 Copied!
| @startuml
component C1
component C2
component C3
C1 -- C2
hide @unlinked
@enduml
|
- ou
remove @unlinked supprimer des composants
🎉 Copied!
| @startuml
component C1
component C2
component C3
C1 -- C2
remove @unlinked
@enduml
|
[Réf. QA-11052]
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
🎉 Copied!
| @startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml
|
Mais vous pouvez :
🎉 Copied!
| @startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
hide $tag13
@enduml
|
- ou
remove $tag13 composants
🎉 Copied!
| @startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
remove $tag13
@enduml
|
- ou
remove $tag13 and restore $tag1 composants
🎉 Copied!
| @startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove $tag13
restore $tag1
@enduml
|
- ou
remove * and restore $tag1 composants
🎉 Copied!
| @startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove *
restore $tag1
@enduml
|
[Réf. QA-7337 et QA-11052]
Simple example
🎉 Copied!
| @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.
You can add
port with
port,
portinand
portout keywords.
Port
🎉 Copied!
| @startuml
[c]
component C {
port p1
port p2
port p3
component c1
}
c --> p1
c --> p2
c --> p3
p1 --> c1
p2 --> c1
@enduml
|
PortIn
🎉 Copied!
| @startuml
[c]
component C {
portin p1
portin p2
portin p3
component c1
}
c --> p1
c --> p2
c --> p3
p1 --> c1
p2 --> c1
@enduml
|
PortOut
🎉 Copied!
| @startuml
component C {
portout p1
portout p2
portout p3
component c1
}
[o]
p1 --> o
p2 --> o
p3 --> o
c1 --> p1
@enduml
|
Mixing PortIn & PortOut
🎉 Copied!
| @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
|
Composants
Accueil
Nouveautés !
Démarrage rapide
Online Server
Utilisation
Questions/Réponses
Téléchargement
Forum
Theme
Préprocesseur
Librairie Standard
Hitchhiker's Guide
Documentation PDF
Edit in Dokuwiki
Edit in Asciidoc
Edit in Markdown
