{"id":1922,"date":"2026-08-03T07:51:11","date_gmt":"2026-08-03T07:51:11","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2\/"},"modified":"2026-08-03T07:51:11","modified_gmt":"2026-08-03T07:51:11","slug":"what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/fr\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2\/","title":{"rendered":"Quels types de diagrammes pouvez-vous cr\u00e9er avec PlantUML ? (Guide complet)"},"content":{"rendered":"

\"Hero<\/p>\n

\n
Dans le g\u00e9nie logiciel moderne et l’architecture des syst\u00e8mes, les outils traditionnels de cr\u00e9ation de diagrammes par glisser-d\u00e9poser sont souvent insuffisants. Ils peuvent \u00eatre lents \u00e0 mettre \u00e0 jour, difficiles \u00e0 maintenir dans des syst\u00e8mes de gestion de versions comme Git, et sujets \u00e0 des styles incoh\u00e9rents. C’est l\u00e0 que Diagramme en tant que code (DaC)<\/strong> intervient, et PlantUML<\/strong> se distingue comme l’un des langages de cr\u00e9ation de diagrammes bas\u00e9s sur le texte les plus polyvalents et largement adopt\u00e9s dans l’\u00e9cosyst\u00e8me des d\u00e9veloppeurs. En d\u00e9finissant les visuels \u00e0 l’aide de texte brut, les d\u00e9veloppeurs peuvent conserver la documentation architecturale directement aux c\u00f4t\u00e9s de leur code source. Mais quels types de diagrammes pouvez-vous r\u00e9ellement cr\u00e9er avec celui-ci ? Que vous ayez besoin de cartes structurelles standard du langage de mod\u00e9lisation unifi\u00e9e (UML), de vues d’architecture d’entreprise de haut niveau ou de chronologies de gestion de projet, PlantUML couvre pratiquement tous les besoins de communication technique. Dans ce guide, nous explorerons l’ensemble complet des types de diagrammes pris en charge par PlantUML et d\u00e9montrerons comment utiliser un \u00e9diteur intuitif \u00c9diteur PlantUML<\/strong> tel que VPasCode<\/a> am\u00e9liore votre exp\u00e9rience de rendu et d’\u00e9dition.<\/section>\n
\n

2. Diagrammes standard du langage de mod\u00e9lisation unifi\u00e9e (UML)<\/h2>\n

Au c\u0153ur de son fonctionnement, PlantUML a \u00e9t\u00e9 con\u00e7u pour simplifier la cr\u00e9ation de diagrammes UML officiels. Il se divise en deux grandes cat\u00e9gories : les diagrammes structurels et les diagrammes comportementaux.<\/p>\n

Diagrammes structurels<\/h3>\n

Diagrammes de classes et d’objets<\/h4>\n

Mod\u00e9lisez les structures orient\u00e9es objet, les hi\u00e9rarchies de classes, les interfaces, les attributs et les relations (h\u00e9ritage, agr\u00e9gation, composition) directement \u00e0 partir des d\u00e9finitions de code.<\/p>\n

\"Main<\/p>\n

\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u00c9ditez Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Plantuml<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Plantuml in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
@startuml\r\n  \r\ntitre Syst\u00e8me de gestion d'h\u00f4tel\r\n\r\n' D\u00e9finir les interfaces\r\ninterface IReservable {\r\n    + faireReservation(client: Client, dates: PlageDate): boolean\r\n    + annulerReservation(idReservation: String): boolean\r\n    + v\u00e9rifierDisponibilit\u00e9(date: Date): boolean\r\n}\r\n\r\ninterface IPayable {\r\n    + traiterPaiement(montant: double): boolean\r\n    + \u00e9mettreRemboursement(idReservation: String): boolean\r\n    + obtenirStatutPaiement(): String\r\n}\r\n\r\n' D\u00e9finir une classe abstraite\r\nclasse abstraite Personne {\r\n    - id: String\r\n    - nom: String\r\n    - email: String\r\n    - t\u00e9l\u00e9phone: String\r\n    + getId(): String\r\n    + getNom(): String\r\n    + obtenirCoordonn\u00e9es(): String\r\n    + mettre\u00c0JourCoordonn\u00e9es(infos: String): void\r\n}\r\n\r\n' D\u00e9finir des classes concr\u00e8tes\r\nclass Client {\r\n    - pointsFid\u00e9lit\u00e9: int\r\n    - nombreS\u00e9joursTot: int\r\n    - pr\u00e9f\u00e9rences: Liste\r\n    + gagnerPointsFid\u00e9lit\u00e9(co\u00fbtS\u00e9jour: double): void\r\n    + \u00e9changerPointsFid\u00e9lit\u00e9(points: int): boolean\r\n    + obtenirNiveauFid\u00e9lit\u00e9(): String\r\n    + ajouterPr\u00e9f\u00e9rence(pr\u00e9f\u00e9rence: String): void\r\n}\r\n\r\nclass Chambre {\r\n    - num\u00e9roChambre: String\r\n    - typeChambre: TypeChambre\r\n    - capacit\u00e9: int\r\n    - prixParNuit: double\r\n    - \u00e9quipements: Liste\r\n    - estDisponible: boolean\r\n    + r\u00e9serverChambre(client: Client, dates: PlageDate): boolean\r\n    + lib\u00e9rerChambre(): void\r\n    + obtenirPrix(client: Client): double\r\n    + ajouter\u00c9quipement(\u00e9quipement: String): void\r\n    + obtenirStatutChambre(): String\r\n}\r\n\r\nclass R\u00e9servation {\r\n    - idR\u00e9servation: String\r\n    - dateArriv\u00e9e: Date\r\n    - dateD\u00e9part: Date\r\n    - prixTotal: double\r\n    - statut: StatutR\u00e9servation\r\n    - demandesSp\u00e9ciales: String\r\n    + calculerPrixTotal(): double\r\n    + confirmerR\u00e9servation(): void\r\n    + enregistrerArriv\u00e9e(): void\r\n    + enregistrerD\u00e9part(): boolean\r\n    + mettre\u00c0JourDates(nouvelleArriv\u00e9e: Date, nouveauD\u00e9part: Date): boolean\r\n    + obtenirDur\u00e9e(): int\r\n}\r\n\r\n' \u00c9num\u00e9ration\r\n\u00e9num TypeChambre {\r\n    STANDARD\r\n    LUXE\r\n    SUITE\r\n    PR\u00c9SIDENTIELLE\r\n}\r\n\r\n' \u00c9num\u00e9ration\r\n\u00e9num StatutR\u00e9servation {\r\n    EN_ATTENTE\r\n    CONFIRM\u00c9E\r\n    ARRIV\u00c9E\r\n    D\u00c9PART\r\n    ANNUL\u00c9E\r\n}\r\n\r\n' Relations\r\n' Impl\u00e9mentation d'interface (ligne pointill\u00e9e avec triangle)\r\nIReservable <|.. R\u00e9servation : impl\u00e9mente\r\nIPayable <|.. R\u00e9servation : impl\u00e9mente\r\n\r\n' H\u00e9ritage abstrait (ligne pleine avec triangle)\r\nPersonne <|-- Client : \u00e9tend\r\n\r\n' Composition (losange plein) - Chambre fait partie de R\u00e9servation\r\nR\u00e9servation *-- \"1..*\" Chambre : contient >\r\n\r\n' Association (ligne pleine simple) avec multiplicit\u00e9\r\nClient \"1\" -- \"0..*\" R\u00e9servation : effectue >\r\n\r\n' D\u00e9pendance (fl\u00e8che pointill\u00e9e) - Client d\u00e9pend de TypeChambre\r\nClient ..> TypeChambre : a un niveau de fid\u00e9lit\u00e9 bas\u00e9 sur >\r\n\r\n' Association avec libell\u00e9 personnalis\u00e9\r\nR\u00e9servation \"1\" --o \"1\" Client : r\u00e9serv\u00e9e par >\r\n\r\n' R\u00e9alisation d'interface par classe abstraite (connecteur optionnel suppl\u00e9mentaire)\r\nIReservable <|.. Chambre : impl\u00e9mente\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u00c9ditez Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Diagrammes de composants et de d\u00e9ploiement<\/h4>\n
Cartographiez les composants logiciels, les n\u0153uds physiques, les artefacts et les environnements de d\u00e9ploiement pour visualiser la distribution logicielle sur des infrastructures mat\u00e9rielles ou cloud.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u00c9ditez Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Diagramme de composants d'application web\r\n\r\npackage \"Couche client\" {\r\n    [Navigateur web] as Navigateur\r\n    [Application mobile] as Mobile\r\n}\r\n\r\npackage \"Serveur d'application\" {\r\n    [Passerelle API] as Passerelle\r\n    [Service Utilisateur] as ServiceUtilisateur\r\n    [Service Commande] as ServiceCommande\r\n    [Service Paiement] as ServicePaiement\r\n}\r\n\r\npackage \"Couche base de donn\u00e9es\" {\r\n    base \"Base de donn\u00e9es Utilisateurs\" as BaseUtilisateurs\r\n    base \"Base de donn\u00e9es Commandes\" as BaseCommandes\r\n}\r\n\r\npackage \"Services tiers\" {\r\n    [API Stripe] as Stripe\r\n}\r\n\r\n' Connexions\r\nNavigateur --> Passerelle : HTTP \/ REST\r\nMobile --> Passerelle : HTTP \/ REST\r\n\r\nPasserelle --> ServiceUtilisateur : REST interne\r\nPasserelle --> ServiceCommande : REST interne\r\n\r\nServiceUtilisateur --> BaseUtilisateurs : Lecture \/ \u00c9criture\r\nServiceCommande --> BaseCommandes : Lecture \/ \u00c9criture\r\nServiceCommande --> ServicePaiement : Traiter le paiement\r\n\r\nServicePaiement --> Stripe : HTTPS \/ API\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u00c9ditez Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Component<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u00c9ditez Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Diagramme de d\u00e9ploiement - Application web en trois niveaux\r\n\r\nskinparam styleComposant rectangle\r\n\r\nn\u0153ud \"Bureau client\" as n\u0153udClient {\r\n  n\u0153ud \"Navigateur web\" as navigateur {\r\n    artefact \"Frontend de l'application web (HTML\/JS)\" as frontend\r\n  }\r\n}\r\n\r\nn\u0153ud \"Serveur d'application\" as n\u0153udServeurApp {\r\n  n\u0153ud \"Conteneur de servlets (Tomcat)\" as tomcat {\r\n    artefact \"API backend (fichier WAR)\" as apiApp\r\n  }\r\n}\r\n\r\nn\u0153ud \"Serveur de base de donn\u00e9es\" as n\u0153udBaseDonn\u00e9es {\r\n  base \"PostgreSQL\" as postgres {\r\n    artefact \"Sch\u00e9ma de base de donn\u00e9es de l'application\" as sch\u00e9maBase\r\n  }\r\n}\r\n\r\nn\u0153udClient -- n\u0153udServeurApp : HTTPS (Port 443)\r\nn\u0153udServeurApp -- n\u0153udBaseDonn\u00e9es : JDBC (Port 5432)\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u00c9ditez Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Deployment<\/p>\n
Diagrammes comportementaux et d’interaction<\/h3>\n
Diagrammes de s\u00e9quence<\/h4>\n
Le type de diagramme PlantUML le plus populaire. Suivez les interactions \u00e9tape par \u00e9tape, les appels d’API synchrones\/asynchrones et les flux de messages entre les acteurs et les syst\u00e8mes au fil du temps.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Flux d'authentification de l'utilisateur\r\n\r\nacteur \"Utilisateur\" comme utilisateur\r\nparticipant \"Application Web\" comme app\r\nparticipant \"API d'authentification\" comme auth\r\ndatabase \"Base de donn\u00e9es des utilisateurs\" comme db\r\n\r\nutilisateur -> app : Saisir les identifiants\r\nactiver app\r\n\r\napp -> auth : POST \/api\/v1\/login\r\nactiver auth\r\n\r\nauth -> db : Rechercher l'utilisateur par courriel\r\nactiver db\r\ndb --> auth : Retourner l'enregistrement utilisateur & hachage\r\nd\u00e9sactiver db\r\n\r\nalt Identifiants valides\r\n    auth -> auth : V\u00e9rifier le mot de passe et g\u00e9n\u00e9rer un JWT\r\n    auth --> app : 200 OK (Jeton & Profil)\r\n    app --> utilisateur : Rediriger vers le tableau de bord\r\nsinon Identifiants invalides\r\n    auth --> app : 401 Non autoris\u00e9 (Erreur)\r\n    app --> utilisateur : Afficher \u00ab Identifiants invalides \u00bb\r\nfin\r\n\r\nd\u00e9sactiver auth\r\nd\u00e9sactiver app\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Sequence<\/p>\n
Diagrammes de cas d’utilisation<\/h4>\n
D\u00e9finissez les limites du syst\u00e8me, les acteurs, les objectifs des utilisateurs et la port\u00e9e fonctionnelle.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Diagramme des cas d'utilisation du syst\u00e8me de vente en ligne\r\n\r\ndirection de gauche \u00e0 droite\r\n\r\nacteur Client\r\nacteur \"Client enregistr\u00e9\" comme ClientEnregistr\u00e9\r\nacteur \"Passerelle de paiement\" comme Syst\u00e8mePaiement\r\n\r\nClient <|-- ClientEnregistr\u00e9 rectangle \"Syst\u00e8me de commerce \u00e9lectronique\" { usecase \"Parcourir les produits\" comme UC_Parcourir usecase \"Rechercher des articles\" comme UC_Rechercher usecase \"G\u00e9rer le panier\" comme UC_Panier usecase \"Passer \u00e0 la caisse\" comme UC_Caisse usecase \"Appliquer un bon de r\u00e9duction\" comme UC_Bon usecase \"Traiter le paiement\" comme UC_Paiement usecase \"Voir l'historique des commandes\" comme UC_Historique } Client --> UC_Parcourir\r\nClient --> UC_Rechercher\r\nClient --> UC_Panier\r\nClient --> UC_Caisse\r\n\r\nClientEnregistr\u00e9 --> UC_Historique\r\n\r\nUC_Caisse .> UC_Paiement : <>\r\nUC_Caisse <.. UC_Bon : <>\r\n\r\nUC_Paiement -- Syst\u00e8mePaiement\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Use<\/p>\n
Diagrammes d’activit\u00e9 et d’\u00e9tat<\/h4>\n
Diagramme de flux logique m\u00e9tier complexe, flux algorithmiques, transitions de machine \u00e0 \u00e9tats et concurrence.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Processus de traitement de commande\r\n\r\n|Client|\r\ncommencer\r\n:Passer la commande;\r\n:Soumettre les d\u00e9tails de paiement;\r\n\r\n|Syst\u00e8me de commande|\r\nsi (Paiement valide ?) alors (oui)\r\n  :R\u00e9server l'inventaire;\r\n  \r\n  ' S\u00e9paration de concurrence\r\n  fork\r\n    |Entrep\u00f4t|\r\n    :Prendre les articles sur l'\u00e9tag\u00e8re;\r\n    :Emballer les articles dans une bo\u00eete;\r\n  fork \u00e0 nouveau\r\n    |Facturation|\r\n    :G\u00e9n\u00e9rer le PDF de la facture;\r\n    :D\u00e9biter la m\u00e9thode de paiement;\r\n  fin fork\r\n\r\n  |Exp\u00e9dition|\r\n  :Attacher l'\u00e9tiquette d'exp\u00e9dition;\r\n  :Remettre au transporteur;\r\n  \r\n  |Client|\r\n  :R\u00e9ception du colis;\r\n  arr\u00eater\r\nsinon (non)\r\n  |Syst\u00e8me de commande|\r\n  :Envoyer une notification d'\u00e9chec de paiement;\r\n  |Client|\r\n  :Mettre \u00e0 jour la m\u00e9thode de paiement;\r\n  arr\u00eater\r\nfin si\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Activity<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Cycle de vie d'une commande e-commerce\r\n\r\n[*] --> En attente : Commande pass\u00e9e\r\n\r\n\u00e9tat En attente {\r\n  [*] --> En attente de paiement\r\n  En attente de paiement --> Paiement \u00e9chou\u00e9 : Erreur de paiement\r\n  Paiement \u00e9chou\u00e9 --> En attente de paiement : R\u00e9essayer le paiement\r\n}\r\n\r\nEn attente --> En traitement : Paiement autoris\u00e9\r\nEn attente --> Annul\u00e9e : Utilisateur annule la commande\r\n\r\n\u00e9tat En traitement {\r\n  [*] --> Emballage\r\n  Emballage --> Pr\u00eat \u00e0 exp\u00e9dier : Contr\u00f4le qualit\u00e9 r\u00e9ussi\r\n}\r\n\r\nEn traitement --> Exp\u00e9di\u00e9e : Remise au transporteur\r\nExp\u00e9di\u00e9e --> Livr\u00e9e : Livraison confirm\u00e9e\r\nExp\u00e9di\u00e9e --> Retourn\u00e9e : Livraison \u00e9chou\u00e9e \/ Refus\u00e9e\r\n\r\nLivr\u00e9e --> [*]\r\nAnnul\u00e9e --> [*]\r\nRetourn\u00e9e --> [*]\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"State<\/p>\n
Diagrammes de timing<\/h4>\n
D\u00e9tail pr\u00e9cis des transitions d’\u00e9tat et des interactions entre objets sur des intervalles de temps discrets \u2014 id\u00e9al pour les syst\u00e8mes embarqu\u00e9s ou la conception mat\u00e9rielle en temps r\u00e9el.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Diagramme de timing du transfert de donn\u00e9es SPI\r\n\r\nrobuste \"Horloge (SCLK)\" comme CLK\r\nbinaire \"S\u00e9lection de puce (CS)\" comme CS\r\nbinaire \"Sortie ma\u00eetre (MOSI)\" comme MOSI\r\nconcis \"Bus de donn\u00e9es (MISO)\" comme MISO\r\n\r\n@0\r\nCS est haut\r\nCLK est bas\r\nMOSI est bas\r\nMISO est \u00ab Inactif \u00bb\r\n\r\n@1\r\nCS est bas\r\nMISO est \u00ab En-t\u00eate \u00bb\r\n\r\n@2\r\nCLK est haut\r\nMOSI est haut\r\n\r\n@3\r\nCLK est bas\r\n\r\n@4\r\nCLK est haut\r\nMOSI est bas\r\nMISO est \u00ab Charge utile \u00bb\r\n\r\n@5\r\nCLK est bas\r\n\r\n@6\r\nCS est haut\r\nCLK est bas\r\nMOSI est bas\r\nMISO est \u00ab Inactif \u00bb\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Digital<\/p>\n<\/section>\n
\n
3. Architecture de haut niveau et diagrammes sp\u00e9cifiques au domaine<\/h2>\n
Au-del\u00e0 des UML traditionnels, PlantUML excelle \u00e0 repr\u00e9senter les syst\u00e8mes logiciels multicouches et les architectures de donn\u00e9es \u00e0 l’aide de biblioth\u00e8ques d’extensions sp\u00e9cialis\u00e9es.<\/p>\n
Diagrammes du mod\u00e8le C4<\/h4>\n
Exprimer l’architecture logicielle \u00e0 diff\u00e9rents niveaux d’abstraction \u2014 Contexte, Conteneur, Composant et Code \u2014 afin de rendre la conception du syst\u00e8me compr\u00e9hensible pour les parties prenantes techniques et non techniques.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nTITRE Diagramme de contexte du syst\u00e8me pour le syst\u00e8me de banque en ligne\r\n\r\nPersonne(client, \"Client de banque personnelle\", \"Un client de la banque, poss\u00e9dant des comptes bancaires personnels.\")\r\nSyst\u00e8me(systeme_bancaire, \"Syst\u00e8me de banque en ligne\", \"Permet aux clients de consulter les informations relatives \u00e0 leurs comptes bancaires, et d'effectuer des paiements.\")\r\n\r\nSyst\u00e8me_Ext(systeme_mainframe, \"Syst\u00e8me bancaire principal\", \"Stocke toutes les informations essentielles sur les clients, les comptes, les transactions, etc.\")\r\nSyst\u00e8me_Ext(systeme_email, \"Syst\u00e8me de messagerie\", \"Le syst\u00e8me interne de messagerie Microsoft Exchange.\")\r\n\r\nRel(client, systeme_bancaire, \"Consulte les soldes des comptes, et effectue des paiements en utilisant\")\r\nRel(systeme_bancaire, systeme_mainframe, \"R\u00e9cup\u00e8re les informations sur les comptes, et effectue des paiements en utilisant\")\r\nRel(systeme_bancaire, systeme_email, \"Envoie des e-mails en utilisant\")\r\nRel_Arriere(systeme_email, client, \"Envoie des e-mails \u00e0\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"C4<\/p>\n
Diagrammes ArchiMate<\/h4>\n
Prendre en charge la mod\u00e9lisation de l’architecture d’entreprise \u00e0 travers les couches m\u00e9tier, application et technologie afin de relier la strat\u00e9gie organisationnelle aux syst\u00e8mes op\u00e9rationnels.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!include <archimate\/Archimate>\r\n\r\ntitre Exemple ArchiMate - Paiement en ligne de factures\r\n\r\nGroupement(business, \"Couche M\u00e9tier\"){\r\n  Processus_metier(payerFacture, \"Processus de paiement de facture\")\r\n  Objet_metier(compteBancaireClient, \"Compte bancaire du client\")\r\n  Service_metier(servicePaiement, \"Service m\u00e9tier de paiement de factures\")\r\n}\r\n\r\nGroupement(application, \"Couche Application\"){\r\n  Composant_application(applicationMobile, \"Application bancaire mobile\")\r\n  Fonction_application(processusPaiement, \"Logique de traitement du paiement\")\r\n  Objet_donnee_application(enregistrementTransaction, \"Charge utile des donn\u00e9es de transaction\")\r\n}\r\n\r\nGroupement(technologie, \"Couche Technologie\"){\r\n  Art\u00e9fact_technologie(jwtToken, \"Jeton de session chiffr\u00e9\")\r\n  Service_technologie(portailAPI, \"Service de passerelle API\")\r\n  Service_technologie(serviceBaseDonnees, \"Service de base de donn\u00e9es principale\")\r\n}\r\n\r\nRel_Fluide_Droite(payerFacture, compteBancaireClient, \"\")\r\nRel_Servir_Haut(servicePaiement, payerFacture, \"\")\r\nRel_Sp\u00e9cialisation_Haut(processusPaiement, servicePaiement, \"\")\r\nRel_Fluide_Droite(enregistrementTransaction, processusPaiement, \"\")\r\nRel_Assignation_Gauche(applicationMobile, processusPaiement, \"\")\r\nRel_Realisation_Haut(jwtToken, enregistrementTransaction, \"\")\r\nRel_Servir_Haut(portailAPI, processusPaiement, \"\")\r\nRel_Servir_Haut(serviceBaseDonnees, portailAPI, \"\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"ArchiMate<\/p>\n
Diagrammes Entit\u00e9-Relation (ERD)<\/h4>\n
G\u00e9n\u00e9rer des visualisations claires des sch\u00e9mas de base de donn\u00e9es, incluant la notation standard en forme de pied de corbeau et les mod\u00e8les ERD de Chen.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitre Sch\u00e9ma de base de donn\u00e9es E-Commerce (forme de pied de corbeau)\r\n\r\n' Masquer les ic\u00f4nes circulaires pour les entit\u00e9s\r\nmasquer cercle\r\nparam\u00e8tre_peau linetype ortho\r\n\r\nentit\u00e9 \"Utilisateur\" comme utilisateur {\r\n  * user_id : INT <>\r\n  --\r\n  * email : VARCHAR(255)\r\n  * hash_mot_de_passe : VARCHAR(255)\r\n  * date_creation : TIMESTAMP\r\n}\r\n\r\nentit\u00e9 \"ProfilClient\" comme profil {\r\n  * profil_id : INT <>\r\n  --\r\n  * user_id : INT <>\r\n  * pr\u00e9nom : VARCHAR(100)\r\n  * nom : VARCHAR(100)\r\n    t\u00e9l\u00e9phone : VARCHAR(20)\r\n}\r\n\r\nentit\u00e9 \"Commande\" comme commande {\r\n  * commande_id : INT <>\r\n  --\r\n  * user_id : INT <>\r\n  * date_commande : TIMESTAMP\r\n  * montant_total : DECIMAL(10,2)\r\n  * statut : VARCHAR(50)\r\n}\r\n\r\nentit\u00e9 \"ArticleCommande\" comme article {\r\n  * article_commande_id : INT <>\r\n  --\r\n  * commande_id : INT <>\r\n  * produit_id : INT <>\r\n  * quantit\u00e9 : INT\r\n  * prix_unitaire : DECIMAL(10,2)\r\n}\r\n\r\nentit\u00e9 \"Produit\" comme produit {\r\n  * produit_id : INT <>\r\n  --\r\n  * reference : VARCHAR(50)\r\n  * nom : VARCHAR(150)\r\n    description : TEXT\r\n  * prix : DECIMAL(10,2)\r\n}\r\n\r\n' Relations\r\nutilisateur ||--o| profil : \"a\"\r\nutilisateur ||--o{ commande : \"place\"\r\ncommande ||--|{ article : \"contient\"\r\nproduit ||--o{ article : \"appara\u00eet dans\"\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Entity-relationship<\/p>\n
Cartes de r\u00e9seau et d’infrastructure<\/h4>\n
G\u00e9n\u00e9rer facilement des topologies r\u00e9seau, des n\u0153uds serveurs, des connexions cloud et des pare-feu.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startnwdiag\r\ntitre Topologie du r\u00e9seau d'entreprise\r\n\r\nnwdiag {\r\n  r\u00e9seau Internet_Externe {\r\n    adresse = \"0.0.0.0\/0\"\r\n    client_utilisateur [adresse = \"203.0.113.15\", description = \"Utilisateur distant\"];\r\n    pare_feu_fronti\u00e8re [adresse = \"192.168.1.1\", description = \"Pare-feu de p\u00e9rim\u00e8tre\"];\r\n  }\r\n\r\n  r\u00e9seau Zone_DMZ {\r\n    adresse = \"192.168.1.0\/24\"\r\n    pare_feu_fronti\u00e8re;\r\n    \u00e9quilibreur_charge [adresse = \"192.168.1.10\", description = \"\u00c9quilibreur de charge Nginx\"];\r\n    serveur_mail [adresse = \"192.168.1.25\", description = \"Serveur SMTP\"];\r\n    pare_feu_interne [adresse = \"192.168.1.254\", description = \"Pare-feu interne\"];\r\n  }\r\n\r\n  r\u00e9seau LAN_Prive {\r\n    adresse = \"10.0.1.0\/24\"\r\n    pare_feu_interne;\r\n    serveur_application_01 [adresse = \"10.0.1.50\", description = \"N\u0153ud API 1\"];\r\n    serveur_application_02 [adresse = \"10.0.1.51\", description = \"N\u0153ud API 2\"];\r\n    base_donnees_primaire [adresse = \"10.0.1.100\", description = \"PostgreSQL principal\"];\r\n  }\r\n\r\n  r\u00e9seau Sous-r\u00e9seau_Gestion {\r\n    adresse = \"10.0.99.0\/24\"\r\n    pare_feu_interne;\r\n    bastion_admin [adresse = \"10.0.99.5\", description = \"H\u00f4te Bastion SSH\"];\r\n    n\u0153ud_monitoring [adresse = \"10.0.99.20\", description = \"H\u00f4te Prometheus\"];\r\n  }\r\n}\r\n@endnwdiag<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Network<\/p>\n
\u00a0<\/p>\n<\/section>\n
\n
4. Visualisations pour la planification, la gestion et les s\u00e9ances de cerveau-attaque<\/h2>\n
PlantUML n’est pas limit\u00e9 \u00e0 la conception logicielle \u2014 c’est aussi un outil puissant pour la gestion de projet et les s\u00e9ances de cerveau-attaque d’\u00e9quipe.<\/p>\n
Graphiques de Gantt<\/h4>\n
Planifier les calendriers de projet, les d\u00e9pendances des t\u00e2ches, les jalons et l’allocation des ressources \u00e0 l’aide d’une notation en texte clair.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
gantt\r\n    titre Planification du lancement du produit logiciel\r\n    dateFormat  AAAA-MM-JJ\r\n    axisFormat  %b %d\r\n\r\n    section Planification et conception\r\n    Recueil des exigences   :a1, 2026-09-01, 10j\r\n    Conception de l'architecture      :a2, apr\u00e8s a1, 10j\r\n\r\n    section D\u00e9veloppement\r\n    D\u00e9veloppement de l'API backend  :b1, apr\u00e8s a2, 15j\r\n    D\u00e9veloppement de l'interface frontend  :b2, apr\u00e8s a2, 15j\r\n\r\n    section Tests et d\u00e9ploiement\r\n    Tests d'int\u00e9gration      :c1, apr\u00e8s b1 b2, 8j\r\n    Audit de s\u00e9curit\u00e9           :c2, apr\u00e8s c1, 5j\r\n    D\u00e9ploiement en production       :\u00e9tape cl\u00e9, m1, apr\u00e8s c2, 0j<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Mermaid<\/p>\n
Structure des d\u00e9compositions de travail (WBS)<\/h4>\n
D\u00e9composer les projets complexes en livrables hi\u00e9rarchiques et en morceaux de t\u00e2ches g\u00e9rables.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startwbs\r\ntitre Structure de d\u00e9composition du projet de refonte du site web\r\n\r\n* Projet de refonte du site web\r\n** 1. D\u00e9couverte et strat\u00e9gie\r\n*** 1.1 Entrevues avec les parties prenantes\r\n*** 1.2 Analyse des concurrents\r\n*** 1.3 Validation du p\u00e9rim\u00e8tre et de la strat\u00e9gie\r\n** 2. Conception UX\/UI\r\n*** 2.1 Maquettage\r\n**** 2.1.1 Maquettes pour ordinateur\r\n**** 2.1.2 Maquettes pour mobile\r\n*** 2.2 Syst\u00e8me de design\r\n**** 2.2.1 Biblioth\u00e8que de composants\r\n**** 2.2.2 Typographie et guide de style\r\n** 3. D\u00e9veloppement technique\r\n*** 3.1 Frontend\r\n**** 3.1.1 Mod\u00e8les de pages\r\n**** 3.1.2 Int\u00e9grations API\r\n*** 3.2 CMS et backend\r\n**** 3.2.1 Types de publications personnalis\u00e9s\r\n**** 3.2.2 Migration de base de donn\u00e9es\r\n** 4. Qualit\u00e9 et mise en production\r\n*** 4.1 Tests multi-navigateurs\r\n*** 4.2 Migration du contenu\r\n*** 4.3 Passage DNS et mise en ligne\r\n@endwbs<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Work<\/p>\n
Cartes mentales<\/h4>\n
Capturer rapidement des id\u00e9es structur\u00e9es, des taxonomies de fonctionnalit\u00e9s et des notes d’exploration technique lors des r\u00e9unions d’\u00e9quipe.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startmindmap\r\ntitre Carte des fonctionnalit\u00e9s de la plateforme e-commerce\r\n\r\n* Plateforme e-commerce\r\n** Gestion des comptes utilisateurs\r\n*** Authentification sociale (Google, Apple)\r\n*** Authentification \u00e0 deux facteurs\r\n*** Historique des commandes et suivi\r\n** Catalogue de produits et recherche\r\n*** Recherche facet\u00e9e et filtres\r\n*** Synchronisation des stocks\r\n*** Avis et notes sur les produits\r\n** Passerelle de paiement et paiement\r\n*** Passerelles de paiement (Stripe, PayPal)\r\n*** Moteur de coupons et promotions\r\n*** Paiement express invit\u00e9\r\n** Assistance client\r\n*** Assistant de chat en direct\r\n*** Portail automatis\u00e9 de retour\r\n@endmindmap<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Plantuml dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Mind<\/p>\n<\/section>\n
\n
5. R\u00e9daction et rendu rapides de PlantUML : l\u2019avantage de VPasCode<\/h2>\n
Bien que PlantUML soit extr\u00eamement puissant, la configuration d’environnements Java locaux, des d\u00e9pendances Graphviz et des outils en ligne de commande peut cr\u00e9er des difficult\u00e9s. Utiliser un outil d\u00e9di\u00e9, bas\u00e9 sur le web, Outil PlantUML<\/strong> \u00e9limine compl\u00e8tement ces obstacles.<\/p>\n
Visual Paradigm VPasCode<\/a> est une plateforme unifi\u00e9e de diagrammes en code con\u00e7ue sp\u00e9cifiquement pour simplifier les flux de travail du texte au diagramme.<\/p>\n
Principaux avantages de VPasCode :<\/h3>\n