{"id":2262,"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\/"},"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","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/fr\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide\/","title":{"rendered":"Quels types de diagrammes pouvez-vous cr\u00e9er avec PlantUML ? (Guide complet)"},"content":{"rendered":"

\"Hero<\/p>\n

Dans l’ing\u00e9nierie logicielle moderne et l’architecture des syst\u00e8mes, les outils de diagrammation traditionnels par glisser-d\u00e9poser \u00e9chouent souvent. Ils peuvent \u00eatre lents \u00e0 mettre \u00e0 jour, difficiles \u00e0 maintenir dans les syst\u00e8mes de contr\u00f4le de version comme Git, et sujets \u00e0 un style incoh\u00e9rent. C’est l\u00e0 que Diagramme en tant que code (DaC)<\/strong>intervient, et PlantUML<\/strong>se dresse comme l’un des langages de diagrammation bas\u00e9s sur le texte les plus polyvalents et les plus largement adopt\u00e9s dans l’\u00e9cosyst\u00e8me des d\u00e9veloppeurs.<\/section>\n
En d\u00e9finissant des visuels \u00e0 l’aide de texte brut, les d\u00e9veloppeurs peuvent conserver la documentation architecturale directement \u00e0 c\u00f4t\u00e9 de leur code source. Mais quels types de diagrammes pouvez-vous r\u00e9ellement cr\u00e9er avec ? Que vous ayez besoin de cartes structurelles standard de Unified Modeling Language (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 l’utilisation d’un \u00e9diteur PlantUML<\/strong>tel que VPasCode<\/a>am\u00e9liore votre exp\u00e9rience de rendu et d’\u00e9dition.<\/section>\n
\n

2. Diagrammes standard de Unified Modeling Language (UML)<\/h2>\n

\u00c0 sa base, PlantUML a \u00e9t\u00e9 con\u00e7u pour simplifier la cr\u00e9ation de diagrammes UML officiels. Il se divise en deux cat\u00e9gories principales : 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>\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\n  \ntitle Syst\u00e8me de gestion h\u00f4teli\u00e8re\n\n' D\u00e9finir les interfaces\ninterface IReservable {\n    + faireReservation(client: Client, dates: PlageDates): boolean\n    + annulerReservation(idReservation: String): boolean\n    + verifierDisponibilite(date: Date): boolean\n}\n\ninterface IPayable {\n    + traiterPaiement(montant: double): boolean\n    + emettreRemboursement(idReservation: String): boolean\n    + obtenirStatutPaiement(): String\n}\n\n' D\u00e9finir la classe abstraite\nabstract class Personne {\n    - id: String\n    - nom: String\n    - email: String\n    - telephone: String\n    + getId(): String\n    + getNom(): String\n    + getInfosContact(): String\n    + mettreAJourInfosContact(info: String): void\n}\n\n' D\u00e9finir les classes concr\u00e8tes\nclass Client {\n    - pointsFidelite: int\n    - sejoursTotaux: int\n    - preferences: List\n    + gagnerPointsFidelite(co\u00fbtSejour: double): void\n    + utiliserPointsFidelite(points: int): boolean\n    + obtenirNiveauFidelite(): String\n    + ajouterPreference(preference: String): void\n}\n\nclass Chambre {\n    - numeroChambre: String\n    - typeChambre: TypeChambre\n    - capacite: int\n    - prixParNuit: double\n    - equipements: List\n    - disponible: boolean\n    + reserverChambre(client: Client, dates: PlageDates): boolean\n    + libererChambre(): void\n    + getPrix(client: Client): double\n    + ajouterEquipement(equipement: String): void\n    + obtenirStatutChambre(): String\n}\n\nclass Reservation {\n    - idReservation: String\n    - dateArrivee: Date\n    - dateDepart: Date\n    - prixTotal: double\n    - statut: StatutReservation\n    - demandesSpeciales: String\n    + calculerPrixTotal(): double\n    + confirmerReservation(): void\n    + checkIn(): void\n    + checkOut(): boolean\n    + mettreAJourDates(nouvelleArrivee: Date, nouveauDepart: Date): boolean\n    + obtenirDur\u00e9e(): int\n}\n\n' \u00c9num\u00e9ration\nenum TypeChambre {\n    STANDARD\n    DELUXE\n    SUITE\n    PRESIDENTIAL\n}\n\n' \u00c9num\u00e9ration\nenum StatutReservation {\n    EN_ATTENTE\n    CONFIRM\u00c9E\n    ARRIV\u00c9E\n    D\u00c9PART\n    ANNUL\u00c9E\n}\n\n' Relations\n' Impl\u00e9mentation d'interface (ligne pointill\u00e9e avec triangle)\nIReservable <|.. Reservation : impl\u00e9mente\nIPayable <|.. Reservation : impl\u00e9mente\n\n' H\u00e9ritage abstrait (ligne pleine avec triangle)\nPersonne <|-- Client : \u00e9tend\n' Composition (losange plein) - La Chambre fait partie de la Reservation Reservation *-- \"1..*\" Chambre : contient >\n\n' Association (ligne pleine simple) avec multiplicit\u00e9\nClient \"1\" -- \"0..*\" Reservation : fait >\n\n' D\u00e9pendance (fl\u00e8che pointill\u00e9e) - Le Client d\u00e9pend du TypeChambre\nClient ..> TypeChambre : a un niveau de fid\u00e9lit\u00e9 bas\u00e9 sur >\n\n' Association avec \u00e9tiquette personnalis\u00e9e\nReservation \"1\" --o \"1\" Client : r\u00e9serv\u00e9 par >\n\n' R\u00e9alisation d'interface par une classe abstraite (connecteur suppl\u00e9mentaire optionnel)\nIReservable <|.. Chambre : impl\u00e9mente\n\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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier 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 du logiciel sur le mat\u00e9riel ou l’infrastructure cloud.<\/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\ntitle Diagramme de composants d'application web\n\npackage \"Couche Client\" {\n    [Navigateur Web] as Browser\n    [Application Mobile] as Mobile\n}\n\npackage \"Serveur d'application\" {\n    [Passerelle API] as Gateway\n    [Service Utilisateur] as UserService\n    [Service Commande] as OrderService\n    [Service Paiement] as PaymentService\n}\n\npackage \"Couche Base de donn\u00e9es\" {\n    database \"Base de donn\u00e9es Utilisateur\" as UserDB\n    database \"Base de donn\u00e9es Commande\" as OrderDB\n}\n\npackage \"Services Tiers\" {\n    [API Stripe] as Stripe\n}\n\n' Connexions\nBrowser --> Gateway : HTTP \/ REST\nMobile --> Gateway : HTTP \/ REST\n\nGateway --> UserService : REST Interne\nGateway --> OrderService : REST Interne\n\nUserService --> UserDB : Lecture \/ \u00c9criture\nOrderService --> OrderDB : Lecture \/ \u00c9criture\nOrderService --> PaymentService : Traitement Paiement\n\nPaymentService --> Stripe : HTTPS \/ API\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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier PlantUML dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"Component<\/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\ntitle Diagramme de d\u00e9ploiement - Application web \u00e0 3 niveaux\n\nskinparam componentStyle rectangle\n\nnode \"Poste client\" as clientNode {\n  node \"Navigateur Web\" as browser {\n    artifact \"Frontend Application Web (HTML\/JS)\" as frontend\n  }\n}\n\nnode \"Serveur d'application\" as appServerNode {\n  node \"Conteneur Servlet (Tomcat)\" as tomcat {\n    artifact \"API Backend (fichier WAR)\" as appApi\n  }\n}\n\nnode \"Serveur de base de donn\u00e9es\" as databaseNode {\n  database \"PostgreSQL\" as postgres {\n    artifact \"Sch\u00e9ma de base de donn\u00e9es d'application\" as dbSchema\n  }\n}\n\nclientNode -- appServerNode : HTTPS (Port 443)\nappServerNode -- databaseNode : JDBC (Port 5432)\n\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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier 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. Tracez \u00e9tape par \u00e9tape les interactions, 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\ntitre Flux d'authentification utilisateur\n\nacteur \"Utilisateur\" as user\nparticipant \"Application Web\" as app\nparticipant \"API d'authentification\" as auth\ndatabase \"Base de donn\u00e9es utilisateur\" as db\n\nuser -> app : Saisir les identifiants\nactiver app\n\napp -> auth : POST \/api\/v1\/login\nactiver auth\n\nauth -> db : Interroger l'utilisateur par e-mail\nactiver db\ndb --> auth : Retourner l'enregistrement utilisateur et le hachage\nd\u00e9sactiver db\n\nalt Identifiants valides\n    auth -> auth : V\u00e9rifier le mot de passe et g\u00e9n\u00e9rer un JWT\n    auth --> app : 200 OK (Jeton et profil)\n    app --> user : Rediriger vers le tableau de bord\nsinon Identifiants invalides\n    auth --> app : 401 Non autoris\u00e9 (Erreur)\n    app --> user : Afficher \"Identifiants invalides\"\nfin\n\nd\u00e9sactiver auth\nd\u00e9sactiver app\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             <\/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\u00e9finir 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\ntitre Syst\u00e8me d'achat en ligne - Diagramme de cas d'utilisation\n\ndirection de gauche \u00e0 droite\n\nacteur Client\nacteur \"Client inscrit\" as RegCustomer\nacteur \"Passerelle de paiement\" as PaymentSystem\n\nClient <|-- RegCustomer rectangle \"Syst\u00e8me de commerce \u00e9lectronique\" { casd'utilisation \"Parcourir les produits\" as UC_Browse casd'utilisation \"Rechercher des articles\" as UC_Search casd'utilisation \"G\u00e9rer le panier\" as UC_Cart casd'utilisation \"Passer la commande\" as UC_Checkout casd'utilisation \"Appliquer un coupon de r\u00e9duction\" as UC_Coupon casd'utilisation \"Traiter le paiement\" as UC_Payment casd'utilisation \"Voir l'historique des commandes\" as UC_History } Client --> UC_Browse\nClient --> UC_Search\nClient --> UC_Cart\nClient --> UC_Checkout\n\nRegCustomer --> UC_History\n\nUC_Checkout .> UC_Payment : <>\nUC_Checkout <.. UC_Coupon : <>\n\nUC_Payment -- PaymentSystem\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             <\/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
Mod\u00e9liser la logique m\u00e9tier complexe, les flux algorithmiques, les transitions de machines \u00e0 \u00e9tats et la 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\ntitre Processus d'ex\u00e9cution de commande\n\n|Client|\nd\u00e9but\n:Passer une commande;\n:Soumettre les d\u00e9tails de paiement;\n\n|Syst\u00e8me de commande|\nsi (Paiement valide ?) alors (oui)\n    :R\u00e9server l'inventaire;\n     \n    ' Division de concurrence\n    fork\n        |Entrep\u00f4t|\n        :Pr\u00e9lever les articles sur l'\u00e9tag\u00e8re;\n        :Emballer les articles dans une bo\u00eete;\n    fork again\n        |Facturation|\n        :G\u00e9n\u00e9rer le PDF de facture;\n        :Pr\u00e9lever le moyen de paiement;\n    end fork\n\n    |Exp\u00e9dition|\n    :Joindre l'\u00e9tiquette d'exp\u00e9dition;\n    :Remettre au transporteur;\n     \n    |Client|\n    :Recevoir le colis;\n    stop\nsinon (non)\n    |Syst\u00e8me de commande|\n    :Envoyer un avis d'\u00e9chec de paiement;\n    |Client|\n    :Mettre \u00e0 jour le moyen de paiement;\n    stop\nfin si\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             <\/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\ntitre Cycle de vie d'une commande de commerce \u00e9lectronique\n\n[*] --> En attente : Commande pass\u00e9e\n\n\u00e9tat En attente {\n    [*] --> En attente du paiement\n    En attente du paiement --> \u00c9chec du paiement : Erreur de paiement\n    \u00c9chec du paiement --> En attente du paiement : R\u00e9essayer le paiement\n}\n\nEn attente --> En traitement : Paiement autoris\u00e9\nEn attente --> Annul\u00e9 : L'utilisateur annule la commande\n\n\u00e9tat En traitement {\n    [*] --> Emballage\n    Emballage --> Pr\u00eat pour l'exp\u00e9dition : Contr\u00f4le qualit\u00e9 r\u00e9ussi\n}\n\nEn traitement --> Exp\u00e9di\u00e9 : Remise au transporteur\nExp\u00e9di\u00e9 --> Livr\u00e9 : Livraison confirm\u00e9e\nExp\u00e9di\u00e9 --> Retourn\u00e9 : \u00c9chec de la livraison \/ Refus\u00e9\n\nLivr\u00e9 --> [*]\nAnnul\u00e9 --> [*]\nRetourn\u00e9 --> [*]\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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier PlantUML dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"State<\/p>\n
Diagrammes temporels<\/h4>\n
D\u00e9taille les transitions d’\u00e9tat pr\u00e9cises et les interactions d’objets sur des tranches de temps discr\u00e8tes \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\ntitre Diagramme temporel de transfert de donn\u00e9es SPI\n\nrobuste \"Horloge (SCLK)\" as CLK\nbinaire \"S\u00e9lection de puce (CS)\" as CS\nbinaire \"Sortie ma\u00eetre (MOSI)\" as MOSI\nconcis \"Bus de donn\u00e9es (MISO)\" as MISO\n\n@0\nCS est Haut\nCLK est Bas\nMOSI est Bas\nMISO est \"Inactif\"\n\n@1\nCS est Bas\nMISO est \"En-t\u00eate\"\n\n@2\nCLK est Haut\nMOSI est Haut\n\n@3\nCLK est Bas\n\n@4\nCLK est Haut\nMOSI est Bas\nMISO est \"Charge utile\"\n\n@5\nCLK est Bas\n\n@6\nCS est Haut\nCLK est Bas\nMOSI est Bas\nMISO est \"Inactif\"\n\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             <\/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 de l’UML traditionnel, PlantUML excelle dans la repr\u00e9sentation de syst\u00e8mes logiciels multicouches et d’architectures de donn\u00e9es gr\u00e2ce \u00e0 des biblioth\u00e8ques d’extensions sp\u00e9cialis\u00e9es.<\/p>\n
Diagrammes du mod\u00e8le C4<\/h4>\n
Exprimez l’architecture logicielle \u00e0 diff\u00e9rents niveaux d’abstraction \u2014 Contexte, Conteneur, Composant et Code \u2014 rendant 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\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\n\nTITLE Diagramme de contexte du syst\u00e8me pour le syst\u00e8me de banque en ligne\n\nPerson(customer, \"Client de banque personnelle\", \"Un client de la banque, disposant de comptes bancaires personnels.\")\nSystem(banking_system, \"Syst\u00e8me de banque en ligne\", \"Permet aux clients de consulter les informations de leurs comptes bancaires et d'effectuer des paiements.\")\n\nSystem_Ext(mainframe, \"Syst\u00e8me bancaire sur mainframe\", \"Stocke toutes les informations bancaires de base concernant les clients, les comptes, les transactions, etc.\")\nSystem_Ext(email_system, \"Syst\u00e8me de messagerie\", \"Le syst\u00e8me de messagerie interne Microsoft Exchange.\")\n\nRel(customer, banking_system, \"Consulte les soldes des comptes et effectue des paiements via\")\nRel(banking_system, mainframe, \"R\u00e9cup\u00e8re les informations de compte et effectue des paiements via\")\nRel(banking_system, email_system, \"Envoie des e-mails via\")\nRel_Back(email_system, customer, \"Envoie des e-mails \u00e0\")\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             <\/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
Prend en charge la mod\u00e9lisation de l’architecture d’entreprise \u00e0 travers les couches m\u00e9tier, application et technologie pour mapper 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\n!include <archimate\/Archimate>\n\ntitle Exemple ArchiMate - Paiement de factures en ligne\n\nGrouping(business, \"Couche m\u00e9tier\"){\n    Business_Process(payBillProcess, \"Processus de paiement de factures\")\n    Business_Object(bankAccount, \"Compte bancaire du client\")\n    Business_Service(paymentService, \"Service m\u00e9tier de paiement de factures\")\n}\n\nGrouping(application, \"Couche application\"){\n    Application_Component(bankingApp, \"Application de banque mobile\")\n    Application_Function(paymentProcessing, \"Logique de traitement des paiements\")\n    Application_DataObject(transactionRecord, \"Charge utile de donn\u00e9es de transaction\")\n}\n\nGrouping(technology, \"Couche technologie\"){\n    Technology_Artifact(jwtToken, \"Jeton de session crypt\u00e9\")\n    Technology_Service(apiGateway, \"Service de passerelle API\")\n    Technology_Service(dbService, \"Service de base de donn\u00e9es principal\")\n}\n\nRel_Flow_Right(payBillProcess, bankAccount, \"\")\nRel_Serving_Up(paymentService, payBillProcess, \"\")\nRel_Specialization_Up(paymentProcessing, paymentService, \"\")\nRel_Flow_Right(transactionRecord, paymentProcessing, \"\")\nRel_Assignment_Left(bankingApp, paymentProcessing, \"\")\nRel_Realization_Up(jwtToken, transactionRecord, \"\")\nRel_Serving_Up(apiGateway, paymentProcessing, \"\")\nRel_Serving_Up(dbService, apiGateway, \"\")\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             <\/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 (DER)<\/h4>\n
G\u00e9n\u00e9rez des visualisations propres de sch\u00e9mas de base de donn\u00e9es, y compris la notation standard 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\ntitle Sch\u00e9ma de base de donn\u00e9es E-Commerce (Pied de corbeau)\n\n' Masquer les ic\u00f4nes de cercle pour les entit\u00e9s\nhide circle\nskinparam linetype ortho\n\nentity \"Utilisateur\" as user {\n    * user_id : INT <>\n    --\n    * email : VARCHAR(255)\n    * password_hash : VARCHAR(255)\n    * created_at : TIMESTAMP\n}\n\nentity \"ProfilClient\" as profile {\n    * profile_id : INT <>\n    --\n    * user_id : INT <>\n    * first_name : VARCHAR(100)\n    * last_name : VARCHAR(100)\n      phone : VARCHAR(20)\n}\n\nentity \"Commande\" as order {\n    * order_id : INT <>\n    --\n    * user_id : INT <>\n    * order_date : TIMESTAMP\n    * total_amount : DECIMAL(10,2)\n    * status : VARCHAR(50)\n}\n\nentity \"ArticleCommande\" as item {\n    * order_item_id : INT <>\n    --\n    * order_id : INT <>\n    * product_id : INT <>\n    * quantity : INT\n    * unit_price : DECIMAL(10,2)\n}\n\nentity \"Produit\" as product {\n    * product_id : INT <>\n    --\n    * sku : VARCHAR(50)\n    * name : VARCHAR(150)\n      description : TEXT\n    * price : DECIMAL(10,2)\n}\n\n' Relations\nuser ||--o| profile : \"poss\u00e8de\"\nuser ||--o{ order : \"passe\"\norder ||--|{ item : \"contient\"\nproduct ||--o{ item : \"appara\u00eet dans\"\n\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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier PlantUML dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"Entity-relationship<\/p>\n
Cartes r\u00e9seau et infrastructure<\/h4>\n
Rendez les topologies r\u00e9seau, les n\u0153uds de serveurs, les connexions cloud et les pare-feu sans effort.<\/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\ntitle Topologie r\u00e9seau d'entreprise\n\nnwdiag {\n    network External_Internet {\n        address = \"0.0.0.0\/0\"\n        user_client [address = \"203.0.113.15\", description = \"Utilisateur distant\"];\n        edge_firewall [address = \"192.168.1.1\", description = \"Pare-feu p\u00e9rim\u00e9trique\"];\n    }\n\n    network DMZ_Zone {\n        address = \"192.168.1.0\/24\"\n        edge_firewall;\n        load_balancer [address = \"192.168.1.10\", description = \"\u00c9quilibreur de charge Nginx\"];\n        mail_server [address = \"192.168.1.25\", description = \"Serveur SMTP\"];\n        internal_firewall [address = \"192.168.1.254\", description = \"Pare-feu interne\"];\n    }\n\n    network Private_LAN {\n        address = \"10.0.1.0\/24\"\n        internal_firewall;\n        app_server_01 [address = \"10.0.1.50\", description = \"N\u0153ud API 1\"];\n        app_server_02 [address = \"10.0.1.51\", description = \"N\u0153ud API 2\"];\n        db_master [address = \"10.0.1.100\", description = \"PostgreSQL Primaire\"];\n    }\n\n    network Management_Subnet {\n        address = \"10.0.99.0\/24\"\n        internal_firewall;\n        admin_bastion [address = \"10.0.99.5\", description = \"H\u00f4te bastion SSH\"];\n        monitoring_node [address = \"10.0.99.20\", description = \"H\u00f4te Prometheus\"];\n    }\n}\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             <\/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. Visuels de planification, de gestion et de brainstorming<\/h2>\n
PlantUML n’est pas limit\u00e9 \u00e0 la conception logicielle ; c’est \u00e9galement un outil puissant pour la gestion de projet et le brainstorming d’\u00e9quipe.<\/p>\n
Diagrammes de Gantt<\/h4>\n
Planifiez les calendriers de projet, les d\u00e9pendances de t\u00e2ches, les jalons et l’allocation des ressources en utilisant un balisage texte \u00e9pur\u00e9.<\/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 Calendrier de lancement de produit logiciel\r\n    formatDate  YYYY-MM-DD\r\n    formatAxis  %b %d\r\n\r\n    section Planification & Conception\r\n    Collecte des besoins   :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 utilisateur Frontend  :b2, apr\u00e8s a2, 15j\r\n\r\n    section Tests & Lancement\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    Lancement en production       :jal\u00f3n, 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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier Mermaid dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"Mermaid<\/p>\n
Structure de d\u00e9coupage du projet (WBS)<\/h4>\n
D\u00e9composez les projets complexes en livrables hi\u00e9rarchiques et en blocs 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 WBS de refonte de site web\r\n\r\n* Projet de refonte de site web\r\n** 1. D\u00e9couverte & Strat\u00e9gie\r\n*** 1.1 Entretiens avec les parties prenantes\r\n*** 1.2 Audit 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 Wireframing\r\n**** 2.1.1 Maquettes pour bureau\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 & 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 d'API\r\n*** 3.2 CMS & 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. QA & Lancement\r\n*** 4.1 Tests multi-navigateurs\r\n*** 4.2 Migration de contenu\r\n*** 4.3 Basculage DNS & 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             <\/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
Capturez rapidement des id\u00e9es structur\u00e9es, des taxonomies de fonctionnalit\u00e9s et des notes d’exploration technique lors des s\u00e9ances 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 de commerce \u00e9lectronique\r\n\r\n* Plateforme de commerce \u00e9lectronique\r\n** Gestion des comptes utilisateurs\r\n*** Authentification sociale (Google, Apple)\r\n*** Authentification multifacteur\r\n*** Historique des commandes & Suivi\r\n** Catalogue de produits & Recherche\r\n*** Recherche facett\u00e9e & Filtres\r\n*** Synchronisation des stocks\r\n*** Avis & Notations des produits\r\n** Paiement & Paiements\r\n*** Passerelles de paiement (Stripe, PayPal)\r\n*** Moteur de coupons & Promotions\r\n*** Paiement invit\u00e9 en un clic\r\n** Support client\r\n*** Assistant de chat en direct\r\n*** Portail de retour automatis\u00e9\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             <\/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. \u00c9criture et rendu rapides de PlantUML : l’avantage 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 frictions. L’utilisation d’une plateforme web d\u00e9di\u00e9e,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 rationaliser les flux de travail de texte vers diagramme. Gr\u00e2ce aux r\u00e9centes am\u00e9liorations mises en \u00e9vidence dans notreMise \u00e0 jour majeure de VPasCode : G\u00e9n\u00e9rez et modifiez des diagrammes instantan\u00e9ment avec l’IA<\/a>, elle prend d\u00e9sormais en charge des capacit\u00e9s d’IA natives directement dans l’\u00e9diteur.<\/p>\n
Principaux avantages de VPasCode :<\/h3>\n