{"id":12691,"date":"2026-10-29T13:20:02","date_gmt":"2026-10-29T05:20:02","guid":{"rendered":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"},"modified":"2026-10-29T13:29:23","modified_gmt":"2026-10-29T05:29:23","slug":"from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","title":{"rendered":"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#8217;IA de Visual Paradigm"},"content":{"rendered":"<h2 data-nodeid=\"28688\">Introduction<\/h2>\n<p data-nodeid=\"28689\">Dans l&#8217;ing\u00e9nierie logicielle moderne, l&#8217;\u00e9cart entre la conception architecturale et la documentation technique est souvent l&#8217;endroit o\u00f9 les projets perdent de leur \u00e9lan. Les diagrammes deviennent des captures d&#8217;\u00e9cran obsol\u00e8tes, la documentation s&#8217;\u00e9loigne de la r\u00e9alit\u00e9, et l&#8217;int\u00e9gration de nouveaux membres de l&#8217;\u00e9quipe se transforme en un exercice fastidieux de d\u00e9cryptage d&#8217;artefacts h\u00e9rit\u00e9s.<\/p>\n<p data-nodeid=\"28690\">L&#8217;\u00e9cosyst\u00e8me de Visual Paradigm, aliment\u00e9 par l&#8217;IA, r\u00e9pond \u00e0 ce d\u00e9fi en transformant la mani\u00e8re dont les \u00e9quipes cr\u00e9ent et maintiennent la documentation technique. En reliant la mod\u00e9lisation de diagrammes conversationnelle, la mod\u00e9lisation C4 structur\u00e9e, un pipeline d&#8217;actifs centralis\u00e9 et une documentation vivante au sein d&#8217;un flux de travail unique et fluide, il garantit que votre architecture et votre documentation \u00e9voluent ensemble comme une source unique de v\u00e9rit\u00e9.<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-22363\" decoding=\"async\" height=\"1122\" loading=\"lazy\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png 1402w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7-300x240.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7-1024x819.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7-768x615.png 768w\" width=\"1402\"\/><\/p>\n<p data-nodeid=\"28691\">Ce guide propose un parcours complet et \u00e9tape par \u00e9tape de ce flux de travail, de la premi\u00e8re phase de brainstorming avec l&#8217;IA jusqu&#8217;\u00e0 la publication d&#8217;une documentation vivante auto-mise \u00e0 jour, accompagn\u00e9 d&#8217;exemples d\u00e9taill\u00e9s de PlantUML et de meilleures pratiques.<\/p>\n<hr data-nodeid=\"28692\"\/>\n<h2 data-nodeid=\"28693\">Partie 1 : Concepts cl\u00e9s et aper\u00e7u de l&#8217;\u00e9cosyst\u00e8me<\/h2>\n<h3 data-nodeid=\"28694\">Les quatre piliers<\/h3>\n<p data-nodeid=\"28695\">L&#8217;\u00e9cosyst\u00e8me de Visual Paradigm se compose de quatre piliers d&#8217;IA interconnect\u00e9s qui travaillent ensemble pour cr\u00e9er un flux de travail en boucle ferm\u00e9e :<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-22365\" decoding=\"async\" height=\"941\" loading=\"lazy\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492.png 1672w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-300x169.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-1024x576.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-768x432.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-1536x864.png 1536w\" width=\"1672\"\/><\/p>\n<table data-nodeid=\"28697\">\n<thead data-nodeid=\"28698\">\n<tr data-nodeid=\"28699\">\n<th data-nodeid=\"28701\"><strong data-nodeid=\"29387\">Pilier<\/strong><\/th>\n<th data-nodeid=\"28702\"><strong data-nodeid=\"29391\">Objectif<\/strong><\/th>\n<th data-nodeid=\"28703\"><strong data-nodeid=\"29395\">Quand l&#8217;utiliser<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28707\">\n<tr data-nodeid=\"28708\">\n<td data-nodeid=\"28709\"><strong data-nodeid=\"29399\">Chatbot de mod\u00e9lisation visuelle par IA<\/strong><\/td>\n<td data-nodeid=\"28710\">Co-pilote d&#8217;id\u00e9ation conversationnelle ; g\u00e9n\u00e8re des diagrammes \u00e0 partir du langage naturel<\/td>\n<td data-nodeid=\"28711\">Brainstorming, prototypage rapide, surmonter le syndrome de la \u00ab page blanche \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"28712\">\n<td data-nodeid=\"28713\"><strong data-nodeid=\"29411\">Applications et studios IA (Studio C4-PlantUML)<\/strong><\/td>\n<td data-nodeid=\"28714\">Mod\u00e9lisation guid\u00e9e et ax\u00e9e sur la m\u00e9thodologie avec des assistants \u00e9tape par \u00e9tape<\/td>\n<td data-nodeid=\"28715\">Raffinement structur\u00e9, mod\u00e9lisation C4, conformit\u00e9, int\u00e9gration<\/td>\n<\/tr>\n<tr data-nodeid=\"28716\">\n<td data-nodeid=\"28717\"><strong data-nodeid=\"29417\">OpenDocs<\/strong><\/td>\n<td data-nodeid=\"28718\">Plateforme de gestion des connaissances vivantes avec des diagrammes en direct et modifiables<\/td>\n<td data-nodeid=\"28719\">Documentation technique, int\u00e9gration, rapports aux parties prenantes, wikis<\/td>\n<\/tr>\n<tr data-nodeid=\"28720\">\n<td data-nodeid=\"28721\"><strong data-nodeid=\"29423\">VP Desktop<\/strong><\/td>\n<td data-nodeid=\"28722\">Mod\u00e9lisation de pr\u00e9cision professionnelle, validation et ing\u00e9nierie du code<\/td>\n<td data-nodeid=\"28723\">Architecture d&#8217;entreprise, validation s\u00e9mantique, g\u00e9n\u00e9ration de code, tra\u00e7abilit\u00e9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-nodeid=\"28724\">Le pipeline OpenDocs<\/h3>\n<p data-nodeid=\"28725\">Le pipeline sert de hub de transit central s\u00e9curis\u00e9 et h\u00e9berg\u00e9 dans le cloud qui connecte les cinq environnements d&#8217;ex\u00e9cution au sein de l&#8217;\u00e9cosyst\u00e8me Visual Paradigm. Il permet aux \u00e9quipes de diffuser des artefacts provenant de multiples sources directement vers une documentation technique unifi\u00e9e, sans transferts de fichiers manuels ni captures d&#8217;\u00e9cran.<\/p>\n<p data-nodeid=\"28725\"><img alt=\"Le g\u00e9n\u00e9rateur de cartes mentales par IA se connecte d\u00e9sormais au pipeline | Visual Paradigm\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6aab4fe26afbe.png\"\/><\/p>\n<p data-nodeid=\"28726\"><strong data-nodeid=\"29432\">Caract\u00e9ristiques cl\u00e9s<\/strong>:<\/p>\n<ul data-nodeid=\"28727\">\n<li data-nodeid=\"28728\">\n<p data-nodeid=\"28729\"><strong data-nodeid=\"29437\">D\u00e9p\u00f4t h\u00e9berg\u00e9 dans le cloud<\/strong>: Acc\u00e9der aux artefacts depuis n&#8217;importe quel appareil<\/p>\n<\/li>\n<li data-nodeid=\"28730\">\n<p data-nodeid=\"28731\"><strong data-nodeid=\"29442\">Prise en compte des versions<\/strong>: Suivi automatique des r\u00e9visions avec des notes de commit<\/p>\n<\/li>\n<li data-nodeid=\"28732\">\n<p data-nodeid=\"28733\"><strong data-nodeid=\"29447\">\u00c9dit\u00e9abilit\u00e9 pr\u00e9serv\u00e9e<\/strong>: Les diagrammes restent li\u00e9s aux mod\u00e8les sources, et non \u00e0 des images statiques<\/p>\n<\/li>\n<li data-nodeid=\"28734\">\n<p data-nodeid=\"28735\"><strong data-nodeid=\"29452\">Acc\u00e8s bas\u00e9 sur les r\u00f4les<\/strong>: Configurez les autorisations par projet, \u00e9quipe ou artefact<\/p>\n<\/li>\n<li data-nodeid=\"28736\">\n<p data-nodeid=\"28737\"><strong data-nodeid=\"29457\">Int\u00e9gr\u00e9 \u00e0 l&#8217;IA<\/strong>: Prise en charge native des diagrammes g\u00e9n\u00e9r\u00e9s et affin\u00e9s par l&#8217;IA<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"28738\"><strong data-nodeid=\"29462\">Les cinq environnements d&#8217;ex\u00e9cution<\/strong>:<\/p>\n<table data-nodeid=\"28740\">\n<thead data-nodeid=\"28741\">\n<tr data-nodeid=\"28742\">\n<th data-nodeid=\"28744\"><strong data-nodeid=\"29466\">Plateforme<\/strong><\/th>\n<th data-nodeid=\"28745\"><strong data-nodeid=\"29470\">Mod\u00e9lisation de la nature<\/strong><\/th>\n<th data-nodeid=\"28746\"><strong data-nodeid=\"29476\">Cycle de vie et versioning<\/strong><\/th>\n<th data-nodeid=\"28747\"><strong data-nodeid=\"29480\">Cas d&#8217;utilisation id\u00e9al<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28752\">\n<tr data-nodeid=\"28753\">\n<td data-nodeid=\"28754\">1. Chatbot IA<\/td>\n<td data-nodeid=\"28755\">Pilot\u00e9 par le code \/ Bas\u00e9 sur des invites<\/td>\n<td data-nodeid=\"28756\">Instantan\u00e9s statiques<\/td>\n<td data-nodeid=\"28757\">Brainstorming rapide, g\u00e9n\u00e9ration de diagrammes \u00e0 partir de texte<\/td>\n<\/tr>\n<tr data-nodeid=\"28758\">\n<td data-nodeid=\"28759\">2. \u00c9diteur en ligne<\/td>\n<td data-nodeid=\"28760\">Pilot\u00e9 par une toile visuelle<\/td>\n<td data-nodeid=\"28761\">Suivi manuel<\/td>\n<td data-nodeid=\"28762\">Ajustements de style, \u00e9dition collaborative bas\u00e9e sur le navigateur<\/td>\n<\/tr>\n<tr data-nodeid=\"28763\">\n<td data-nodeid=\"28764\">3. OpenDocs<\/td>\n<td data-nodeid=\"28765\">Consommation et cr\u00e9ation native<\/td>\n<td data-nodeid=\"28766\">Insertion de liens en direct<\/td>\n<td data-nodeid=\"28767\">Assemblage final de la documentation, r\u00e9f\u00e9rences crois\u00e9es<\/td>\n<\/tr>\n<tr data-nodeid=\"28768\">\n<td data-nodeid=\"28769\">4. Application de bureau<\/td>\n<td data-nodeid=\"28770\">Pilot\u00e9 par des mod\u00e8les et valid\u00e9<\/td>\n<td data-nodeid=\"28771\">R\u00e9visions automatiques<\/td>\n<td data-nodeid=\"28772\">Architecture d&#8217;entreprise, mod\u00e8les d&#8217;ing\u00e9nierie valid\u00e9s<\/td>\n<\/tr>\n<tr data-nodeid=\"28773\">\n<td data-nodeid=\"28774\">5. Applications web (Assistants C4)<\/td>\n<td data-nodeid=\"28775\">Assistants guid\u00e9s par le contexte<\/td>\n<td data-nodeid=\"28776\">Architecture structurelle<\/td>\n<td data-nodeid=\"28777\">Mod\u00e9lisation de frameworks complexes, conception guid\u00e9e \u00e9tape par \u00e9tape<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-nodeid=\"28778\">Le mod\u00e8le C4<\/h3>\n<p data-nodeid=\"28779\">Le mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une approche hi\u00e9rarchique pour visualiser l&#8217;architecture logicielle \u00e0 travers quatre niveaux :<\/p>\n<p data-nodeid=\"28779\"><img decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_69faed56dfc7a.png\"\/><\/p>\n<table data-nodeid=\"28781\">\n<thead data-nodeid=\"28782\">\n<tr data-nodeid=\"28783\">\n<th data-nodeid=\"28785\"><strong data-nodeid=\"29523\">Niveau<\/strong><\/th>\n<th data-nodeid=\"28786\"><strong data-nodeid=\"29527\">Objectif<\/strong><\/th>\n<th data-nodeid=\"28787\"><strong data-nodeid=\"29531\">Exemple<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28791\">\n<tr data-nodeid=\"28792\">\n<td data-nodeid=\"28793\"><strong data-nodeid=\"29535\">Contexte<\/strong><\/td>\n<td data-nodeid=\"28794\">Montre le syst\u00e8me dans son environnement, y compris les utilisateurs et les syst\u00e8mes externes<\/td>\n<td data-nodeid=\"28795\">\u00ab Plateforme de commerce \u00e9lectronique interagissant avec des utilisateurs, des passerelles de paiement et des syst\u00e8mes d&#8217;inventaire \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"28796\">\n<td data-nodeid=\"28797\"><strong data-nodeid=\"29543\">Conteneur<\/strong><\/td>\n<td data-nodeid=\"28798\">D\u00e9coupe le syst\u00e8me en unit\u00e9s d\u00e9ployables (applications, bases de donn\u00e9es, microservices)<\/td>\n<td data-nodeid=\"28799\">\u00ab Frontend (React), Backend (Node.js), Base de donn\u00e9es (PostgreSQL) \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"28800\">\n<td data-nodeid=\"28801\"><strong data-nodeid=\"29551\">Composant<\/strong><\/td>\n<td data-nodeid=\"28802\">D\u00e9taille les modules internes et leurs interactions<\/td>\n<td data-nodeid=\"28803\">\u00ab Service Utilisateur, Service Commande, Processeur de Paiement \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"28804\">\n<td data-nodeid=\"28805\"><strong data-nodeid=\"29560\">Code<\/strong> (Optionnel)<\/td>\n<td data-nodeid=\"28806\">Plonge dans les d\u00e9tails au niveau des classes<\/td>\n<td data-nodeid=\"28807\">\u00ab UserRepository, OrderController \u00bb<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"28808\">Les vues dynamiques (S\u00e9quence, D\u00e9ploiement) compl\u00e8tent la structure statique en montrant le comportement \u00e0 l&#8217;ex\u00e9cution et l&#8217;infrastructure.<\/p>\n<hr data-nodeid=\"28809\"\/>\n<h2 data-nodeid=\"28810\">Partie 2 : Guide de flux de travail \u00e9tape par \u00e9tape<\/h2>\n<h3 data-nodeid=\"28811\">\u00c9tape 1 : Id\u00e9ation avec le chatbot IA<\/h3>\n<p data-nodeid=\"28812\"><strong data-nodeid=\"29572\">Objectif<\/strong>: Transformer une id\u00e9e vague en un prototype visuel en quelques secondes.<\/p>\n<p data-nodeid=\"28813\"><strong data-nodeid=\"29577\">Flux de travail<\/strong>:<\/p>\n<ol data-nodeid=\"28814\">\n<li data-nodeid=\"28815\">\n<p data-nodeid=\"28816\"><strong data-nodeid=\"29585\">Acc\u00e9der au chatbot IA<\/strong>via votre espace de travail Visual Paradigm ou <a data-nodeid=\"29584\" href=\"https:\/\/chat.visual-paradigm.com\/\">chat.visual-paradigm.com<\/a><\/p>\n<\/li>\n<li data-nodeid=\"28817\">\n<p data-nodeid=\"28818\"><strong data-nodeid=\"29590\">Formulez une demande \u00e0 l&#8217;IA en langage naturel<\/strong> en d\u00e9crivant votre syst\u00e8me ou votre sc\u00e9nario :<\/p>\n<pre class=\"lang-text\" data-nodeid=\"28819\"><code data-language=\"text\">\"G\u00e9n\u00e9rez un diagramme de contexte syst\u00e8me C4 pour une plateforme de commerce \u00e9lectronique\"\r\n\"Cr\u00e9ez un diagramme de s\u00e9quence pour notre flux d'authentification de microservices\"\r\n\"Montrez-moi un diagramme de cas d'utilisation pour une application de livraison de repas\"\r\n<\/code><\/pre>\n<\/li>\n<li data-nodeid=\"28820\">\n<p data-nodeid=\"28821\"><strong data-nodeid=\"29595\">Examinez et affinez de mani\u00e8re it\u00e9rative<\/strong> en utilisant des commandes de suivi :<\/p>\n<ul data-nodeid=\"28822\">\n<li data-nodeid=\"28823\">\n<p data-nodeid=\"28824\">\u00ab Ajoutez un acteur administrateur capable de r\u00e9initialiser les mots de passe \u00bb<\/p>\n<\/li>\n<li data-nodeid=\"28825\">\n<p data-nodeid=\"28826\">\u00ab Ins\u00e9rez une boucle de r\u00e9essai si la validation du code OTP \u00e9choue (maximum 3 tentatives) \u00bb<\/p>\n<\/li>\n<li data-nodeid=\"28827\">\n<p data-nodeid=\"28828\">\u00ab Affichez des messages parall\u00e8les : apr\u00e8s le succ\u00e8s du paiement, notifiez le client et mettez \u00e0 jour l&#8217;inventaire simultan\u00e9ment \u00bb<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28829\">\n<p data-nodeid=\"28830\"><strong data-nodeid=\"29612\">Exporter vers le Pipeline<\/strong>: Cliquez sur l&#8217;ic\u00f4ne Exporter \u2192 S\u00e9lectionnez <strong data-nodeid=\"29613\">Envoyer vers le Pipeline OpenDocs<\/strong><\/p>\n<\/li>\n<li data-nodeid=\"28831\">\n<p data-nodeid=\"28832\"><strong data-nodeid=\"29622\">Ajouter des m\u00e9tadonn\u00e9es<\/strong>: Incluez des commentaires descriptifs comme \u00ab \u00c9bauche du flux d&#8217;authentification de base \u2013 T2 2026 \u00bb pour l&#8217;identification de la version<\/p>\n<\/li>\n<\/ol>\n<blockquote data-nodeid=\"28833\">\n<p data-nodeid=\"28834\"><strong data-nodeid=\"29627\">\ud83d\udca1 Astuce d&#8217;expert<\/strong>: Utilisez le Chatbot pour une it\u00e9ration rapide sur les concepts de phase pr\u00e9coce. Une fois qu&#8217;un diagramme se stabilise, migrez-le vers la version Desktop pour une validation s\u00e9mantique et une synchronisation automatis\u00e9e.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28835\">Exemple PlantUML pour un diagramme de contexte C4<\/h4>\n<p data-nodeid=\"28836\"><img alt=\"\" data-nodeid=\"29630\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc80f5c2c1.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLFBRjim4BmRy3-mFhc0RLrwwYcf6YG16bI8qdD0Ksk9C1ygkPJZl--kB1jqu9wqud9cTsQakuWoOB9cFlkYdJAf0T4Xzl5xKGHvsBGQkxHD4OBo3i7XHdbRz4Ow1gqZDaPlY_BRkkAZFo-_2YiZGg2Zzv8H7xZfH_hv33KQ4FMH-bPCJV5JopP8AzRYOLrwQsaG22B3dG-MKHM4wDrIfOYUkYknAAToGNNT-Rwd6s8R_25grmhf6j6de3evllR1DqbXN7ozKCd6QaVOUtxgY46Y7ybUf9Cjn0jc9Nne2BCQITc4aMO-EsbOWfeM9koDxPdojpFQWGY0KXiHJzexeZFPSa99bCQtAn5P3dSKfN8zlfT7I_vVRV3-y87BgK73gbCb7YN2GHvvVXMyWXX9b0hGQ1uLhhao9kq6ElNXIC3dSpq5blj3zgkzC320YUDkksHssXZc_4GPEzrFszLKZjfg28DMm8nFx0GnZa950qOFG2EPas9HUxf-qliA9li4SkD_SF109aMGb3fNK_nPaap255FqEVx_eLy2PsG6oGo_k7jsL0nQZiBUtghw1ZQtkEn0xMEH-eRocbnbx7trV0EPEVaAVnD46dO-or3psHsuXlwuVm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier le PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZPJ1ZX9148Rl9Bn3osNN19YB9q-xOOsQg262NZUzFRL3QK_FM5qzmjjuXEUO5xDg1dO79T43eMcglldhhnzk8blYLFhnw0K6vrCEPiDSnzTPHlRdl43Uf8SKWLmL60BFNLLcjRT1csQHSuyFsUBLRAbNNpv-o4eR6KYkxXVQiULvtU778qRsOExG5cJB4emyolKbOE8kShkNovaH4iDZHQSAAIK7fZruS4nLm1y95BS4YbMuTYbo9ILJCrbu58KJETsw3J0aYYRO1eiasWomiNgjvnoYgQdA4tASl7nYsRp4eEtwZf79AaI1RzizWV63jcdtIUNPe3Z1wqLYz1Yxleuy7graD2YluJI9qFvdH7tgwkIAL3Ko6XW8ncCHm1JjWNGISTHPjhugKbSsb6Tg6r2TkQYqjWYbGCzath_PydLjT_g52hLHLW_Uz-nZXqfRaqM6Sv2SIDGGzsDHUyYHbJvWOz11AjgTZNVLNriaE7SxO0CsRPKdQtRVE_5Ni6qFJfokmX_qkC7wA7q5rA1JDcphJecMFyEj6Dd84BBttX4J4pROHUF9gzwQp-07CHikyfEcItOvDGIIBPBNL5FMxZiFpaEcc6F2Xen_HcjwCLXA6s2UTtPnCmrQdVtTUhrSNUWURkMh90iV4R8IesJob_bM9J9vwXVG_RgMxoym1jxVGQVyR--FdUFH3OHS_XP-0m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"28837\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\ntitle Diagramme de contexte syst\u00e8me - Plateforme de commerce \u00e9lectronique\r\n\r\nPerson(customer, \"Client\", \"Acheteurs naviguant et achetant des produits\")\r\nPerson(admin, \"Administrateur\", \"G\u00e8re les produits, les commandes et les utilisateurs\")\r\n\r\nSystem(ecommerce, \"Plateforme de commerce \u00e9lectronique\", \"Syst\u00e8me de vente en ligne g\u00e9rant le catalogue de produits, le panier, les commandes et les paiements\")\r\n\r\nSystem_Ext(payment, \"Passerelle de paiement\", \"Traite les paiements par carte de cr\u00e9dit\")\r\nSystem_Ext(inventory, \"Syst\u00e8me d'inventaire\", \"G\u00e8re les niveaux de stock et l'ex\u00e9cution\")\r\nSystem_Ext(shipment, \"Service d'exp\u00e9dition\", \"G\u00e8re la livraison et le suivi des commandes\")\r\n\r\nRel(customer, ecommerce, \"Navigate, recherche, ach\u00e8te des produits\")\r\nRel(admin, ecommerce, \"G\u00e8re les produits, les commandes, les utilisateurs\")\r\nRel(ecommerce, payment, \"Traite les paiements via\", \"HTTPS\")\r\nRel(ecommerce, inventory, \"V\u00e9rifie\/mise \u00e0 jour du stock\", \"API\")\r\nRel(ecommerce, shipment, \"Demande d'exp\u00e9dition\", \"API\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZPJ1ZX9148Rl9Bn3osNN19YB9q-xOOsQg262NZUzFRL3QK_FM5qzmjjuXEUO5xDg1dO79T43eMcglldhhnzk8blYLFhnw0K6vrCEPiDSnzTPHlRdl43Uf8SKWLmL60BFNLLcjRT1csQHSuyFsUBLRAbNNpv-o4eR6KYkxXVQiULvtU778qRsOExG5cJB4emyolKbOE8kShkNovaH4iDZHQSAAIK7fZruS4nLm1y95BS4YbMuTYbo9ILJCrbu58KJETsw3J0aYYRO1eiasWomiNgjvnoYgQdA4tASl7nYsRp4eEtwZf79AaI1RzizWV63jcdtIUNPe3Z1wqLYz1Yxleuy7graD2YluJI9qFvdH7tgwkIAL3Ko6XW8ncCHm1JjWNGISTHPjhugKbSsb6Tg6r2TkQYqjWYbGCzath_PydLjT_g52hLHLW_Uz-nZXqfRaqM6Sv2SIDGGzsDHUyYHbJvWOz11AjgTZNVLNriaE7SxO0CsRPKdQtRVE_5Ni6qFJfokmX_qkC7wA7q5rA1JDcphJecMFyEj6Dd84BBttX4J4pROHUF9gzwQp-07CHikyfEcItOvDGIIBPBNL5FMxZiFpaEcc6F2Xen_HcjwCLXA6s2UTtPnCmrQdVtTUhrSNUWURkMh90iV4R8IesJob_bM9J9vwXVG_RgMxoym1jxVGQVyR--FdUFH3OHS_XP-0m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLFBRjim4BmRy3-mFhc0RLrwwYcf6YG16bI8qdD0Ksk9C1ygkPJZl--kB1jqu9wqud9cTsQakuWoOB9cFlkYdJAf0T4Xzl5xKGHvsBGQkxHD4OBo3i7XHdbRz4Ow1gqZDaPlY_BRkkAZFo-_2YiZGg2Zzv8H7xZfH_hv33KQ4FMH-bPCJV5JopP8AzRYOLrwQsaG22B3dG-MKHM4wDrIfOYUkYknAAToGNNT-Rwd6s8R_25grmhf6j6de3evllR1DqbXN7ozKCd6QaVOUtxgY46Y7ybUf9Cjn0jc9Nne2BCQITc4aMO-EsbOWfeM9koDxPdojpFQWGY0KXiHJzexeZFPSa99bCQtAn5P3dSKfN8zlfT7I_vVRV3-y87BgK73gbCb7YN2GHvvVXMyWXX9b0hGQ1uLhhao9kq6ElNXIC3dSpq5blj3zgkzC320YUDkksHssXZc_4GPEzrFszLKZjfg28DMm8nFx0GnZa950qOFG2EPas9HUxf-qliA9li4SkD_SF109aMGb3fNK_nPaap255FqEVx_eLy2PsG6oGo_k7jsL0nQZiBUtghw1ZQtkEn0xMEH-eRocbnbx7trV0EPEVaAVnD46dO-or3psHsuXlwuVm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier le PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"28838\"><a data-nodeid=\"29633\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLFBRjim4BmRy3-mFhc0RLrwwYcf6YG16bI8qdD0Ksk9C1ygkPJZl--kB1jqu9wqud9cTsQakuWoOB9cFlkYdJAf0T4Xzl5xKGHvsBGQkxHD4OBo3i7XHdbRz4Ow1gqZDaPlY_BRkkAZFo-_2YiZGg2Zzv8H7xZfH_hv33KQ4FMH-bPCJV5JopP8AzRYOLrwQsaG22B3dG-MKHM4wDrIfOYUkYknAAToGNNT-Rwd6s8R_25grmhf6j6de3evllR1DqbXN7ozKCd6QaVOUtxgY46Y7ybUf9Cjn0jc9Nne2BCQITc4aMO-EsbOWfeM9koDxPdojpFQWGY0KXiHJzexeZFPSa99bCQtAn5P3dSKfN8zlfT7I_vVRV3-y87BgK73gbCb7YN2GHvvVXMyWXX9b0hGQ1uLhhao9kq6ElNXIC3dSpq5blj3zgkzC320YUDkksHssXZc_4GPEzrFszLKZjfg28DMm8nFx0GnZa950qOFG2EPas9HUxf-qliA9li4SkD_SF109aMGb3fNK_nPaap255FqEVx_eLy2PsG6oGo_k7jsL0nQZiBUtghw1ZQtkEn0xMEH-eRocbnbx7trV0EPEVaAVnD46dO-or3psHsuXlwuVm00\">Modifier le PlantUML dans VPasCode<\/a><\/p>\n<h4 data-nodeid=\"28839\">Exemple PlantUML pour un diagramme de s\u00e9quence<\/h4>\n<p data-nodeid=\"28840\"><img alt=\"\" data-nodeid=\"29636\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc84cf2db8.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZLHDRzim3BqRy7yWSagmvTBUSXZQ8Uqme4E7EjlEj4N4mcJ9a-Xu_VUZv8yuxT1D1uEc7lcU7mdV14RFNMFoZ3KRWe9-TMGhWht6eyS6jl0ja8S7TzGMUiqr77gtlSUAdOVRZckoh2jaxMoUvTcGNyMQ5M20Je8yQuL4Lxf5ox3wGILyzAwV8EKGlq1TjXPT_gGhIWKeLo_GnPS2FY5JZyy94fgGPmePImmqo87z-9e0gengephOVfWaxE3EicGgJofoemdfY_H9MfzrZa4iZ59sInje7NjQREWzj1X2xxpQB9eCskCpbgjo1z_HQ1Ml_iuQXQeIjZDPmakEBY1IOHYkxc_b4x0q90YGCn697pjuYhCD38-7h-Fjr27P5JCI9AekkL6GLMVqWd76TnS-3ExD1IE9IOoJRXZFe6pfVT5L5OK0x-3WVf8zGsU_Ps5FfBIdYe6TZ3NKfKC_zYOZ0uzyd-qfCiAwmTzm3SXCJSjXyvQ4E-zbUzTJgRJPl2MZg5q_r9nHrea_NXzhZZBPFuDnhWNTj8OQ6Uyq6R4spvBOEBIz3g-czazl_jkNn7MnCiCQBXBpSjy8MFu7Vm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier le PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:dLJBZjD04BnRyZ-qSjb4a0lSV42RtImIIC2Am79ksvrafF4upCCR_eOZ_Wx_6DrZntci52Hyi4Qjgkwgdh9ldKVhGwNJn2kl2POADnQhYg0aS5txCv0f2EPmNnj3UrKR25vfvT1Ji80D5O31RybujLO5Ua5qlvaTzh36Gb0kJTA4ZxM5oVSZUGBe83YoQR9Z4QfGEpGU9f-nKPk-_G_A8ogtzVDBu8fierXSUNEf89AaUC5uHCTjIBFHrQTLHBcAvPNeCKT7CBcJDrilsMxNaZjr6_5bBcv4DipV7OHbi4Bbb0ND35NsKdYYYxvLm_IZX-4WT96OmM9KJtOgdGrMz1fsBFQvjkNif4dlITv2B_CCdb3pmAkJHNAPmtmSs7EuI6SOfcWFRzulO27bhaqJuESmZJULmP8gD38l62XgNjINRuy3xD0gRbGgV8X3GzpGWsdgNr7e1V54nKWDPmiQbtl170QpwFkXFbg3uUd5dzrKA8hkZuDNy95yROxGyLv6oL-fL5PjkDQGTJAVOw89WoGavwlfoQGvCwE23wOH3J2jS0zlmVELS2ORShDhgXwibS1FnpQgRqEpQm8NQqxyLfPwGx714MngtYUBt_eCxkfGw1XhAvbsg41LEzsr5OlZoc33i9_eHIAmx5g7BsFmpqt-rnRZwBCyza4_AOoVpos3-OVr5m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"28841\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\ntitle Diagramme de s\u00e9quence - Connexion utilisateur avec authentification \u00e0 deux facteurs\r\n\r\nactor \"Utilisateur\" as user\r\nparticipant \"Navigateur Web\" as browser\r\nparticipant \"Service d'authentification\" as auth\r\nparticipant \"Passerelle SMS\" as sms\r\ndatabase \"Base de donn\u00e9es utilisateur\" as db\r\n\r\nuser -&gt; browser: Saisir les identifiants\r\nactivate browser\r\nbrowser -&gt; auth: Authentifier(username, password)\r\nactivate auth\r\nauth -&gt; db: Valider les identifiants\r\nactivate db\r\ndb --&gt; auth: Valide\r\ndeactivate db\r\n\r\nalt 2FA Activ\u00e9\r\n    auth -&gt; sms: Demander un code OTP\r\n    activate sms\r\n    sms --&gt; user: Envoyer le code OTP\r\n    deactivate sms\r\n    user -&gt; auth: Saisir le code OTP\r\n    \r\n    alt Code OTP Valide\r\n        auth --&gt; browser: Succ\u00e8s + Jeton\r\n        browser --&gt; user: Rediriger vers le tableau de bord\r\n    else Code OTP Invalid (max 3 tentatives)\r\n        auth --&gt; browser: Erreur (Code OTP invalide)\r\n        browser --&gt; user: Afficher l'erreur\r\n        note right: Boucle de r\u00e9essai impl\u00e9ment\u00e9e\r\n    end\r\nelse 2FA D\u00e9sactiv\u00e9\r\n    auth --&gt; browser: Succ\u00e8s + Jeton\r\n    browser --&gt; user: Rediriger vers le tableau de bord\r\nend\r\n\r\ndeactivate auth\r\ndeactivate browser\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:dLJBZjD04BnRyZ-qSjb4a0lSV42RtImIIC2Am79ksvrafF4upCCR_eOZ_Wx_6DrZntci52Hyi4Qjgkwgdh9ldKVhGwNJn2kl2POADnQhYg0aS5txCv0f2EPmNnj3UrKR25vfvT1Ji80D5O31RybujLO5Ua5qlvaTzh36Gb0kJTA4ZxM5oVSZUGBe83YoQR9Z4QfGEpGU9f-nKPk-_G_A8ogtzVDBu8fierXSUNEf89AaUC5uHCTjIBFHrQTLHBcAvPNeCKT7CBcJDrilsMxNaZjr6_5bBcv4DipV7OHbi4Bbb0ND35NsKdYYYxvLm_IZX-4WT96OmM9KJtOgdGrMz1fsBFQvjkNif4dlITv2B_CCdb3pmAkJHNAPmtmSs7EuI6SOfcWFRzulO27bhaqJuESmZJULmP8gD38l62XgNjINRuy3xD0gRbGgV8X3GzpGWsdgNr7e1V54nKWDPmiQbtl170QpwFkXFbg3uUd5dzrKA8hkZuDNy95yROxGyLv6oL-fL5PjkDQGTJAVOw89WoGavwlfoQGvCwE23wOH3J2jS0zlmVELS2ORShDhgXwibS1FnpQgRqEpQm8NQqxyLfPwGx714MngtYUBt_eCxkfGw1XhAvbsg41LEzsr5OlZoc33i9_eHIAmx5g7BsFmpqt-rnRZwBCyza4_AOoVpos3-OVr5m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZLHDRzim3BqRy7yWSagmvTBUSXZQ8Uqme4E7EjlEj4N4mcJ9a-Xu_VUZv8yuxT1D1uEc7lcU7mdV14RFNMFoZ3KRWe9-TMGhWht6eyS6jl0ja8S7TzGMUiqr77gtlSUAdOVRZckoh2jaxMoUvTcGNyMQ5M20Je8yQuL4Lxf5ox3wGILyzAwV8EKGlq1TjXPT_gGhIWKeLo_GnPS2FY5JZyy94fgGPmePImmqo87z-9e0gengephOVfWaxE3EicGgJofoemdfY_H9MfzrZa4iZ59sInje7NjQREWzj1X2xxpQB9eCskCpbgjo1z_HQ1Ml_iuQXQeIjZDPmakEBY1IOHYkxc_b4x0q90YGCn697pjuYhCD38-7h-Fjr27P5JCI9AekkL6GLMVqWd76TnS-3ExD1IE9IOoJRXZFe6pfVT5L5OK0x-3WVf8zGsU_Ps5FfBIdYe6TZ3NKfKC_zYOZ0uzyd-qfCiAwmTzm3SXCJSjXyvQ4E-zbUzTJgRJPl2MZg5q_r9nHrea_NXzhZZBPFuDnhWNTj8OQ6Uyq6R4spvBOEBIz3g-czazl_jkNn7MnCiCQBXBpSjy8MFu7Vm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier le PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"28842\"><a data-nodeid=\"29639\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZLHDRzim3BqRy7yWSagmvTBUSXZQ8Uqme4E7EjlEj4N4mcJ9a-Xu_VUZv8yuxT1D1uEc7lcU7mdV14RFNMFoZ3KRWe9-TMGhWht6eyS6jl0ja8S7TzGMUiqr77gtlSUAdOVRZckoh2jaxMoUvTcGNyMQ5M20Je8yQuL4Lxf5ox3wGILyzAwV8EKGlq1TjXPT_gGhIWKeLo_GnPS2FY5JZyy94fgGPmePImmqo87z-9e0gengephOVfWaxE3EicGgJofoemdfY_H9MfzrZa4iZ59sInje7NjQREWzj1X2xxpQB9eCskCpbgjo1z_HQ1Ml_iuQXQeIjZDPmakEBY1IOHYkxc_b4x0q90YGCn697pjuYhCD38-7h-Fjr27P5JCI9AekkL6GLMVqWd76TnS-3ExD1IE9IOoJRXZFe6pfVT5L5OK0x-3WVf8zGsU_Ps5FfBIdYe6TZ3NKfKC_zYOZ0uzyd-qfCiAwmTzm3SXCJSjXyvQ4E-zbUzTJgRJPl2MZg5q_r9nHrea_NXzhZZBPFuDnhWNTj8OQ6Uyq6R4spvBOEBIz3g-czazl_jkNn7MnCiCQBXBpSjy8MFu7Vm00\">Modifier le PlantUML dans VPasCode<\/a><\/p>\n<hr data-nodeid=\"28843\"\/>\n<h3 data-nodeid=\"28844\">\u00c9tape 2 : Affinement structur\u00e9 avec C4-PlantUML Studio<\/h3>\n<p data-nodeid=\"28845\"><strong data-nodeid=\"29645\">Objectif<\/strong>: \u00c9voluez le croquis g\u00e9n\u00e9r\u00e9 par l&#8217;IA vers un mod\u00e8le C4 complet et conforme aux normes.<\/p>\n<p data-nodeid=\"28846\"><strong data-nodeid=\"29650\">Flux de travail<\/strong>:<\/p>\n<ol data-nodeid=\"28847\">\n<li data-nodeid=\"28848\">\n<p data-nodeid=\"28849\"><strong data-nodeid=\"29655\">Lancez le guide d&#8217;architecture C4<\/strong>depuis le menu des applications web<\/p>\n<\/li>\n<li data-nodeid=\"28850\">\n<p data-nodeid=\"28851\"><strong data-nodeid=\"29660\">D\u00e9finissez l&#8217;\u00e9nonc\u00e9 du probl\u00e8me<\/strong> \u2013 Utilisez l&#8217;assistance IA pour g\u00e9n\u00e9rer une description compl\u00e8te :<\/p>\n<ul data-nodeid=\"28852\">\n<li data-nodeid=\"28853\">\n<p data-nodeid=\"28854\">Nom du projet<\/p>\n<\/li>\n<li data-nodeid=\"28855\">\n<p data-nodeid=\"28856\">Objectif du syst\u00e8me<\/p>\n<\/li>\n<li data-nodeid=\"28857\">\n<p data-nodeid=\"28858\">Utilisateurs principaux<\/p>\n<\/li>\n<li data-nodeid=\"28859\">\n<p data-nodeid=\"28860\">Int\u00e9grations cl\u00e9s<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28861\">\n<p data-nodeid=\"28862\"><strong data-nodeid=\"29669\">G\u00e9n\u00e9rez chaque couche C4 \u00e9tape par \u00e9tape<\/strong>:<\/p>\n<ul data-nodeid=\"28863\">\n<li data-nodeid=\"28864\">\n<p data-nodeid=\"28865\"><strong data-nodeid=\"29674\">Niveau 1 \u2013 Contexte du syst\u00e8me<\/strong>: Saisissez les limites du syst\u00e8me, les utilisateurs externes et les syst\u00e8mes d\u00e9pendants<\/p>\n<\/li>\n<li data-nodeid=\"28866\">\n<p data-nodeid=\"28867\"><strong data-nodeid=\"29679\">Niveau 2 \u2013 Conteneurs<\/strong>: Configurez les applications d\u00e9ployables, les bases de donn\u00e9es et les services externes<\/p>\n<\/li>\n<li data-nodeid=\"28868\">\n<p data-nodeid=\"28869\"><strong data-nodeid=\"29684\">Niveau 3 \u2013 Composants<\/strong>: Affinez les modules de code internes et leurs interactions<\/p>\n<\/li>\n<li data-nodeid=\"28870\">\n<p data-nodeid=\"28871\"><strong data-nodeid=\"29689\">Niveau 4 \u2013 Code<\/strong> (facultatif) : Mappez vers les structures de code r\u00e9elles<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28872\">\n<p data-nodeid=\"28873\"><strong data-nodeid=\"29694\">Ajoutez des vues de support<\/strong>:<\/p>\n<ul data-nodeid=\"28874\">\n<li data-nodeid=\"28875\">\n<p data-nodeid=\"28876\"><strong data-nodeid=\"29699\">Diagrammes dynamiques\/chronologiques<\/strong>: Montrez les interactions en temps d&#8217;ex\u00e9cution<\/p>\n<\/li>\n<li data-nodeid=\"28877\">\n<p data-nodeid=\"28878\"><strong data-nodeid=\"29704\">Diagrammes de d\u00e9ploiement<\/strong>: Mappez le logiciel vers l&#8217;infrastructure<\/p>\n<\/li>\n<li data-nodeid=\"28879\">\n<p data-nodeid=\"28880\"><strong data-nodeid=\"29709\">Diagrammes de paysage<\/strong>: Montrez le syst\u00e8me dans un contexte d&#8217;entreprise plus large<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28881\">\n<p data-nodeid=\"28882\"><strong data-nodeid=\"29718\">Flux vers le pipeline<\/strong>: Cliquez <strong data-nodeid=\"29719\">Flux de la structure vers le pipeline<\/strong> pour exporter le bloc de mod\u00e8le hi\u00e9rarchique entier<\/p>\n<\/li>\n<\/ol>\n<blockquote data-nodeid=\"28883\">\n<p data-nodeid=\"28884\"><strong data-nodeid=\"29724\">\ud83c\udfaf Cas d&#8217;utilisation<\/strong>: Id\u00e9al pour les comit\u00e9s de revue d&#8217;architecture, la documentation d&#8217;int\u00e9gration et les pr\u00e9sentations aux parties prenantes o\u00f9 une clart\u00e9 multi-niveaux est essentielle.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28885\">Exemple de diagramme de conteneurs C4 (PlantUML)<\/h4>\n<p data-nodeid=\"28886\"><img alt=\"\" data-nodeid=\"29727\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc88c626bb.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLJ1RXen4BqZyGzJJaHAmgMddf90rAPA50f5EKPUxx1OzThks0lTLlttZktiiYYK2sOyysRclMTkV10KcbgFHn-KaRef4NOXEFzfDYDnkAvKs3L5uv6aDG5Dk9QsdZajJ2owyg7KgfZDFrujOsZpz3YhXGz877gTSuLG1kdQfGRZKL118_HnM2XHaQZX2bu4uSvo7tWIHbHOSojOjmnLny8bahTcoiDkjvSmEMQlOsJ2eQMIF_mbE96-X2d1xvJpOAdasib5Zr4dV3f1oJqfuZplEGsH2nsI2CeQdz0uGxT1oI6KjfNoCSPrZzqPlgEe8r86zQ1COHjJpcmJqY4D5lTBKEDHtlBrBju9QgU7sfyPRa38v0B-Z4V0dvx9wG4BuLoimm9kdTDAfk7Z82iKCYIEoEvLoIDj7c1h2GvzZqHi7ESKLJWLw-_Nt-5s-H0XrewKgU3EseJuXQdH3CWEuGBl8L8Y4s6Mv0vzo1o-X_R14gyL8VC9dbrGjVgTyc6Dj5SIpxJiQMKcW8qeCpMn9M4WXNkXpspIoSS8jzrvs6NPXbscwpEQg3ot87IMGjPV6Q-gNTRi17fHJCk2onxCdkUmrC921548ds6j3nNX-jlZv6tLv8YtrCitUsR3QfirEzj32gOpYLag3_FuQzBzZ8SKyR0b_Damk6v1ICcAO0abpnCX_mxSTlyhJ96YOUvNoyvN0tQtoWWZbT1vUqTMDfIOZaW349lS-XpNEEFKWKNIfg3L5cKhDMRlhr1tZxftyCPZOY3UzO_rxEtW_RsxpnbTE1jvBhHEP4L7To3fwkZ6FgTQBUSdEKCB_HyfUO5VNEbdByGUJLbV5tUdM4SrJnEpklnEWvLM7_T8HLclTMlOkKdJS_sp7XjN9WTdqfdXq9oCEnxTe2dvN_aV\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLNDRXen4BuZyGukbu2KX4jFFQMGj6gLI1GQzHXvlSFYrd_nJn9KzG7o5Zs6UzzWNwnZczqiXBIv4EoPxvlvlXbpvZorFaZHxxtXYebG0bbvRzoxyTZI-zEA-rKeWWFBjFAW_2dJScm4LJ7fnFbIy68yVNioYqVNLvTZIPq7YqStKyoWN84zDOcWt_FS2o3dd5QMIWa4oJ8i1El82LcidQ-VyaK5pdEjI7c4h1PC_ST7Y1bOfzKGorukZyaWVrKWkd63U67hZQ4MZWd8WWga1K_WmTIRaWCHu91PIgfAS8DH2ui7j0AB-NDmHYj72ypSWru40_QEkmoZ4TBIMAgB5E888SJQGGTLw8fZCynXSlru6xZ1r7ns6o12VgoVR8RRbhZ5GrgK5HAoqzQdBn6vtujQWRoPwA1AQjV3UndX_wFWO4H-zdi4_rfpXlTGK6CmzxqnWhFK2la6nI2fG5dg-OCELd5FWWB2iGYxf0n8y5nmHptQHmn6O0V477HajCzA3O-KiqzaVh7uccGrbgkAJBJs7KbeKWfb8hBUU0usYwmjMs5xMVYNwCvhYqP6r6WLYnvguxcCrIPD0i4OzWE3NkV6PWIsAR6Dn4e93XKBhU4eiYEuFfo9xCfUYt4GjhO_bz6CHvpHjLzXzObmen9dHBHe1tgTJ4yCEUCbmtanB0lCdb2N32zHztg36UKHLtSGesmcqivN5XPVBbEpiN5ihnDqlBiHgTlu8Li13h8pYYuWuZH-aZcKtEMfsVvp5NTEaHIM0DiAbwWacYgJjdcCudaa-TMPxei7FmHhkeDzCP_jRioIAwhOSz58HdEv7H3z-dRiF0LTyzcQYHHwns4lB6tW74Jp3hKxT9rQISiVhzltvBM0pjDmA2G7DJVRdJ46y3rBGiVLsIAbo-UvxqHLyzbq9wexcFz2IyDroVsuVcIMfytuV3xPnMf6O3TiPZKEcHRDKBIjf9p6KSLMLglc8Mrcus0fsRyuJ_LlydtxrA3uFiGTYQlPcDDDx_VEG9Nuu_CN\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"28887\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n\r\ntitle Diagramme de conteneurs - Syst\u00e8me de gestion d'entrep\u00f4t\r\n\r\nPerson(staff, \"Personnel d'entrep\u00f4t\", \"Pr\u00e9pare, emballe et exp\u00e9die les commandes\")\r\nPerson(manager, \"Responsable d'entrep\u00f4t\", \"Supervise les op\u00e9rations et l'analyse\")\r\nPerson(logistics, \"\u00c9quipe logistique\", \"G\u00e8re les exp\u00e9ditions entrantes et sortantes\")\r\n\r\nSystem_Boundary(wms, \"Syst\u00e8me de gestion d'entrep\u00f4t\") {\r\n    Container(webapp, \"Application Web\", \"React\", \"Fournit une interface utilisateur pour le personnel d'entrep\u00f4t\")\r\n    Container(api, \"API REST\", \"Spring Boot\", \"G\u00e8re la logique m\u00e9tier et l'orchestration\")\r\n    Container(storage, \"Service d'optimisation du stockage\", \"Spring Boot\", \"G\u00e8re le placement et la r\u00e9cup\u00e9ration des articles\")\r\n    Container(analytics, \"Service d'analyse\", \"Python\", \"G\u00e9n\u00e8re des rapports et des analyses\")\r\n    ContainerDb(db, \"Base de donn\u00e9es d'inventaire\", \"PostgreSQL\", \"Stocke l'inventaire, les commandes et les emplacements\")\r\n    ContainerDb(cache, \"Cache Redis\", \"Redis\", \"Met en cache les donn\u00e9es fr\u00e9quemment utilis\u00e9es\")\r\n}\r\n\r\nSystem_Ext(erp, \"Syst\u00e8me ERP\", \"G\u00e8re les finances et les achats\")\r\nSystem_Ext(oms, \"Syst\u00e8me de gestion des commandes\", \"G\u00e8re le cycle de vie des commandes\")\r\n\r\nRel(staff, webapp, \"Utilise\")\r\nRel(manager, webapp, \"Utilise\")\r\nRel(logistics, webapp, \"Utilise\")\r\n\r\nRel(webapp, api, \"Appelle\", \"REST\")\r\nRel(api, storage, \"Appelle\", \"gRPC\")\r\nRel(api, analytics, \"Appelle\", \"REST\")\r\nRel(api, db, \"Lit\/\u00c9crit\", \"JDBC\")\r\nRel(api, cache, \"Lit\/\u00c9crit\", \"Protocole Redis\")\r\n\r\nRel(api, erp, \"Synchronise les donn\u00e9es\", \"REST\")\r\nRel(api, oms, \"Met \u00e0 jour le statut de la commande\", \"REST\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLNDRXen4BuZyGukbu2KX4jFFQMGj6gLI1GQzHXvlSFYrd_nJn9KzG7o5Zs6UzzWNwnZczqiXBIv4EoPxvlvlXbpvZorFaZHxxtXYebG0bbvRzoxyTZI-zEA-rKeWWFBjFAW_2dJScm4LJ7fnFbIy68yVNioYqVNLvTZIPq7YqStKyoWN84zDOcWt_FS2o3dd5QMIWa4oJ8i1El82LcidQ-VyaK5pdEjI7c4h1PC_ST7Y1bOfzKGorukZyaWVrKWkd63U67hZQ4MZWd8WWga1K_WmTIRaWCHu91PIgfAS8DH2ui7j0AB-NDmHYj72ypSWru40_QEkmoZ4TBIMAgB5E888SJQGGTLw8fZCynXSlru6xZ1r7ns6o12VgoVR8RRbhZ5GrgK5HAoqzQdBn6vtujQWRoPwA1AQjV3UndX_wFWO4H-zdi4_rfpXlTGK6CmzxqnWhFK2la6nI2fG5dg-OCELd5FWWB2iGYxf0n8y5nmHptQHmn6O0V477HajCzA3O-KiqzaVh7uccGrbgkAJBJs7KbeKWfb8hBUU0usYwmjMs5xMVYNwCvhYqP6r6WLYnvguxcCrIPD0i4OzWE3NkV6PWIsAR6Dn4e93XKBhU4eiYEuFfo9xCfUYt4GjhO_bz6CHvpHjLzXzObmen9dHBHe1tgTJ4yCEUCbmtanB0lCdb2N32zHztg36UKHLtSGesmcqivN5XPVBbEpiN5ihnDqlBiHgTlu8Li13h8pYYuWuZH-aZcKtEMfsVvp5NTEaHIM0DiAbwWacYgJjdcCudaa-TMPxei7FmHhkeDzCP_jRioIAwhOSz58HdEv7H3z-dRiF0LTyzcQYHHwns4lB6tW74Jp3hKxT9rQISiVhzltvBM0pjDmA2G7DJVRdJ46y3rBGiVLsIAbo-UvxqHLyzbq9wexcFz2IyDroVsuVcIMfytuV3xPnMf6O3TiPZKEcHRDKBIjf9p6KSLMLglc8Mrcus0fsRyuJ_LlydtxrA3uFiGTYQlPcDDDx_VEG9Nuu_CN\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLJ1RXen4BqZyGzJJaHAmgMddf90rAPA50f5EKPUxx1OzThks0lTLlttZktiiYYK2sOyysRclMTkV10KcbgFHn-KaRef4NOXEFzfDYDnkAvKs3L5uv6aDG5Dk9QsdZajJ2owyg7KgfZDFrujOsZpz3YhXGz877gTSuLG1kdQfGRZKL118_HnM2XHaQZX2bu4uSvo7tWIHbHOSojOjmnLny8bahTcoiDkjvSmEMQlOsJ2eQMIF_mbE96-X2d1xvJpOAdasib5Zr4dV3f1oJqfuZplEGsH2nsI2CeQdz0uGxT1oI6KjfNoCSPrZzqPlgEe8r86zQ1COHjJpcmJqY4D5lTBKEDHtlBrBju9QgU7sfyPRa38v0B-Z4V0dvx9wG4BuLoimm9kdTDAfk7Z82iKCYIEoEvLoIDj7c1h2GvzZqHi7ESKLJWLw-_Nt-5s-H0XrewKgU3EseJuXQdH3CWEuGBl8L8Y4s6Mv0vzo1o-X_R14gyL8VC9dbrGjVgTyc6Dj5SIpxJiQMKcW8qeCpMn9M4WXNkXpspIoSS8jzrvs6NPXbscwpEQg3ot87IMGjPV6Q-gNTRi17fHJCk2onxCdkUmrC921548ds6j3nNX-jlZv6tLv8YtrCitUsR3QfirEzj32gOpYLag3_FuQzBzZ8SKyR0b_Damk6v1ICcAO0abpnCX_mxSTlyhJ96YOUvNoyvN0tQtoWWZbT1vUqTMDfIOZaW349lS-XpNEEFKWKNIfg3L5cKhDMRlhr1tZxftyCPZOY3UzO_rxEtW_RsxpnbTE1jvBhHEP4L7To3fwkZ6FgTQBUSdEKCB_HyfUO5VNEbdByGUJLbV5tUdM4SrJnEpklnEWvLM7_T8HLclTMlOkKdJS_sp7XjN9WTdqfdXq9oCEnxTe2dvN_aV\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"28888\"><a data-nodeid=\"29730\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLJ1RXen4BqZyGzJJaHAmgMddf90rAPA50f5EKPUxx1OzThks0lTLlttZktiiYYK2sOyysRclMTkV10KcbgFHn-KaRef4NOXEFzfDYDnkAvKs3L5uv6aDG5Dk9QsdZajJ2owyg7KgfZDFrujOsZpz3YhXGz877gTSuLG1kdQfGRZKL118_HnM2XHaQZX2bu4uSvo7tWIHbHOSojOjmnLny8bahTcoiDkjvSmEMQlOsJ2eQMIF_mbE96-X2d1xvJpOAdasib5Zr4dV3f1oJqfuZplEGsH2nsI2CeQdz0uGxT1oI6KjfNoCSPrZzqPlgEe8r86zQ1COHjJpcmJqY4D5lTBKEDHtlBrBju9QgU7sfyPRa38v0B-Z4V0dvx9wG4BuLoimm9kdTDAfk7Z82iKCYIEoEvLoIDj7c1h2GvzZqHi7ESKLJWLw-_Nt-5s-H0XrewKgU3EseJuXQdH3CWEuGBl8L8Y4s6Mv0vzo1o-X_R14gyL8VC9dbrGjVgTyc6Dj5SIpxJiQMKcW8qeCpMn9M4WXNkXpspIoSS8jzrvs6NPXbscwpEQg3ot87IMGjPV6Q-gNTRi17fHJCk2onxCdkUmrC921548ds6j3nNX-jlZv6tLv8YtrCitUsR3QfirEzj32gOpYLag3_FuQzBzZ8SKyR0b_Damk6v1ICcAO0abpnCX_mxSTlyhJ96YOUvNoyvN0tQtoWWZbT1vUqTMDfIOZaW349lS-XpNEEFKWKNIfg3L5cKhDMRlhr1tZxftyCPZOY3UzO_rxEtW_RsxpnbTE1jvBhHEP4L7To3fwkZ6FgTQBUSdEKCB_HyfUO5VNEbdByGUJLbV5tUdM4SrJnEpklnEWvLM7_T8HLclTMlOkKdJS_sp7XjN9WTdqfdXq9oCEnxTe2dvN_aV\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h4 data-nodeid=\"28889\">Exemple de diagramme de composants (PlantUML)<\/h4>\n<p data-nodeid=\"28890\"><img alt=\"\" data-nodeid=\"29733\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc8d80b6a9.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPDDRnen48RlIFo7AIUGIhZqr5DIe5Aae4PiK8vey4uMArxRjMT9ITN_tl5-a1MqS5gFvtqVpmUtaJ5mLPhXu9EsobGvmPxPnw-pMS2tcqBpljfLaO9obidoZNBbp1kqIJIDd1kzcys_J1zJQBDwc9KOcOA4jdDNUcUJnjU0uO0r6u9J71OQYu0bJ25Z5x0W-E5Pb_eTMJiB6OM3LfIKSw6ZjXIstrnbSmp7SMmads5qJJoQmE_X0EHtmexHeZb67NlIkpO4Iri8PYHNTUYT8cYc4afte3AzsIDBVJO2sXnSGvGaQOcg4qQJSroK1F6xJpQPVCCSZQeC2ZfnkbD7ohNOH2cXGRoHBlOCBovSOxm4-bcHLSSEzBqBd1eXDqy1rMkBEP1nIlEnXdZdvGb1ZfVMWRmXg-C-aSLatJ_ttLVIrqAg22IZKQ_Q5i115mM5fX8q53XsW3FCOZUMzzIZ4wk7zXCMoBZ3UF7wBhTnRbS157fKRH5_qjfaHrd6Shly9KFtEZr-cJt1tUCzZ9zNsQHjluadXzYKKxVRUGeD9FaD1sioZKjlVzQfov5xy-zsebOcOIqxATfbs4IAbvVzAVuxezUZDM4UPyyoj8_4nhsNjF4vzkvxWFyddGty2d8uk2MRov_xBm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLHBRXf14DqZpHqwR0nIy6oooienM54a8racLfQewIb39VrBVqX8b0Fa5bcQSyp5Kjqpm02nmugfhdgVwZTpvGDt8IfPz5wX5Z9Mm5OXMF-sB1t_Thd4i8gBwC49emFeS2cCAgtaEWsDVAWaBihncz5TAZrCRql5VG17fVdOA6jqch6PeEW531BO1FdISQM04Pb8JPvcFHkn6RWr2gfV61jGeUS1ZMPLP3uOyOKl8Q6CIGb73Mv-RQAkkDiCwDZHwMlM_pz4VyX-5Zr6lxt00TTSRZnw0fYQ0D7HV5E3er4wVzUM9NYcJ5K_fJzaH9cu1aLWzE0PBHL5Ee70MY5fXD7cHExg3qyrUFoH38ov557oHWGmSYfbijCYzlSjZOGA2SsJnKoL60nM_bY3DOJrClcZWwyHjDXqLmZiqTNRN3zHC8j8P9ojCO0dPv2VhB6at66ejqS2pkaSM0aQ_IgfEQOaHcwjCsjChdIZbrhUrq-kjLnl2LMB5Qqek-OIN6XkuP_JBVs9YCbY88t8yI3uQ-upVKLJzJQ1NO0wB6plELtfeUxFBflM8BZbebr29tL5xrTAxsn3xuUQttodr5bCWRhxmEvlPX_PuDDqDimHinPalb_c3ulP8UskqrEmwgtB1lAAYzuzo0Qqa-S9AAvfF6fWfw_4KI3oy7wkJUD3G4dHFJ_l1kRPfiv-Rp6KzMz1uTYrDGoTbYcjh_x3FfEzNK-7vUN6aq0zIrpqha1Nz3dw2m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"28891\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\ntitle Diagramme de composants - Service d'optimisation du stockage\r\n\r\nContainer_Boundary(storage, \"Service d'optimisation du stockage\") {\r\n    Component(analysis, \"Moteur d'analyse du stockage\", \"Analyse les mod\u00e8les de mouvement des articles et optimise le placement\")\r\n    Component(size, \"Calculateur de taille d'article\", \"Calcule les dimensions et le poids des articles pour le placement\")\r\n    Component(frequency, \"Service de fr\u00e9quence d'article\", \"Suit la vitesse et la popularit\u00e9 des articles\")\r\n    Component(replenishment, \"Service de r\u00e9approvisionnement\", \"G\u00e8re les d\u00e9clencheurs et alertes de r\u00e9approvisionnement\")\r\n    \r\n    ComponentDb(location, \"Base de donn\u00e9es d'emplacement\", \"Suit les emplacements des articles et la capacit\u00e9 de stockage\")\r\n}\r\n\r\nSystem_Ext(api, \"API REST (WMS)\", \"Appelle le service de stockage pour les op\u00e9rations\")\r\n\r\nRel(api, analysis, \"Demande une optimisation du placement\")\r\nRel(analysis, size, \"Utilise\")\r\nRel(analysis, frequency, \"Utilise\")\r\nRel(analysis, location, \"Lit\/\u00c9crit\")\r\nRel(size, location, \"Met \u00e0 jour\")\r\nRel(frequency, location, \"Met \u00e0 jour\")\r\nRel(replenishment, location, \"Lit\/\u00c9crit\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLHBRXf14DqZpHqwR0nIy6oooienM54a8racLfQewIb39VrBVqX8b0Fa5bcQSyp5Kjqpm02nmugfhdgVwZTpvGDt8IfPz5wX5Z9Mm5OXMF-sB1t_Thd4i8gBwC49emFeS2cCAgtaEWsDVAWaBihncz5TAZrCRql5VG17fVdOA6jqch6PeEW531BO1FdISQM04Pb8JPvcFHkn6RWr2gfV61jGeUS1ZMPLP3uOyOKl8Q6CIGb73Mv-RQAkkDiCwDZHwMlM_pz4VyX-5Zr6lxt00TTSRZnw0fYQ0D7HV5E3er4wVzUM9NYcJ5K_fJzaH9cu1aLWzE0PBHL5Ee70MY5fXD7cHExg3qyrUFoH38ov557oHWGmSYfbijCYzlSjZOGA2SsJnKoL60nM_bY3DOJrClcZWwyHjDXqLmZiqTNRN3zHC8j8P9ojCO0dPv2VhB6at66ejqS2pkaSM0aQ_IgfEQOaHcwjCsjChdIZbrhUrq-kjLnl2LMB5Qqek-OIN6XkuP_JBVs9YCbY88t8yI3uQ-upVKLJzJQ1NO0wB6plELtfeUxFBflM8BZbebr29tL5xrTAxsn3xuUQttodr5bCWRhxmEvlPX_PuDDqDimHinPalb_c3ulP8UskqrEmwgtB1lAAYzuzo0Qqa-S9AAvfF6fWfw_4KI3oy7wkJUD3G4dHFJ_l1kRPfiv-Rp6KzMz1uTYrDGoTbYcjh_x3FfEzNK-7vUN6aq0zIrpqha1Nz3dw2m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPDDRnen48RlIFo7AIUGIhZqr5DIe5Aae4PiK8vey4uMArxRjMT9ITN_tl5-a1MqS5gFvtqVpmUtaJ5mLPhXu9EsobGvmPxPnw-pMS2tcqBpljfLaO9obidoZNBbp1kqIJIDd1kzcys_J1zJQBDwc9KOcOA4jdDNUcUJnjU0uO0r6u9J71OQYu0bJ25Z5x0W-E5Pb_eTMJiB6OM3LfIKSw6ZjXIstrnbSmp7SMmads5qJJoQmE_X0EHtmexHeZb67NlIkpO4Iri8PYHNTUYT8cYc4afte3AzsIDBVJO2sXnSGvGaQOcg4qQJSroK1F6xJpQPVCCSZQeC2ZfnkbD7ohNOH2cXGRoHBlOCBovSOxm4-bcHLSSEzBqBd1eXDqy1rMkBEP1nIlEnXdZdvGb1ZfVMWRmXg-C-aSLatJ_ttLVIrqAg22IZKQ_Q5i115mM5fX8q53XsW3FCOZUMzzIZ4wk7zXCMoBZ3UF7wBhTnRbS157fKRH5_qjfaHrd6Shly9KFtEZr-cJt1tUCzZ9zNsQHjluadXzYKKxVRUGeD9FaD1sioZKjlVzQfov5xy-zsebOcOIqxATfbs4IAbvVzAVuxezUZDM4UPyyoj8_4nhsNjF4vzkvxWFyddGty2d8uk2MRov_xBm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"28892\"><a data-nodeid=\"29736\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPDDRnen48RlIFo7AIUGIhZqr5DIe5Aae4PiK8vey4uMArxRjMT9ITN_tl5-a1MqS5gFvtqVpmUtaJ5mLPhXu9EsobGvmPxPnw-pMS2tcqBpljfLaO9obidoZNBbp1kqIJIDd1kzcys_J1zJQBDwc9KOcOA4jdDNUcUJnjU0uO0r6u9J71OQYu0bJ25Z5x0W-E5Pb_eTMJiB6OM3LfIKSw6ZjXIstrnbSmp7SMmads5qJJoQmE_X0EHtmexHeZb67NlIkpO4Iri8PYHNTUYT8cYc4afte3AzsIDBVJO2sXnSGvGaQOcg4qQJSroK1F6xJpQPVCCSZQeC2ZfnkbD7ohNOH2cXGRoHBlOCBovSOxm4-bcHLSSEzBqBd1eXDqy1rMkBEP1nIlEnXdZdvGb1ZfVMWRmXg-C-aSLatJ_ttLVIrqAg22IZKQ_Q5i115mM5fX8q53XsW3FCOZUMzzIZ4wk7zXCMoBZ3UF7wBhTnRbS157fKRH5_qjfaHrd6Shly9KFtEZr-cJt1tUCzZ9zNsQHjluadXzYKKxVRUGeD9FaD1sioZKjlVzQfov5xy-zsebOcOIqxATfbs4IAbvVzAVuxezUZDM4UPyyoj8_4nhsNjF4vzkvxWFyddGty2d8uk2MRov_xBm00\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h4 data-nodeid=\"28893\">Exemple de diagramme de d\u00e9ploiement (PlantUML)<\/h4>\n<p data-nodeid=\"28894\"><img alt=\"\" data-nodeid=\"29739\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc900ada9c.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLDZzem4BqZyH-cd7QbBaZTzjBJGbZrGsoR4heSqJYnWbKdjcm7H2l-UySEaB10o-OIUpplEVFc8m_MeN5L8RkTDw9CPPLnM3gdxSV1mE2wdmkth5XbkKbLwNZf-gag1bfYwK5trcLIi47q_YxsffzFaq61rd53fiMOQwasXGVfS4EtuuIJ79e360lC3HPm1tCqVAde9dZ24dCUZfCDaHKUsM0MtrJ6Rt1jtq9lE4yWaghAUhVmfzi1UbuwhdHAZiznrBYSSzCLao9Ts8gLt14W3dj8mluOUWuk6M4c2ZCO8IcHSjFRVTvmCZg5-oSYGL6KtDoiEKEjoN_E6GorfelH2LLwYYd7r7aZB1LfaO4g8RdltHxpRPjjQ_cFQ8rOeUEjS6l3rV4oJ7_nCbkWpGazgdSmh9o294KfoXm-6LNfyw5VObiLBRA4cnKtyFpaPNYCtb6DkFk-H9Fpywp7eg8MNhx7P0R3-8ldI2Xg-gwHKgxnUwdaAP5rob0zUe9w1T-r4uNuVSZHrSJRYraxJjSvZJBMP6kC3XdQo-cwG43zxPkppH3Lfb1gumHYAhBSyEJ7XEJEMDzyk5hnCRkfUxykfmBD1lRN_5Tb0jCaAZEs2Jg75KnvQ8Khb3oLxvm2AQPBtX8Xylks0e-I0X2rUSepOKc407gb3W4JcjTp1BxNbSDkIQ-j7tvJBWz38aoQq1lMS_eZRzgLkweSsMdrUJQBaxr3E6pgE48fWrC-zMEnvND888sTp0xcHkpelev7nvvDYCUETSYnKKwbIkuXUzucnxlSkZgARkU1Mfv-4dy1\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLBRjim4DqBo1rORv80jGqqxQQhn7RG3vpMjTncQP3KG2P2YGm_3eB21yWjkgptlO4krY6LHBKZnwbM4kVn3VdUpEZKEcgSB-H1yagKNFeCoC8vRT_t-uRUz7BX5fvv2uQhqa7fUbmLVIrf6JPrhSkaOFtXs-uaB7s_6FSBQXqON9gFG4jrMuHDEcOuI9nm4iX8qDpGeW22sR9gZJ010KUw9BsrhlfTXtAmJgYIP8SOCw2hFowGDBppBog38tfZNvFEK2gVaRFBj7DCVXua19zju59p1FwO31j86qnx9WMVMyzASBWXLTvsJRMsG3sfWvi4RIIIuSxgxjeB5CY0D-52V45D3XsCu3d9sNZmb2SyGvIQYXBCqGqmgdN0QurfQPJZ4bXdQsaAb3kogDOCJ5wjWLXCc9vqZZV9LytdFw_FA674aZhO9GL6g_L-AHZbLr1cSsfpfFXWbDVHta9O8DKl8W-hDL-0nCgWtga2htJj4U79_SvsbNQbMHQOvOBo1If8bWAhEr8Z7LRnCZZnG8kuy-4RB3ftqfFHcTP4cvPGBOBuaqzaUfxE0iSmTaOWJb6ICYS3fTosz4-9h5E6ve04NxKJA4PjPJYdK_oAreNoOlBLJgitFMwJBcCxB4QN6BLrdwgonCgoBpC36N6OX4aGMpE-jR9XU3fAoKHPbnj8lutHZeprpBl6aUTr7B6ZUkGWqs2BFPHeoOMc4edsqk0eB3Ds6quKPb9TXDXAm9KtjeLWzMHbhouSwnBQfOcXM9CIxoE6uHCREnCM9Od1_rCbRWaf6gAzTsY-whTLiagIASZ7GHJ7MXhw2Bb282pKBJ5LtiNpVvpD9kbzE8QQIiUP5PeneF9fcCCDwD74iN3zweuRuGBiysYm0NkurIPgOXJsZ9BDFSE61yeMOn6HdE8CmF_INm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"28895\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Diagramme de d\u00e9ploiement - Syst\u00e8me de gestion d'entrep\u00f4t\r\n\r\nDeployment_Node(aws, \"Cloud AWS\") {\r\n    Deployment_Node(vpc, \"VPC\") {\r\n        Deployment_Node(public_subnet, \"Sous-r\u00e9seau public\") {\r\n            Deployment_Node(lb, \"\u00c9quilibreur de charge\", \"AWS ALB\") {\r\n                Container(webapp, \"Application Web\", \"Application React h\u00e9berg\u00e9e sur S3\")\r\n            }\r\n        }\r\n        \r\n        Deployment_Node(private_subnet, \"Sous-r\u00e9seau priv\u00e9\") {\r\n            Deployment_Node(backend_asg, \"Groupe de mise \u00e0 l'\u00e9chelle automatique du backend\") {\r\n                Deployment_Node(backend_vm, \"Machine virtuelle du serveur backend\", \"EC2 - t3.large\") {\r\n                    Container(api, \"API REST\", \"Conteneur Spring Boot\")\r\n                    Container(storage, \"Optimisation du stockage\", \"Conteneur Spring Boot\")\r\n                }\r\n            }\r\n            \r\n            Deployment_Node(db_subnet, \"Sous-r\u00e9seau de base de donn\u00e9es\") {\r\n                Deployment_Node(db_cluster, \"Cluster de base de donn\u00e9es\", \"RDS PostgreSQL - db.r5.large\") {\n                    ContainerDb(master, \"Base de donn\u00e9es principale\")\n                    ContainerDb(standby, \"R\u00e9plique de secours\")\n                }\n                \n                Deployment_Node(cache_cluster, \"Cluster de cache\", \"ElastiCache Redis - cache.r5.large\") {\n                    ContainerDb(cache, \"Cache Redis\")\n                }\n            }\n        }\n    }\n}\n\nRel(webapp, lb, \"Serve\")\nRel(lb, api, \"Route\", \"HTTPS\")\nRel(api, storage, \"Appelle\", \"gRPC\")\nRel(api, master, \"Lit\/\u00c9crit\", \"JDBC\")\nRel(api, cache, \"Lit\/\u00c9crit\", \"Protocole Redis\")\nRel(master, standby, \"R\u00e9plique\")\n\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLBRjim4DqBo1rORv80jGqqxQQhn7RG3vpMjTncQP3KG2P2YGm_3eB21yWjkgptlO4krY6LHBKZnwbM4kVn3VdUpEZKEcgSB-H1yagKNFeCoC8vRT_t-uRUz7BX5fvv2uQhqa7fUbmLVIrf6JPrhSkaOFtXs-uaB7s_6FSBQXqON9gFG4jrMuHDEcOuI9nm4iX8qDpGeW22sR9gZJ010KUw9BsrhlfTXtAmJgYIP8SOCw2hFowGDBppBog38tfZNvFEK2gVaRFBj7DCVXua19zju59p1FwO31j86qnx9WMVMyzASBWXLTvsJRMsG3sfWvi4RIIIuSxgxjeB5CY0D-52V45D3XsCu3d9sNZmb2SyGvIQYXBCqGqmgdN0QurfQPJZ4bXdQsaAb3kogDOCJ5wjWLXCc9vqZZV9LytdFw_FA674aZhO9GL6g_L-AHZbLr1cSsfpfFXWbDVHta9O8DKl8W-hDL-0nCgWtga2htJj4U79_SvsbNQbMHQOvOBo1If8bWAhEr8Z7LRnCZZnG8kuy-4RB3ftqfFHcTP4cvPGBOBuaqzaUfxE0iSmTaOWJb6ICYS3fTosz4-9h5E6ve04NxKJA4PjPJYdK_oAreNoOlBLJgitFMwJBcCxB4QN6BLrdwgonCgoBpC36N6OX4aGMpE-jR9XU3fAoKHPbnj8lutHZeprpBl6aUTr7B6ZUkGWqs2BFPHeoOMc4edsqk0eB3Ds6quKPb9TXDXAm9KtjeLWzMHbhouSwnBQfOcXM9CIxoE6uHCREnCM9Od1_rCbRWaf6gAzTsY-whTLiagIASZ7GHJ7MXhw2Bb282pKBJ5LtiNpVvpD9kbzE8QQIiUP5PeneF9fcCCDwD74iN3zweuRuGBiysYm0NkurIPgOXJsZ9BDFSE61yeMOn6HdE8CmF_INm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLDZzem4BqZyH-cd7QbBaZTzjBJGbZrGsoR4heSqJYnWbKdjcm7H2l-UySEaB10o-OIUpplEVFc8m_MeN5L8RkTDw9CPPLnM3gdxSV1mE2wdmkth5XbkKbLwNZf-gag1bfYwK5trcLIi47q_YxsffzFaq61rd53fiMOQwasXGVfS4EtuuIJ79e360lC3HPm1tCqVAde9dZ24dCUZfCDaHKUsM0MtrJ6Rt1jtq9lE4yWaghAUhVmfzi1UbuwhdHAZiznrBYSSzCLao9Ts8gLt14W3dj8mluOUWuk6M4c2ZCO8IcHSjFRVTvmCZg5-oSYGL6KtDoiEKEjoN_E6GorfelH2LLwYYd7r7aZB1LfaO4g8RdltHxpRPjjQ_cFQ8rOeUEjS6l3rV4oJ7_nCbkWpGazgdSmh9o294KfoXm-6LNfyw5VObiLBRA4cnKtyFpaPNYCtb6DkFk-H9Fpywp7eg8MNhx7P0R3-8ldI2Xg-gwHKgxnUwdaAP5rob0zUe9w1T-r4uNuVSZHrSJRYraxJjSvZJBMP6kC3XdQo-cwG43zxPkppH3Lfb1gumHYAhBSyEJ7XEJEMDzyk5hnCRkfUxykfmBD1lRN_5Tb0jCaAZEs2Jg75KnvQ8Khb3oLxvm2AQPBtX8Xylks0e-I0X2rUSepOKc407gb3W4JcjTp1BxNbSDkIQ-j7tvJBWz38aoQq1lMS_eZRzgLkweSsMdrUJQBaxr3E6pgE48fWrC-zMEnvND888sTp0xcHkpelev7nvvDYCUETSYnKKwbIkuXUzucnxlSkZgARkU1Mfv-4dy1\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"28896\"><a data-nodeid=\"29742\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLDZzem4BqZyH-cd7QbBaZTzjBJGbZrGsoR4heSqJYnWbKdjcm7H2l-UySEaB10o-OIUpplEVFc8m_MeN5L8RkTDw9CPPLnM3gdxSV1mE2wdmkth5XbkKbLwNZf-gag1bfYwK5trcLIi47q_YxsffzFaq61rd53fiMOQwasXGVfS4EtuuIJ79e360lC3HPm1tCqVAde9dZ24dCUZfCDaHKUsM0MtrJ6Rt1jtq9lE4yWaghAUhVmfzi1UbuwhdHAZiznrBYSSzCLao9Ts8gLt14W3dj8mluOUWuk6M4c2ZCO8IcHSjFRVTvmCZg5-oSYGL6KtDoiEKEjoN_E6GorfelH2LLwYYd7r7aZB1LfaO4g8RdltHxpRPjjQ_cFQ8rOeUEjS6l3rV4oJ7_nCbkWpGazgdSmh9o294KfoXm-6LNfyw5VObiLBRA4cnKtyFpaPNYCtb6DkFk-H9Fpywp7eg8MNhx7P0R3-8ldI2Xg-gwHKgxnUwdaAP5rob0zUe9w1T-r4uNuVSZHrSJRYraxJjSvZJBMP6kC3XdQo-cwG43zxPkppH3Lfb1gumHYAhBSyEJ7XEJEMDzyk5hnCRkfUxykfmBD1lRN_5Tb0jCaAZEs2Jg75KnvQ8Khb3oLxvm2AQPBtX8Xylks0e-I0X2rUSepOKc407gb3W4JcjTp1BxNbSDkIQ-j7tvJBWz38aoQq1lMS_eZRzgLkweSsMdrUJQBaxr3E6pgE48fWrC-zMEnvND888sTp0xcHkpelev7nvvDYCUETSYnKKwbIkuXUzucnxlSkZgARkU1Mfv-4dy1\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<hr data-nodeid=\"28897\"\/>\n<h3 data-nodeid=\"28898\">\u00c9tape 3 : Affiner et enrichir les relations<\/h3>\n<p data-nodeid=\"28899\"><strong data-nodeid=\"29748\">Objectif<\/strong>: Transformer le mod\u00e8le C4 initial en une architecture pr\u00e9cise et maintenable avec des relations appropri\u00e9es.<\/p>\n<p data-nodeid=\"28900\"><strong data-nodeid=\"29753\">Mod\u00e8les de relations cl\u00e9s<\/strong>:<\/p>\n<table data-nodeid=\"28902\">\n<thead data-nodeid=\"28903\">\n<tr data-nodeid=\"28904\">\n<th data-nodeid=\"28906\"><strong data-nodeid=\"29757\">Relation<\/strong><\/th>\n<th data-nodeid=\"28907\"><strong data-nodeid=\"29761\">Objectif<\/strong><\/th>\n<th data-nodeid=\"28908\"><strong data-nodeid=\"29765\">Exemple<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28912\">\n<tr data-nodeid=\"28913\">\n<td data-nodeid=\"28914\"><strong data-nodeid=\"29769\">\u00abinclure\u00bb<\/strong><\/td>\n<td data-nodeid=\"28915\">Comportement partag\u00e9 obligatoire r\u00e9utilis\u00e9 dans plusieurs cas d&#8217;utilisation<\/td>\n<td data-nodeid=\"28916\">\u00abR\u00e9server une table\u00bb inclut \u00abTraiter le paiement\u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"28917\">\n<td data-nodeid=\"28918\"><strong data-nodeid=\"29781\">\u00ab\u00e9tendre\u00bb<\/strong><\/td>\n<td data-nodeid=\"28919\">Comportement optionnel ou conditionnel<\/td>\n<td data-nodeid=\"28920\">\u00abAppliquer une r\u00e9duction\u00bb \u00e9tend \u00abR\u00e9server une table\u00bb lorsqu&#8217;un code promo est saisi<\/td>\n<\/tr>\n<tr data-nodeid=\"28921\">\n<td data-nodeid=\"28922\"><strong data-nodeid=\"29794\">G\u00e9n\u00e9ralisation<\/strong><\/td>\n<td data-nodeid=\"28923\">H\u00e9ritage entre acteurs ou cas d&#8217;utilisation<\/td>\n<td data-nodeid=\"28924\">\u00abAdministrateur\u00bb h\u00e9rite de \u00abUtilisateur\u00bb<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"28925\"><strong data-nodeid=\"29807\">Raffinements sugg\u00e9r\u00e9s par l&#8217;IA<\/strong>:<\/p>\n<ul data-nodeid=\"28926\">\n<li data-nodeid=\"28927\">\n<p data-nodeid=\"28928\"><strong data-nodeid=\"29812\">Extraction de points communs<\/strong>: Identifier les \u00e9tapes redondantes \u2192 sugg\u00e9rer des relations \u00abinclure\u00bb<\/p>\n<\/li>\n<li data-nodeid=\"28929\">\n<p data-nodeid=\"28930\"><strong data-nodeid=\"29821\">Branchement de la logique conditionnelle<\/strong>: D\u00e9tecter les sc\u00e9narios \u00absi-alors\u00bb \u2192 sugg\u00e9rer des relations \u00ab\u00e9tendre\u00bb<\/p>\n<\/li>\n<li data-nodeid=\"28931\">\n<p data-nodeid=\"28932\"><strong data-nodeid=\"29826\">G\u00e9n\u00e9ralisation des acteurs<\/strong>: Trouver des responsabilit\u00e9s chevauchantes \u2192 sugg\u00e9rer une hi\u00e9rarchie<\/p>\n<\/li>\n<li data-nodeid=\"28933\">\n<p data-nodeid=\"28934\"><strong data-nodeid=\"29831\">D\u00e9composition de la complexit\u00e9<\/strong>: Identifier les cas d&#8217;utilisation trop volumineux \u2192 les diviser en sous-diagrammes<\/p>\n<\/li>\n<\/ul>\n<blockquote data-nodeid=\"28935\">\n<p data-nodeid=\"28936\"><strong data-nodeid=\"29836\">Id\u00e9e cl\u00e9<\/strong>: L&#8217;IA supprime le travail m\u00e9canique de dessin des fl\u00e8ches et de rep\u00e9rage des motifs, tandis que votre connaissance du domaine garantit que les relations ont un sens r\u00e9el pour l&#8217;entreprise.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28937\">Exemple de diagramme de cas d&#8217;utilisation avec des relations affin\u00e9es<\/h4>\n<p data-nodeid=\"28938\"><img alt=\"\" data-nodeid=\"29839\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc924bda49.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLHDJzmm4Br7odyOvG8SThcZLGGiLU60X6YhNhWCzh1hrR4jsu6k4F-zOpjXLqRQvX2D9-_DnvjnBaD47yT1jqrKKHCyqeio9E5N85WZlsuKRZmEi83lTlG3nKSAv5yJahcZHnFXohcsQHjDBn6Y1QyssmXIUH9HMTCsAABrqDrmPDy11lx6rgV_7WrkfYz3iLEuH4UpuQAwAlMFNOWqTF3UDi3F64YaKhjhQ_y0mazyrfIZFREZmZnuMbWloSCzeSuevobxAkGQZI0D9IccJZ9QP7U5BIqSOiD1EmLSKQx6k2KJbS18IUxIFxBtIyLMK0ZmWBk12QNaOjSXdTCxdbWGTkInhEtefgBbvAi8jsWaw_iRUVOgbD1lq-6mw1EuCqAFai2JBkrjbGjmolr9v27kpWem2GxBPP_xW0jOhLGXzdq1p5eV1HM9ZqAAi4SXLKMJPFyjwWXk5kFRtqX6rbfObmwepuKrKXNxK9RLSlavXnoTSfY-VpAdd93JEsy72y9AgddpK6gUiH3JjlFYlABIoMJgHxe--Ox1Oj5Fjs1_tk_xtZTlzNJ_iczUthQvv7pya_W7\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLGxZjim4Eq5w0u3DTuKTlh0C7Q11RODd5nWJ8wzH2XIuIV98iXTKaPDBg6BPKXAblSZHnKrV6_UV7dh0xeGMrrNGGL7SA_mvB1j2II1G0zo5OFIocDGrW0UZyeCFQpXhkkq4iNAK4ViAJeq0HviT2s5FNbotwYkwaegHs92dZ2AHuBXDqXdLM00Ya3HGNC__3Na6aYgYa_ppSFG9zVvgaM3ftHPLyahcfCcQ3uz-J3yuR2VgpVmiww0Fqv5NYRIx8S-8nn4Gn3me2cxFrZxPO7oqGszi2q783EDa-xGPrRdo3gPedgJUMTCrAEKAyBv9dC56a5wWPaoPw8c_upeBqfHc4lACJoI2UgeafTpBxcgsGFozGBpiqFkJfA63XMrDDQ_mwTqNj9BO_4rble86xjnF8PUHd5EMIhFTujEfgGHs1Pu55SO0ckM3dtdk9BzCkyLx4cNoZ1Q6Q6ZJwvkx46h4mRB4-ZV5MpgC6mskvmyV83jDkCTxNO5C3NpAgXqxIgajESgv4L4Ost_6zGLt5lre1zSlR4UNJ8QqZnHxuKrKit_b_NPRZRdBcMPeMSVCkcO6u_AgpmPmd9pEsTR-v8yTUaLcTV_l759WYT4yP7vlyfRmPiFw_LktCJvVzwnsJRjplWePDkq5NLrowByjlq3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"28939\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\ntitre Diagramme de cas d'utilisation affin\u00e9 - Application de restaurant GourmetReserve\r\n\r\ndirection de gauche \u00e0 droite\r\nacteur \"D\u00eener\" as diner\r\nacteur \"G\u00e9rant\" as manager\r\n\r\nrectangle \"Syst\u00e8me GourmetReserve\" {\r\n    casdutilisation \"R\u00e9server une table\" as book\r\n    casdutilisation \"Pr\u00e9commander un repas\" as preorder\r\n    casdutilisation \"Annuler une r\u00e9servation\" as cancel\r\n    casdutilisation \"G\u00e9rer les r\u00e9servations\" as manage\r\n    \r\n    casdutilisation \"Authentifier l'utilisateur\" as auth\r\n    casdutilisation \"Traiter le paiement\" as payment\r\n    casdutilisation \"Appliquer un coupon de r\u00e9duction\" as discount\r\n    casdutilisation \"G\u00e9rer la liste d'attente\" as waitlist\r\n    \r\n    ' Relations d'inclusion (obligatoires)\r\n    book ..&gt; auth : &lt;&lt;inclure&gt;&gt;\r\n    preorder ..&gt; auth : &lt;&lt;inclure&gt;&gt;\r\n    cancel ..&gt; auth : &lt;&lt;inclure&gt;&gt;\r\n    manage ..&gt; auth : &lt;&lt;inclure&gt;&gt;\r\n    \r\n    book ..&gt; payment : &lt;&lt;inclure&gt;&gt;\r\n    preorder ..&gt; payment : &lt;&lt;inclure&gt;&gt;\r\n    \r\n    ' Relations d'extension (optionnelles\/conditionnelles)\r\n    book &lt;.. discount : &lt;&lt;\u00e9tendre&gt;&gt;n(saisir le code promo)\r\n    book &lt;.. waitlist : &lt;&lt;\u00e9tendre&gt;&gt;n(aucune table disponible)\r\n}\r\n\r\ndiner --&gt; book\r\ndiner --&gt; preorder\r\ndiner --&gt; cancel\r\nmanager --&gt; manage\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLGxZjim4Eq5w0u3DTuKTlh0C7Q11RODd5nWJ8wzH2XIuIV98iXTKaPDBg6BPKXAblSZHnKrV6_UV7dh0xeGMrrNGGL7SA_mvB1j2II1G0zo5OFIocDGrW0UZyeCFQpXhkkq4iNAK4ViAJeq0HviT2s5FNbotwYkwaegHs92dZ2AHuBXDqXdLM00Ya3HGNC__3Na6aYgYa_ppSFG9zVvgaM3ftHPLyahcfCcQ3uz-J3yuR2VgpVmiww0Fqv5NYRIx8S-8nn4Gn3me2cxFrZxPO7oqGszi2q783EDa-xGPrRdo3gPedgJUMTCrAEKAyBv9dC56a5wWPaoPw8c_upeBqfHc4lACJoI2UgeafTpBxcgsGFozGBpiqFkJfA63XMrDDQ_mwTqNj9BO_4rble86xjnF8PUHd5EMIhFTujEfgGHs1Pu55SO0ckM3dtdk9BzCkyLx4cNoZ1Q6Q6ZJwvkx46h4mRB4-ZV5MpgC6mskvmyV83jDkCTxNO5C3NpAgXqxIgajESgv4L4Ost_6zGLt5lre1zSlR4UNJ8QqZnHxuKrKit_b_NPRZRdBcMPeMSVCkcO6u_AgpmPmd9pEsTR-v8yTUaLcTV_l759WYT4yP7vlyfRmPiFw_LktCJvVzwnsJRjplWePDkq5NLrowByjlq3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLHDJzmm4Br7odyOvG8SThcZLGGiLU60X6YhNhWCzh1hrR4jsu6k4F-zOpjXLqRQvX2D9-_DnvjnBaD47yT1jqrKKHCyqeio9E5N85WZlsuKRZmEi83lTlG3nKSAv5yJahcZHnFXohcsQHjDBn6Y1QyssmXIUH9HMTCsAABrqDrmPDy11lx6rgV_7WrkfYz3iLEuH4UpuQAwAlMFNOWqTF3UDi3F64YaKhjhQ_y0mazyrfIZFREZmZnuMbWloSCzeSuevobxAkGQZI0D9IccJZ9QP7U5BIqSOiD1EmLSKQx6k2KJbS18IUxIFxBtIyLMK0ZmWBk12QNaOjSXdTCxdbWGTkInhEtefgBbvAi8jsWaw_iRUVOgbD1lq-6mw1EuCqAFai2JBkrjbGjmolr9v27kpWem2GxBPP_xW0jOhLGXzdq1p5eV1HM9ZqAAi4SXLKMJPFyjwWXk5kFRtqX6rbfObmwepuKrKXNxK9RLSlavXnoTSfY-VpAdd93JEsy72y9AgddpK6gUiH3JjlFYlABIoMJgHxe--Ox1Oj5Fjs1_tk_xtZTlzNJ_iczUthQvv7pya_W7\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"28940\"><a data-nodeid=\"29842\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLHDJzmm4Br7odyOvG8SThcZLGGiLU60X6YhNhWCzh1hrR4jsu6k4F-zOpjXLqRQvX2D9-_DnvjnBaD47yT1jqrKKHCyqeio9E5N85WZlsuKRZmEi83lTlG3nKSAv5yJahcZHnFXohcsQHjDBn6Y1QyssmXIUH9HMTCsAABrqDrmPDy11lx6rgV_7WrkfYz3iLEuH4UpuQAwAlMFNOWqTF3UDi3F64YaKhjhQ_y0mazyrfIZFREZmZnuMbWloSCzeSuevobxAkGQZI0D9IccJZ9QP7U5BIqSOiD1EmLSKQx6k2KJbS18IUxIFxBtIyLMK0ZmWBk12QNaOjSXdTCxdbWGTkInhEtefgBbvAi8jsWaw_iRUVOgbD1lq-6mw1EuCqAFai2JBkrjbGjmolr9v27kpWem2GxBPP_xW0jOhLGXzdq1p5eV1HM9ZqAAi4SXLKMJPFyjwWXk5kFRtqX6rbfObmwepuKrKXNxK9RLSlavXnoTSfY-VpAdd93JEsy72y9AgddpK6gUiH3JjlFYlABIoMJgHxe--Ox1Oj5Fjs1_tk_xtZTlzNJ_iczUthQvv7pya_W7\">Modifier PlantUML dans VPasCode<\/a><\/p>\n<hr data-nodeid=\"28941\"\/>\n<h3 data-nodeid=\"28942\">\u00c9tape 4 : OpenDocs \u2013 Le hub de documentation vivant<\/h3>\n<p data-nodeid=\"28943\"><strong data-nodeid=\"29848\">Objectif<\/strong>: Compilez et publiez une documentation vivante o\u00f9 les diagrammes se mettent \u00e0 jour automatiquement lorsque les mod\u00e8les sources changent.<\/p>\n<p data-nodeid=\"28944\"><strong data-nodeid=\"29853\">Flux de travail<\/strong>:<\/p>\n<ol data-nodeid=\"28945\">\n<li data-nodeid=\"28946\">\n<p data-nodeid=\"28947\"><strong data-nodeid=\"29858\">Ouvrez votre manuel technique<\/strong> dans l&#8217;\u00e9diteur de documents OpenDocs<\/p>\n<\/li>\n<li data-nodeid=\"28948\">\n<p data-nodeid=\"28949\"><strong data-nodeid=\"29863\">Positionnez le curseur<\/strong> au point d&#8217;insertion souhait\u00e9<\/p>\n<\/li>\n<li data-nodeid=\"28950\">\n<p data-nodeid=\"28951\"><strong data-nodeid=\"29868\">Ins\u00e9rer un artefact de pipeline<\/strong>:<\/p>\n<ul data-nodeid=\"28952\">\n<li data-nodeid=\"28953\">\n<p data-nodeid=\"28954\">Barre d&#8217;outils \u2192 <strong data-nodeid=\"29878\">Ins\u00e9rer<\/strong> \u2192 <strong data-nodeid=\"29879\">Pipeline<\/strong> (barre lat\u00e9rale gauche)<\/p>\n<\/li>\n<li data-nodeid=\"28955\">\n<p data-nodeid=\"28956\">Parcourez la collection partag\u00e9e de l&#8217;\u00e9quipe<\/p>\n<\/li>\n<li data-nodeid=\"28957\">\n<p data-nodeid=\"28958\">Filtrez par commentaire, date ou plateforme source<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28959\">\n<p data-nodeid=\"28960\"><strong data-nodeid=\"29886\">Rendu en ligne<\/strong>: Le diagramme appara\u00eet instantan\u00e9ment en pleine r\u00e9solution avec des capacit\u00e9s interactives<\/p>\n<\/li>\n<li data-nodeid=\"28961\">\n<p data-nodeid=\"28962\"><strong data-nodeid=\"29891\">R\u00e9digez le contexte environnant<\/strong> en utilisant Markdown avec un aper\u00e7u en direct :<\/p>\n<ul data-nodeid=\"28963\">\n<li data-nodeid=\"28964\">\n<p data-nodeid=\"28965\">\u00c9dition de texte enrichi<\/p>\n<\/li>\n<li data-nodeid=\"28966\">\n<p data-nodeid=\"28967\">Tableaux, blocs de code, dossiers hi\u00e9rarchiques<\/p>\n<\/li>\n<li data-nodeid=\"28968\">\n<p data-nodeid=\"28969\">Le tout tout en gardant les diagrammes interactifs<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28970\">\n<p data-nodeid=\"28971\"><strong data-nodeid=\"29899\">G\u00e9rer les mises \u00e0 jour<\/strong>:<\/p>\n<ul data-nodeid=\"28972\">\n<li data-nodeid=\"28973\">\n<p data-nodeid=\"28974\">Un indicateur flottant <strong data-nodeid=\"29905\">Indicateur de r\u00e9vision (\ud83d\udd04)<\/strong> appara\u00eet \u00e0 c\u00f4t\u00e9 des diagrammes int\u00e9gr\u00e9s lorsqu&#8217;il existe des versions de pipeline plus r\u00e9centes<\/p>\n<\/li>\n<li data-nodeid=\"28975\">\n<p data-nodeid=\"28976\">Cliquez sur l&#8217;indicateur pour afficher les horodatages chronologiques, les notes de commit et la plateforme source c\u00f4te \u00e0 c\u00f4te<\/p>\n<\/li>\n<li data-nodeid=\"28977\">\n<p data-nodeid=\"28978\">\u00c9changez les versions pour mettre \u00e0 jour votre document ma\u00eetre instantan\u00e9ment<\/p>\n<\/li>\n<li data-nodeid=\"28979\">\n<p data-nodeid=\"28980\">Les versions pr\u00e9c\u00e9dentes restent accessibles pour les pistes d&#8217;audit ou les sc\u00e9narios de retour en arri\u00e8re<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<blockquote data-nodeid=\"28981\">\n<p data-nodeid=\"28982\"><strong data-nodeid=\"29913\">\ud83d\udca1 Concept cl\u00e9<\/strong>: Contrairement aux plateformes de texte standard o\u00f9 les images sont des instantan\u00e9s statiques, les visuels int\u00e9gr\u00e9s dans OpenDocs restent des vecteurs en direct. Les utilisateurs peuvent cliquer directement sur l&#8217;\u00e9l\u00e9ment dans le document pour ouvrir le mod\u00e8le source et le mettre \u00e0 jour.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28983\">Exemple de structure de contenu OpenDocs<\/h4>\n<pre class=\"lang-text\" data-nodeid=\"28984\"><code data-language=\"text\">\ud83d\udcc1 Documentation du projet\r\n\u251c\u2500\u2500 \ud83d\udcc4 01 - R\u00e9sum\u00e9 ex\u00e9cutif\r\n\u2502   \u2514\u2500\u2500 [R\u00e9sum\u00e9 des parties prenantes g\u00e9n\u00e9r\u00e9 par IA avec diagramme de contexte du syst\u00e8me]\r\n\u251c\u2500\u2500 \ud83d\udcc4 02 - Aper\u00e7u de l'architecture\r\n\u2502   \u251c\u2500\u2500 [Diagramme de contexte C4 - En direct]\r\n\u2502   \u251c\u2500\u2500 [Diagramme de conteneurs C4 - En direct]\r\n\u2502   \u2514\u2500\u2500 D\u00e9cisions sur la pile technologique\r\n\u251c\u2500\u2500 \ud83d\udcc4 03 - Conception d\u00e9taill\u00e9e\r\n\u2502   \u251c\u2500\u2500 [Diagrammes de composants - En direct]\r\n\u2502   \u251c\u2500\u2500 [Diagrammes de s\u00e9quence - En direct]\r\n\u2502   \u2514\u2500\u2500 Sp\u00e9cifications des API\r\n\u251c\u2500\u2500 \ud83d\udcc4 04 - Architecture de d\u00e9ploiement\r\n\u2502   \u251c\u2500\u2500 [Diagramme de d\u00e9ploiement - En direct]\r\n\u2502   \u2514\u2500\u2500 Exigences d'infrastructure\r\n\u2514\u2500\u2500 \ud83d\udcc4 05 - Assurance qualit\u00e9\r\n    \u251c\u2500\u2500 [Cas de test g\u00e9n\u00e9r\u00e9s par l'IA]\r\n    \u2514\u2500\u2500 M\u00e9triques de couverture\r\n<\/code><\/pre>\n<hr data-nodeid=\"28985\"\/>\n<h3 data-nodeid=\"28986\">\u00c9tape 5 : Assurance qualit\u00e9 et tests<\/h3>\n<p data-nodeid=\"28987\"><strong data-nodeid=\"29920\">Objectif<\/strong>: G\u00e9n\u00e9rer automatiquement des cas de test tra\u00e7ables \u00e0 partir de vos mod\u00e8les.<\/p>\n<p data-nodeid=\"28988\"><strong data-nodeid=\"29925\">Actifs de test g\u00e9n\u00e9r\u00e9s par l&#8217;IA<\/strong>:<\/p>\n<table data-nodeid=\"28990\">\n<thead data-nodeid=\"28991\">\n<tr data-nodeid=\"28992\">\n<th data-nodeid=\"28994\"><strong data-nodeid=\"29929\">Artefact de test<\/strong><\/th>\n<th data-nodeid=\"28995\"><strong data-nodeid=\"29933\">Source<\/strong><\/th>\n<th data-nodeid=\"28996\"><strong data-nodeid=\"29937\">Exemple<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29000\">\n<tr data-nodeid=\"29001\">\n<td data-nodeid=\"29002\">Cas de test<\/td>\n<td data-nodeid=\"29003\">Sp\u00e9cifications des cas d&#8217;utilisation, tableaux de d\u00e9cision, diagrammes d&#8217;activit\u00e9\/s\u00e9quence<\/td>\n<td data-nodeid=\"29004\">TC-001 \u2013 Chemin heureux, TC-002 \u2013 \u00c9chec du paiement<\/td>\n<\/tr>\n<tr data-nodeid=\"29005\">\n<td data-nodeid=\"29006\">Pr\u00e9conditions<\/td>\n<td data-nodeid=\"29007\">Flux de cas d&#8217;utilisation<\/td>\n<td data-nodeid=\"29008\">\u00ab Invit\u00e9 connect\u00e9, tables disponibles, groupe de 4 personnes \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"29009\">\n<td data-nodeid=\"29010\">Liens de tra\u00e7abilit\u00e9<\/td>\n<td data-nodeid=\"29011\">Des exigences aux \u00e9l\u00e9ments de conception, puis aux cas de test<\/td>\n<td data-nodeid=\"29012\">\u00ab Tra\u00e7abilit\u00e9 : \u00c9tapes 1 \u00e0 7 du flux principal, R\u00e8gle du tableau de d\u00e9cision R1 \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"29013\">\n<td data-nodeid=\"29014\">M\u00e9triques de couverture<\/td>\n<td data-nodeid=\"29015\">Tableau de bord du projet<\/td>\n<td data-nodeid=\"29016\">\u00ab 92 % des r\u00e8gles du tableau de d\u00e9cision test\u00e9es \u00bb<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29017\"><strong data-nodeid=\"29960\">Exemple de cas de test g\u00e9n\u00e9r\u00e9s par l&#8217;IA<\/strong>:<\/p>\n<pre class=\"lang-text\" data-nodeid=\"29018\"><code data-language=\"text\">TC-001 \u2013 Chemin heureux \u2013 Aucun acompte requis\r\nPriorit\u00e9 : \u00c9lev\u00e9e\r\nPr\u00e9conditions : Invit\u00e9 connect\u00e9 (fid\u00e9lit\u00e9 Or), tables disponibles, heures creuses, groupe de 4 personnes\r\n\u00c9tapes :\r\n  1. Rechercher des tables \u2192 s\u00e9lectionner un cr\u00e9neau\r\n  2. Consulter le r\u00e9sum\u00e9 (aucun acompte affich\u00e9)\r\n  3. Confirmer la r\u00e9servation\r\nR\u00e9sultat attendu : R\u00e9servation confirm\u00e9e, confirmation envoy\u00e9e, aucun \u00e9cran de paiement\r\nTra\u00e7abilit\u00e9 : \u00c9tapes 1 \u00e0 7 du flux principal, R\u00e8gle du tableau de d\u00e9cision R1\r\n\r\nTC-002 \u2013 Acompte requis \u2013 \u00c9chec du paiement\r\nPriorit\u00e9 : \u00c9lev\u00e9e\r\nPr\u00e9conditions : Groupe de 10 personnes, heures de pointe, non-Or, carte valide mais fonds insuffisants\r\n\u00c9tapes :\r\n  1. S\u00e9lectionner un cr\u00e9neau \u2192 passer au paiement\r\n  2. Saisir la carte \u2192 soumettre\r\nR\u00e9sultat attendu : Message d'erreur \u00ab Paiement refus\u00e9 \u00bb, r\u00e9servation non cr\u00e9\u00e9e, retour \u00e0 la s\u00e9lection du cr\u00e9neau\r\nTra\u00e7abilit\u00e9 : R\u00e8gle du tableau de d\u00e9cision R5, Flux d'exception 4b\r\n<\/code><\/pre>\n<hr data-nodeid=\"29019\"\/>\n<h3 data-nodeid=\"29020\">\u00c9tape 6 : Synchronisation et mises \u00e0 jour continues<\/h3>\n<p data-nodeid=\"29021\"><strong data-nodeid=\"29966\">Objectif<\/strong>: Maintenir une source de v\u00e9rit\u00e9 unique pour tous les artefacts.<\/p>\n<p data-nodeid=\"29022\"><strong data-nodeid=\"29974\">Le flux de travail en boucle ferm\u00e9e<\/strong>:<br \/>\n<img alt=\"\" data-nodeid=\"29973\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc99b3ad7d.png\"\/><\/p>\n<p data-nodeid=\"29023\"><strong data-nodeid=\"29979\">Avantages de la synchronisation bidirectionnelle<\/strong>:<\/p>\n<ul data-nodeid=\"29024\">\n<li data-nodeid=\"29025\">\n<p data-nodeid=\"29026\">Mettre \u00e0 jour une classe dans Desktop \u2192 se rafra\u00eechit automatiquement dans OpenDocs<\/p>\n<\/li>\n<li data-nodeid=\"29027\">\n<p data-nodeid=\"29028\">Affiner une invite dans le Chatbot \u2192 pousser les modifications vers Studios<\/p>\n<\/li>\n<li data-nodeid=\"29029\">\n<p data-nodeid=\"29030\">Synchronisation par compte unique<\/p>\n<\/li>\n<li data-nodeid=\"29031\">\n<p data-nodeid=\"29032\">Historique des versions et tra\u00e7abilit\u00e9 compl\u00e8te<\/p>\n<\/li>\n<li data-nodeid=\"29033\">\n<p data-nodeid=\"29034\">Z\u00e9ro retravail manuel<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"29035\"\/>\n<h2 data-nodeid=\"29036\">Partie 3 : Lignes directrices et meilleures pratiques<\/h2>\n<h3 data-nodeid=\"29037\">1. Meilleures pratiques pour les chatbots IA<\/h3>\n<p data-nodeid=\"29038\"><strong data-nodeid=\"29991\">Techniques d&#8217;\u00e9laboration d&#8217;invites efficaces<\/strong>:<\/p>\n<table data-nodeid=\"29040\">\n<thead data-nodeid=\"29041\">\n<tr data-nodeid=\"29042\">\n<th data-nodeid=\"29044\"><strong data-nodeid=\"29995\">\u00c0 faire<\/strong><\/th>\n<th data-nodeid=\"29045\"><strong data-nodeid=\"30001\">\u00c0 ne pas faire<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29048\">\n<tr data-nodeid=\"29049\">\n<td data-nodeid=\"29050\">Nommez clairement les participants d\u00e8s le d\u00e9but : \u00ab Utilisateur, Navigateur, AuthService \u00bb<\/td>\n<td data-nodeid=\"29051\">Demandes vagues comme \u00ab Cr\u00e9ez un diagramme de syst\u00e8me \u00bb<\/td>\n<\/tr>\n<tr data-nodeid=\"29052\">\n<td data-nodeid=\"29053\">Utilisez un langage de flux de contr\u00f4le : \u00ab si\u2026alors\u2026sinon \u00bb, \u00ab tant que \u00bb, \u00ab en parall\u00e8le \u00bb<\/td>\n<td data-nodeid=\"29054\">Ne supposez pas que l&#8217;IA conna\u00eet les couches architecturales que vous n&#8217;avez pas mentionn\u00e9es<\/td>\n<\/tr>\n<tr data-nodeid=\"29055\">\n<td data-nodeid=\"29056\">Sp\u00e9cifiez les couches architecturales : \u00ab Contr\u00f4leur \u2192 Service \u2192 Repository \u00bb<\/td>\n<td data-nodeid=\"29057\">M\u00e9langez plusieurs sc\u00e9narios non li\u00e9s dans une seule invite<\/td>\n<\/tr>\n<tr data-nodeid=\"29058\">\n<td data-nodeid=\"29059\">Demandez des annotations : \u00ab Ajoutez des notes pour les pr\u00e9conditions \u00bb<\/td>\n<td data-nodeid=\"29060\">Attendez une mise en page parfaite d\u00e8s la premi\u00e8re tentative<\/td>\n<\/tr>\n<tr data-nodeid=\"29061\">\n<td data-nodeid=\"29062\">Demandez des variantes : \u00ab Affichez le chemin d&#8217;\u00e9chec s\u00e9par\u00e9ment \u00bb<\/td>\n<td data-nodeid=\"29063\">Oubliez d&#8217;it\u00e9rer et d&#8217;affiner<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29064\"><strong data-nodeid=\"30044\">Commandes d&#8217;affinement it\u00e9ratif<\/strong>:<\/p>\n<pre class=\"lang-text\" data-nodeid=\"29065\"><code data-language=\"text\">\"Ajoutez une boucle de r\u00e9essai si la validation OTP \u00e9choue (maximum 3 tentatives)\"\r\n\"Ins\u00e9rez une \u00e9tape \u00e0 deux facteurs uniquement si l'utilisateur a activ\u00e9 la 2FA (utilisez un fragment opt)\"\r\n\"Affichez des messages parall\u00e8les : apr\u00e8s le succ\u00e8s du paiement, notifiez le client et mettez \u00e0 jour l'inventaire simultan\u00e9ment\"\r\n\"Modifiez la ligne de vie de PaymentGateway pour afficher un d\u00e9lai d'attente apr\u00e8s 30 secondes\"\r\n\"Ajoutez un auto-message sur OrderService pour calculer le total avant d'appeler PaymentGateway\"\r\n<\/code><\/pre>\n<h3 data-nodeid=\"29066\">2. Meilleures pratiques pour la mod\u00e9lisation C4<\/h3>\n<p data-nodeid=\"29067\"><strong data-nodeid=\"30050\">Directives sp\u00e9cifiques aux couches<\/strong>:<\/p>\n<table data-nodeid=\"29069\">\n<thead data-nodeid=\"29070\">\n<tr data-nodeid=\"29071\">\n<th data-nodeid=\"29073\"><strong data-nodeid=\"30054\">Couche<\/strong><\/th>\n<th data-nodeid=\"29074\"><strong data-nodeid=\"30058\">Meilleure pratique<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29077\">\n<tr data-nodeid=\"29078\">\n<td data-nodeid=\"29079\"><strong data-nodeid=\"30062\">Contexte<\/strong><\/td>\n<td data-nodeid=\"29080\">Afficher uniquement la limite du syst\u00e8me et les interactions externes imm\u00e9diates ; une seule bo\u00eete pour l&#8217;ensemble du syst\u00e8me<\/td>\n<\/tr>\n<tr data-nodeid=\"29081\">\n<td data-nodeid=\"29082\"><strong data-nodeid=\"30067\">Conteneur<\/strong><\/td>\n<td data-nodeid=\"29083\">Afficher les unit\u00e9s d\u00e9ployables (applications, bases de donn\u00e9es, services) ; \u00e9viter d&#8217;afficher les d\u00e9tails technologiques dans les relations<\/td>\n<\/tr>\n<tr data-nodeid=\"29084\">\n<td data-nodeid=\"29085\"><strong data-nodeid=\"30072\">Composant<\/strong><\/td>\n<td data-nodeid=\"29086\">Afficher le regroupement logique des classes ; veiller \u00e0 ce que chaque composant ait une responsabilit\u00e9 claire<\/td>\n<\/tr>\n<tr data-nodeid=\"29087\">\n<td data-nodeid=\"29088\"><strong data-nodeid=\"30077\">D\u00e9ploiement<\/strong><\/td>\n<td data-nodeid=\"29089\">Cartographier les composants vers l&#8217;infrastructure r\u00e9elle ; inclure les informations sur la redondance et la mise \u00e0 l&#8217;\u00e9chelle<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29090\"><strong data-nodeid=\"30083\">Principes g\u00e9n\u00e9raux du mod\u00e8le C4<\/strong>:<\/p>\n<ul data-nodeid=\"29091\">\n<li data-nodeid=\"29092\">\n<p data-nodeid=\"29093\">Chaque niveau doit offrir une perspective diff\u00e9rente, et non simplement plus de d\u00e9tails<\/p>\n<\/li>\n<li data-nodeid=\"29094\">\n<p data-nodeid=\"29095\">Les diagrammes doivent \u00eatre explicites avec un texte minimal<\/p>\n<\/li>\n<li data-nodeid=\"29096\">\n<p data-nodeid=\"29097\">Maintenir la coh\u00e9rence de la terminologie \u00e0 tous les niveaux<\/p>\n<\/li>\n<li data-nodeid=\"29098\">\n<p data-nodeid=\"29099\">Utiliser un codage couleur pour diff\u00e9rencier les composants du syst\u00e8me et les composants externes<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29100\">3. Meilleures pratiques de pipeline<\/h3>\n<p data-nodeid=\"29101\"><strong data-nodeid=\"30093\">Gestion des m\u00e9tadonn\u00e9es<\/strong>:<\/p>\n<table data-nodeid=\"29103\">\n<thead data-nodeid=\"29104\">\n<tr data-nodeid=\"29105\">\n<th data-nodeid=\"29107\"><strong data-nodeid=\"30097\">Pratique<\/strong><\/th>\n<th data-nodeid=\"29108\"><strong data-nodeid=\"30101\">Pourquoi<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29111\">\n<tr data-nodeid=\"29112\">\n<td data-nodeid=\"29113\">Ajouter des notes de commit descriptives<\/td>\n<td data-nodeid=\"29114\">Aider \u00e0 l&#8217;identification des versions et aux pistes d&#8217;audit<\/td>\n<\/tr>\n<tr data-nodeid=\"29115\">\n<td data-nodeid=\"29116\">Utiliser des conventions de nommage coh\u00e9rentes<\/td>\n<td data-nodeid=\"29117\">Permettre le filtrage et la recherche dans l&#8217;ensemble des collections de l&#8217;\u00e9quipe<\/td>\n<\/tr>\n<tr data-nodeid=\"29118\">\n<td data-nodeid=\"29119\">Inclure les informations sur la plateforme source<\/td>\n<td data-nodeid=\"29120\">Suivre la provenance des artefacts<\/td>\n<\/tr>\n<tr data-nodeid=\"29121\">\n<td data-nodeid=\"29122\">\u00c9tiqueter avec des identifiants de sprint ou de version<\/td>\n<td data-nodeid=\"29123\">Faciliter la restauration et la comparaison<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29124\"><strong data-nodeid=\"30114\">Gestion des versions<\/strong>:<\/p>\n<ul data-nodeid=\"29125\">\n<li data-nodeid=\"29126\">\n<p data-nodeid=\"29127\">Examiner les r\u00e9visions avant de remplacer les documents<\/p>\n<\/li>\n<li data-nodeid=\"29128\">\n<p data-nodeid=\"29129\">Conserver les versions pr\u00e9c\u00e9dentes accessibles pour les traces d&#8217;audit<\/p>\n<\/li>\n<li data-nodeid=\"29130\">\n<p data-nodeid=\"29131\">Utiliser l&#8217;indicateur de r\u00e9vision (\ud83d\udd04) pour identifier les diagrammes obsol\u00e8tes<\/p>\n<\/li>\n<li data-nodeid=\"29132\">\n<p data-nodeid=\"29133\">Effectuer des mises \u00e0 jour par lots lorsque cela est possible pour maintenir la coh\u00e9rence des documents<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29134\">4. Meilleures pratiques OpenDocs<\/h3>\n<p data-nodeid=\"29135\"><strong data-nodeid=\"30124\">Structure de la documentation<\/strong>:<\/p>\n<table data-nodeid=\"29137\">\n<thead data-nodeid=\"29138\">\n<tr data-nodeid=\"29139\">\n<th data-nodeid=\"29141\"><strong data-nodeid=\"30128\">Pratique<\/strong><\/th>\n<th data-nodeid=\"29142\"><strong data-nodeid=\"30132\">Description<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29145\">\n<tr data-nodeid=\"29146\">\n<td data-nodeid=\"29147\">Utiliser des espaces structur\u00e9s en arborescence<\/td>\n<td data-nodeid=\"29148\">Organiser la documentation \u00e0 l&#8217;aide de dossiers hi\u00e9rarchiques imbriqu\u00e9s ; refl\u00e9ter l&#8217;architecture du syst\u00e8me<\/td>\n<\/tr>\n<tr data-nodeid=\"29149\">\n<td data-nodeid=\"29150\">Int\u00e9grer, ne pas joindre<\/td>\n<td data-nodeid=\"29151\">Ins\u00e9rer des artefacts de Pipeline en direct au lieu de captures d&#8217;\u00e9cran statiques<\/td>\n<\/tr>\n<tr data-nodeid=\"29152\">\n<td data-nodeid=\"29153\">Maintenir la s\u00e9paration des pr\u00e9occupations<\/td>\n<td data-nodeid=\"29154\">S\u00e9parer les diagrammes d&#8217;architecture des documents d&#8217;impl\u00e9mentation d\u00e9taill\u00e9s<\/td>\n<\/tr>\n<tr data-nodeid=\"29155\">\n<td data-nodeid=\"29156\">Activer la collaboration<\/td>\n<td data-nodeid=\"29157\">Partager des liens uniques ; les parties prenantes commentent directement les diagrammes ou le texte<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29158\"><strong data-nodeid=\"30147\">Voies d&#8217;int\u00e9gration JIT (Juste-\u00e0-temps)<\/strong>:<\/p>\n<ol data-nodeid=\"29159\">\n<li data-nodeid=\"29160\">\n<p data-nodeid=\"29161\"><strong data-nodeid=\"30152\">Int\u00e9gration ad hoc<\/strong>: Cliquez sur Ins\u00e9rer &gt; Diagramme directement dans une page de document<\/p>\n<\/li>\n<li data-nodeid=\"29162\">\n<p data-nodeid=\"29163\"><strong data-nodeid=\"30157\">G\u00e9n\u00e9ration pilot\u00e9e par l&#8217;IA<\/strong>: Utilisez le langage naturel pour cr\u00e9er des diagrammes \u00e0 l&#8217;int\u00e9rieur du r\u00e9cit textuel<\/p>\n<\/li>\n<li data-nodeid=\"29164\">\n<p data-nodeid=\"29165\"><strong data-nodeid=\"30162\">Pipeline central d&#8217;actifs<\/strong>: Poussez depuis le bureau\/en ligne vers le Pipeline ; tirez vers les documents<\/p>\n<\/li>\n<\/ol>\n<h3 data-nodeid=\"29166\">5. Meilleures pratiques d&#8217;assurance qualit\u00e9<\/h3>\n<p data-nodeid=\"29167\"><strong data-nodeid=\"30168\">Exigences de tra\u00e7abilit\u00e9<\/strong>:<\/p>\n<table data-nodeid=\"29169\">\n<thead data-nodeid=\"29170\">\n<tr data-nodeid=\"29171\">\n<th data-nodeid=\"29173\"><strong data-nodeid=\"30172\">Artefact<\/strong><\/th>\n<th data-nodeid=\"29174\"><strong data-nodeid=\"30176\">Exigence de tra\u00e7abilit\u00e9<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29177\">\n<tr data-nodeid=\"29178\">\n<td data-nodeid=\"29179\">Cas d&#8217;utilisation<\/td>\n<td data-nodeid=\"29180\">Lien vers les exigences et les cas de test<\/td>\n<\/tr>\n<tr data-nodeid=\"29181\">\n<td data-nodeid=\"29182\">Tableaux de d\u00e9cision<\/td>\n<td data-nodeid=\"29183\">S&#8217;assurer que chaque r\u00e8gle est couverte par au moins un test<\/td>\n<\/tr>\n<tr data-nodeid=\"29184\">\n<td data-nodeid=\"29185\">Diagrammes d&#8217;activit\u00e9\/s\u00e9quence<\/td>\n<td data-nodeid=\"29186\">Lier les \u00e9tapes de test aux \u00e9l\u00e9ments sp\u00e9cifiques du diagramme<\/td>\n<\/tr>\n<tr data-nodeid=\"29187\">\n<td data-nodeid=\"29188\">Aspects non fonctionnels<\/td>\n<td data-nodeid=\"29189\">Inclure dans les notes ou les contraintes ; tester s\u00e9par\u00e9ment<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29190\"><strong data-nodeid=\"30189\">M\u00e9triques de couverture des tests<\/strong>:<\/p>\n<ul data-nodeid=\"29191\">\n<li data-nodeid=\"29192\">\n<p data-nodeid=\"29193\">Surveiller l&#8217;exhaustivit\u00e9 via le tableau de bord du projet<\/p>\n<\/li>\n<li data-nodeid=\"29194\">\n<p data-nodeid=\"29195\">Suivre la couverture sur : cas d&#8217;utilisation, tableaux de d\u00e9cision, sc\u00e9narios (chemin heureux, alternatives, exceptions, cas limites)<\/p>\n<\/li>\n<li data-nodeid=\"29196\">\n<p data-nodeid=\"29197\">Priorisation des cas de test restants bas\u00e9e sur les risques<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29198\">6. Meilleures pratiques de rapport et de documentation<\/h3>\n<p data-nodeid=\"29199\"><strong data-nodeid=\"30198\">Structure de rapport g\u00e9n\u00e9r\u00e9e par IA<\/strong>:<\/p>\n<table data-nodeid=\"29201\">\n<thead data-nodeid=\"29202\">\n<tr data-nodeid=\"29203\">\n<th data-nodeid=\"29205\"><strong data-nodeid=\"30202\">Section<\/strong><\/th>\n<th data-nodeid=\"29206\"><strong data-nodeid=\"30206\">Contenu<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29209\">\n<tr data-nodeid=\"29210\">\n<td data-nodeid=\"29211\">R\u00e9sum\u00e9 ex\u00e9cutif<\/td>\n<td data-nodeid=\"29212\">R\u00e9cit de haut niveau des objectifs du syst\u00e8me<\/td>\n<\/tr>\n<tr data-nodeid=\"29213\">\n<td data-nodeid=\"29214\">Mod\u00e8les logiques visuels<\/td>\n<td data-nodeid=\"29215\">Diagrammes de cas d&#8217;utilisation, d&#8217;activit\u00e9 et de s\u00e9quence rendus<\/td>\n<\/tr>\n<tr data-nodeid=\"29216\">\n<td data-nodeid=\"29217\">Sp\u00e9cifications fonctionnelles<\/td>\n<td data-nodeid=\"29218\">Flux d\u00e9taill\u00e9 des \u00e9v\u00e9nements (chemins principaux, alternatifs, d&#8217;exception)<\/td>\n<\/tr>\n<tr data-nodeid=\"29219\">\n<td data-nodeid=\"29220\">Matrice de tra\u00e7abilit\u00e9<\/td>\n<td data-nodeid=\"29221\">Exigences \u2192 Conception \u2192 Cas de test<\/td>\n<\/tr>\n<tr data-nodeid=\"29222\">\n<td data-nodeid=\"29223\">Sch\u00e9ma de donn\u00e9es<\/td>\n<td data-nodeid=\"29224\">Diagrammes Entit\u00e9-Relation et structures de classes<\/td>\n<\/tr>\n<tr data-nodeid=\"29225\">\n<td data-nodeid=\"29226\">Plan de d\u00e9ploiement<\/td>\n<td data-nodeid=\"29227\">Exigences d&#8217;infrastructure et topologie<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr data-nodeid=\"29228\"\/>\n<h2 data-nodeid=\"29229\">Partie 4 : Exemple de flux de travail de bout en bout<\/h2>\n<h3 data-nodeid=\"29230\">Sc\u00e9nario : Cr\u00e9ation d&#8217;un syst\u00e8me de gestion d&#8217;entrep\u00f4t<\/h3>\n<p data-nodeid=\"29231\"><strong data-nodeid=\"30224\">\u00c9tape 1 : Chatbot IA \u2013 Id\u00e9ation<\/strong><\/p>\n<pre class=\"lang-text\" data-nodeid=\"29232\"><code data-language=\"text\">Invitation : \u00ab Cr\u00e9er un diagramme de contexte syst\u00e8me C4 pour un syst\u00e8me de gestion d'entrep\u00f4t \r\nqui s'int\u00e8gre \u00e0 un ERP et \u00e0 un syst\u00e8me de gestion des commandes \u00bb<\/code><\/pre>\n<p data-nodeid=\"29233\"><strong data-nodeid=\"30229\">Sortie<\/strong>: Diagramme de contexte initial montrant les utilisateurs (personnel d&#8217;entrep\u00f4t, responsable, logistique) et les syst\u00e8mes externes (ERP, OMS).<\/p>\n<p data-nodeid=\"29234\"><strong data-nodeid=\"30233\">\u00c9tape 2 : Studio C4-PlantUML \u2013 Affinement guid\u00e9<\/strong><\/p>\n<ul data-nodeid=\"29235\">\n<li data-nodeid=\"29236\">\n<p data-nodeid=\"29237\">D\u00e9finir l&#8217;\u00e9nonc\u00e9 du probl\u00e8me avec l&#8217;assistance de l&#8217;IA<\/p>\n<\/li>\n<li data-nodeid=\"29238\">\n<p data-nodeid=\"29239\">G\u00e9n\u00e9rer un diagramme de conteneurs : Application Web (React), Service d&#8217;optimisation du stockage (Spring Boot), Base de donn\u00e9es d&#8217;inventaire (PostgreSQL)<\/p>\n<\/li>\n<li data-nodeid=\"29240\">\n<p data-nodeid=\"29241\">G\u00e9n\u00e9rer un diagramme de composants : Moteur d&#8217;analyse du stockage, Calculateur de taille des articles, Service de fr\u00e9quence des articles, Service de r\u00e9approvisionnement<\/p>\n<\/li>\n<li data-nodeid=\"29242\">\n<p data-nodeid=\"29243\">G\u00e9n\u00e9rer un diagramme de d\u00e9ploiement : Architecture AWS avec EC2, RDS, ElastiCache<\/p>\n<\/li>\n<li data-nodeid=\"29244\">\n<p data-nodeid=\"29245\">Ajouter des vues dynamiques : Diagrammes de s\u00e9quence pour le suivi des mouvements d&#8217;inventaire<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"29246\"><strong data-nodeid=\"30244\">\u00c9tape 3 : Affinement des relations<\/strong><br \/>\nL&#8217;IA identifie et sugg\u00e8re :<\/p>\n<ul data-nodeid=\"29247\">\n<li data-nodeid=\"29248\">\n<p data-nodeid=\"29249\">\u00abinclure\u00bb \u2192 Authentifier l&#8217;utilisateur pour tous les cas d&#8217;utilisation<\/p>\n<\/li>\n<li data-nodeid=\"29250\">\n<p data-nodeid=\"29251\">\u00abinclure\u00bb \u2192 Traiter le paiement pour R\u00e9server une table et Commander un repas \u00e0 l&#8217;avance<\/p>\n<\/li>\n<li data-nodeid=\"29252\">\n<p data-nodeid=\"29253\">\u00ab\u00e9tendre\u00bb \u2192 Appliquer un coupon de r\u00e9duction (conditionnel sur le code promo)<\/p>\n<\/li>\n<li data-nodeid=\"29254\">\n<p data-nodeid=\"29255\">\u00ab\u00e9tendre\u00bb \u2192 G\u00e9rer la liste d&#8217;attente (conditionnel sur l&#8217;absence de tables disponibles)<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"29256\"><strong data-nodeid=\"30252\">\u00c9tape 4 : OpenDocs \u2013 Documentation vivante<\/strong><\/p>\n<ul data-nodeid=\"29257\">\n<li data-nodeid=\"29258\">\n<p data-nodeid=\"29259\">Ins\u00e9rer tous les artefacts du pipeline dans les pages de documentation<\/p>\n<\/li>\n<li data-nodeid=\"29260\">\n<p data-nodeid=\"29261\">R\u00e9diger des explications Markdown avec des diagrammes int\u00e9gr\u00e9s en direct<\/p>\n<\/li>\n<li data-nodeid=\"29262\">\n<p data-nodeid=\"29263\">Ajouter des cas de test g\u00e9n\u00e9r\u00e9s automatiquement \u00e0 partir des cas d&#8217;utilisation et des tables de d\u00e9cision<\/p>\n<\/li>\n<li data-nodeid=\"29264\">\n<p data-nodeid=\"29265\">Publier vers le portail des parties prenantes via un lien de partage s\u00e9curis\u00e9<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"29266\"><strong data-nodeid=\"30260\">\u00c9tape 5 : Synchronisation<\/strong><\/p>\n<ul data-nodeid=\"29267\">\n<li data-nodeid=\"29268\">\n<p data-nodeid=\"29269\">Deux semaines plus tard, l&#8217;\u00e9quipe d&#8217;ing\u00e9nierie modifie l&#8217;algorithme d&#8217;optimisation du stockage<\/p>\n<\/li>\n<li data-nodeid=\"29270\">\n<p data-nodeid=\"29271\">L&#8217;architecte modifie le diagramme dans VP Desktop<\/p>\n<\/li>\n<li data-nodeid=\"29272\">\n<p data-nodeid=\"29273\">OpenDocs signale le changement de synchronisation \u00e0 l&#8217;\u00e9quipe de r\u00e9daction<\/p>\n<\/li>\n<li data-nodeid=\"29274\">\n<p data-nodeid=\"29275\">L&#8217;\u00e9quipe passe \u00e0 une nouvelle r\u00e9vision sans rompre la mise en forme manuelle<\/p>\n<\/li>\n<li data-nodeid=\"29276\">\n<p data-nodeid=\"29277\">Toutes les parties prenantes voient la documentation mise \u00e0 jour imm\u00e9diatement<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"29278\"\/>\n<h2 data-nodeid=\"29279\">Partie 5 : R\u00e9sum\u00e9 et points cl\u00e9s<\/h2>\n<h3 data-nodeid=\"29280\">La proposition de valeur<\/h3>\n<p data-nodeid=\"29281\">L&#8217;\u00e9cosyst\u00e8me d&#8217;IA de Visual Paradigm transforme les flux de travail fragment\u00e9s \u00ab du concept aux documents \u00bb en un pipeline automatis\u00e9 unifi\u00e9 o\u00f9 les mod\u00e8les visuels et la documentation \u00e9voluent ensemble en tant que source unique de v\u00e9rit\u00e9.<\/p>\n<p data-nodeid=\"29282\"><strong data-nodeid=\"30279\">Avantages cl\u00e9s<\/strong>:<\/p>\n<table data-nodeid=\"29284\">\n<thead data-nodeid=\"29285\">\n<tr data-nodeid=\"29286\">\n<th data-nodeid=\"29288\"><strong data-nodeid=\"30283\">Pour les \u00e9quipes techniques<\/strong><\/th>\n<th data-nodeid=\"29289\"><strong data-nodeid=\"30287\">Pour les parties prenantes commerciales<\/strong><\/th>\n<th data-nodeid=\"29290\"><strong data-nodeid=\"30291\">Pour les organisations<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29294\">\n<tr data-nodeid=\"29295\">\n<td data-nodeid=\"29296\">R\u00e9duction de la charge de maintenance<\/td>\n<td data-nodeid=\"29297\">Meilleure compr\u00e9hension des syst\u00e8mes complexes<\/td>\n<td data-nodeid=\"29298\">Source unique de v\u00e9rit\u00e9<\/td>\n<\/tr>\n<tr data-nodeid=\"29299\">\n<td data-nodeid=\"29300\">Pr\u00e9cision am\u00e9lior\u00e9e<\/td>\n<td data-nodeid=\"29301\">Prise de d\u00e9cision plus rapide<\/td>\n<td data-nodeid=\"29302\">\u00c9limination des silos d&#8217;information<\/td>\n<\/tr>\n<tr data-nodeid=\"29303\">\n<td data-nodeid=\"29304\">Collaboration renforc\u00e9e<\/td>\n<td data-nodeid=\"29305\">R\u00e9duction du risque de mauvaise communication<\/td>\n<td data-nodeid=\"29306\">Gestion des connaissances \u00e9volutive<\/td>\n<\/tr>\n<tr data-nodeid=\"29307\">\n<td data-nodeid=\"29308\">Efficacit\u00e9 propuls\u00e9e par l&#8217;IA<\/td>\n<td data-nodeid=\"29309\">Informations toujours \u00e0 jour disponibles<\/td>\n<td data-nodeid=\"29310\">Publication p\u00e9renne<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-nodeid=\"29311\">R\u00e9sum\u00e9 final du flux de travail<\/h3>\n<p data-nodeid=\"29312\"><img alt=\"\" data-nodeid=\"30306\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc9f44192b.png\"\/><\/p>\n<h3 data-nodeid=\"29313\">R\u00e9f\u00e9rence rapide : quel outil pour quelle t\u00e2che<\/h3>\n<table data-nodeid=\"29315\">\n<thead data-nodeid=\"29316\">\n<tr data-nodeid=\"29317\">\n<th data-nodeid=\"29319\"><strong data-nodeid=\"30311\">T\u00e2che<\/strong><\/th>\n<th data-nodeid=\"29320\"><strong data-nodeid=\"30315\">Outil<\/strong><\/th>\n<th data-nodeid=\"29321\"><strong data-nodeid=\"30319\">Pourquoi<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29325\">\n<tr data-nodeid=\"29326\">\n<td data-nodeid=\"29327\">Brainstorming et prototypage rapide<\/td>\n<td data-nodeid=\"29328\">Chatbot IA<\/td>\n<td data-nodeid=\"29329\">Le moyen le plus rapide de passer de l&#8217;id\u00e9e au visuel<\/td>\n<\/tr>\n<tr data-nodeid=\"29330\">\n<td data-nodeid=\"29331\">Mod\u00e9lisation C4 structur\u00e9e<\/td>\n<td data-nodeid=\"29332\">Studio C4-PlantUML<\/td>\n<td data-nodeid=\"29333\">Des flux de travail guid\u00e9s garantissent l&#8217;exhaustivit\u00e9<\/td>\n<\/tr>\n<tr data-nodeid=\"29334\">\n<td data-nodeid=\"29335\">Documentation vivante<\/td>\n<td data-nodeid=\"29336\">OpenDocs<\/td>\n<td data-nodeid=\"29337\">Les diagrammes se mettent \u00e0 jour automatiquement ; une seule source de v\u00e9rit\u00e9<\/td>\n<\/tr>\n<tr data-nodeid=\"29338\">\n<td data-nodeid=\"29339\">Ing\u00e9nierie de pr\u00e9cision<\/td>\n<td data-nodeid=\"29340\">VP Desktop<\/td>\n<td data-nodeid=\"29341\">Validation, g\u00e9n\u00e9ration de code, fonctionnalit\u00e9s d&#8217;entreprise<\/td>\n<\/tr>\n<tr data-nodeid=\"29342\">\n<td data-nodeid=\"29343\">G\u00e9n\u00e9ration de cas de test<\/td>\n<td data-nodeid=\"29344\">Studio des cas d&#8217;usage IA<\/td>\n<td data-nodeid=\"29345\">Des cas d&#8217;usage et des tables de d\u00e9cision aux actifs de test<\/td>\n<\/tr>\n<tr data-nodeid=\"29346\">\n<td data-nodeid=\"29347\">Rapport<\/td>\n<td data-nodeid=\"29348\">Rapport IA<\/td>\n<td data-nodeid=\"29349\">R\u00e9sum\u00e9s ex\u00e9cutifs, guides techniques, traces d&#8217;audit<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr data-nodeid=\"29350\"\/>\n<h2 data-nodeid=\"29351\">Annexe : R\u00e9f\u00e9rence rapide des extraits de code PlantUML<\/h2>\n<h3 data-nodeid=\"29352\">Contexte C4<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TKwx3e904En9-0UaWaIunieMwTGG3JKvZerSSg_SBH7_taM8bLQpEu_TsKaZr3H0CYAwS6JCysVva3XE_HJ02siG39R2QkOKDpXfLGGSbEnPTIYQXMelPwPvGF14TTMIcB5qv8oZ1dom9bjExPEq9KW9Jn24bmwbDMaUH_SNXNKMFa3okYTNhk6lkwjdpEWFUCCLcUfjJ5RvH-u6QklnVKHzmk9il4Khh4hpDm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TKwx3e8m5DrD-8VA18dGnSaLtTGG2JCfvKQQz47QsuX_v7_uOvP7d7IwEUUUrrPeBdq7f4SSt85IonxvNM3lM-_0SgCHDERSA3f8fj4hcJdif6XfiS_AYQelPwgOGx21Qeh9CM8-16MqAS4wevCfQaVY6eKKZY5u6mTu1CUj650O7QVHfdg639Mu-OJtrIZIUJBXzql1NqTp6Z49bM0raq5KhGQoSB-CDv3hfc_RicqMbzQWuKP2d7u0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"29353\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\nPerson(user, \"Utilisateur\", \"Description\")\r\nSystem(system, \"Nom du syst\u00e8me\", \"Description\")\r\nSystem_Ext(external, \"Syst\u00e8me externe\", \"Description\")\r\nRel(user, system, \"Utilise\", \"Protocole\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TKwx3e8m5DrD-8VA18dGnSaLtTGG2JCfvKQQz47QsuX_v7_uOvP7d7IwEUUUrrPeBdq7f4SSt85IonxvNM3lM-_0SgCHDERSA3f8fj4hcJdif6XfiS_AYQelPwgOGx21Qeh9CM8-16MqAS4wevCfQaVY6eKKZY5u6mTu1CUj650O7QVHfdg639Mu-OJtrIZIUJBXzql1NqTp6Z49bM0raq5KhGQoSB-CDv3hfc_RicqMbzQWuKP2d7u0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TKwx3e904En9-0UaWaIunieMwTGG3JKvZerSSg_SBH7_taM8bLQpEu_TsKaZr3H0CYAwS6JCysVva3XE_HJ02siG39R2QkOKDpXfLGGSbEnPTIYQXMelPwPvGF14TTMIcB5qv8oZ1dom9bjExPEq9KW9Jn24bmwbDMaUH_SNXNKMFa3okYTNhk6lkwjdpEWFUCCLcUfjJ5RvH-u6QklnVKHzmk9il4Khh4hpDm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29354\"><a data-nodeid=\"30342\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TKwx3e904En9-0UaWaIunieMwTGG3JKvZerSSg_SBH7_taM8bLQpEu_TsKaZr3H0CYAwS6JCysVva3XE_HJ02siG39R2QkOKDpXfLGGSbEnPTIYQXMelPwPvGF14TTMIcB5qv8oZ1dom9bjExPEq9KW9Jn24bmwbDMaUH_SNXNKMFa3okYTNhk6lkwjdpEWFUCCLcUfjJ5RvH-u6QklnVKHzmk9il4Khh4hpDm00\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29355\">Conteneur C4<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOpB2i8m44NtWlyGish1DXjNRjjbbKfrBNaCRI0laYdYtvi85dTpphrt3jf9ioeW2s98PyOYVxMpncKLQu8elKDms4flMJ3SuMfDar0PBLXtQiQY7fU1MPuGObRFBY-uTX3RaBlxtSQL_5r7GZTBhjm2pUOESd7U-FbTg8SaemwelQFrtvDUL4gKd2CNF7sNeqyuHvXkGw49VOH4L2xG-WC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOwz3i8m38Ht9DuXT089ceM94Je20W4pIXEhZKZjAdR4C_4Sl1Yf43-Rl_FTwIOURKWEL2lIyqhhQEvbuwLDTMA8bb00fRJKwJuObDI51OiBljQRvU8mI9VTLdU61MAMhfkSC1uXbdtsZaTVdjhFDLV5dZhbadhNGuf5rivWMwH0ZOS1As0RVI-Ui9ZzzLJrrDNvlpOCAWztXFXy00-P0x4q4Kx7xK0d8Ni35O1_fjaB\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"29356\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\nContainer(container, \"Nom du conteneur\", \"Technologie\", \"Description\")\r\nContainerDb(db, \"Base de donn\u00e9es\", \"PostgreSQL\", \"Stocke les donn\u00e9es\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOwz3i8m38Ht9DuXT089ceM94Je20W4pIXEhZKZjAdR4C_4Sl1Yf43-Rl_FTwIOURKWEL2lIyqhhQEvbuwLDTMA8bb00fRJKwJuObDI51OiBljQRvU8mI9VTLdU61MAMhfkSC1uXbdtsZaTVdjhFDLV5dZhbadhNGuf5rivWMwH0ZOS1As0RVI-Ui9ZzzLJrrDNvlpOCAWztXFXy00-P0x4q4Kx7xK0d8Ni35O1_fjaB\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOpB2i8m44NtWlyGish1DXjNRjjbbKfrBNaCRI0laYdYtvi85dTpphrt3jf9ioeW2s98PyOYVxMpncKLQu8elKDms4flMJ3SuMfDar0PBLXtQiQY7fU1MPuGObRFBY-uTX3RaBlxtSQL_5r7GZTBhjm2pUOESd7U-FbTg8SaemwelQFrtvDUL4gKd2CNF7sNeqyuHvXkGw49VOH4L2xG-WC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29357\"><a data-nodeid=\"30346\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOpB2i8m44NtWlyGish1DXjNRjjbbKfrBNaCRI0laYdYtvi85dTpphrt3jf9ioeW2s98PyOYVxMpncKLQu8elKDms4flMJ3SuMfDar0PBLXtQiQY7fU1MPuGObRFBY-uTX3RaBlxtSQL_5r7GZTBhjm2pUOESd7U-FbTg8SaemwelQFrtvDUL4gKd2CNF7sNeqyuHvXkGw49VOH4L2xG-WC0\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29358\">Composant C4<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSkn3i8m30JG7Ob_29b0eit2n5h6WbYOKPfQD59YMx4ZVfzqeDlTqzqXOaXr1hEeiboTA_xRVw8kTQe29H0geFQ1ikFaKMjEdUYSukI6I_TSwNKVNVQYK1gz1yfCk7wuRVUxhH_3FvsDtTGyV0RRv0OIIcIDXFRq0m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSmn2y8m40NWNV0_f9aKRBCukTQnIXTdIPDW3vAxaBlWtpSLTBltyTvrW2vM7zGgalbYJB7luGMorgLoA8vG0ihWA9aSBKfDiMVn4HOpdljveyTjCicoXDBeELBAXDicj-v-zyy7zxjEIjyfAL_LbxZzqCskWLs1B42eZny0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"29359\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\nComponent(component, \"Nom du composant\", \"Description\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSmn2y8m40NWNV0_f9aKRBCukTQnIXTdIPDW3vAxaBlWtpSLTBltyTvrW2vM7zGgalbYJB7luGMorgLoA8vG0ihWA9aSBKfDiMVn4HOpdljveyTjCicoXDBeELBAXDicj-v-zyy7zxjEIjyfAL_LbxZzqCskWLs1B42eZny0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSkn3i8m30JG7Ob_29b0eit2n5h6WbYOKPfQD59YMx4ZVfzqeDlTqzqXOaXr1hEeiboTA_xRVw8kTQe29H0geFQ1ikFaKMjEdUYSukI6I_TSwNKVNVQYK1gz1yfCk7wuRVUxhH_3FvsDtTGyV0RRv0OIIcIDXFRq0m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29360\"><a data-nodeid=\"30350\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSkn3i8m30JG7Ob_29b0eit2n5h6WbYOKPfQD59YMx4ZVfzqeDlTqzqXOaXr1hEeiboTA_xRVw8kTQe29H0geFQ1ikFaKMjEdUYSukI6I_TSwNKVNVQYK1gz1yfCk7wuRVUxhH_3FvsDtTGyV0RRv0OIIcIDXFRq0m00\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29361\">D\u00e9ploiement C4<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HOkn3W8X44Hx4_y1gJJnZiRALakzM6XzuM1paC0kWINc_bweR2PlNcOE7ase5eHZJkMgLDRVSVNiwb8BP4F8W3mQYYe5ZLnZ60hRu1TrkmolhZxFXugwCEIcvZkaG5lifzJ6-zrVp1DPE6ABiv2TnQGZo5RUO1nIe7MJfny0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HSin3W8X40NGtiGx89Kcxj9OsMgvRYoqth0mMKXWXi0Gupaya_UIhMn-yb_-ttaqeLeGZZcLir9Pl_h5iwjpBP0D8GDoRoYg53HoZQ4hR8EVrUNKtLTwtWOLTM78ZQOhf43lk9vI6sytVvX6ih375aSXHuh2Le7VJxMozGSOXnHeyI0FFm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"29362\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\nDeployment_Node(node, \"Nom du n\u0153ud\", \"Technologie\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HSin3W8X40NGtiGx89Kcxj9OsMgvRYoqth0mMKXWXi0Gupaya_UIhMn-yb_-ttaqeLeGZZcLir9Pl_h5iwjpBP0D8GDoRoYg53HoZQ4hR8EVrUNKtLTwtWOLTM78ZQOhf43lk9vI6sytVvX6ih375aSXHuh2Le7VJxMozGSOXnHeyI0FFm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HOkn3W8X44Hx4_y1gJJnZiRALakzM6XzuM1paC0kWINc_bweR2PlNcOE7ase5eHZJkMgLDRVSVNiwb8BP4F8W3mQYYe5ZLnZ60hRu1TrkmolhZxFXugwCEIcvZkaG5lifzJ6-zrVp1DPE6ABiv2TnQGZo5RUO1nIe7MJfny0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29363\"><a data-nodeid=\"30354\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HOkn3W8X44Hx4_y1gJJnZiRALakzM6XzuM1paC0kWINc_bweR2PlNcOE7ase5eHZJkMgLDRVSVNiwb8BP4F8W3mQYYe5ZLnZ60hRu1TrkmolhZxFXugwCEIcvZkaG5lifzJ6-zrVp1DPE6ABiv2TnQGZo5RUO1nIe7MJfny0\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29364\">Diagramme de s\u00e9quence<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK784Ktw9kQbA2ed52eaWBYzNGM9HIMPoPa5YNec2KW220rQ39CdB1TQWe6k7B6gbu9jQN9oOdWgMpYnBB4b5rOHil2vGBzWGAuMWr9BIeZnUhfHKRDe0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIKFBBprL8ILN8KKzCBaajBL9II2nMI0H9yN8L91QLP2Pd5YJcbIWe1I0uO3L8ahnSO0qAkdR8ebOAlgd5nOdfgM3fpBB4abHKJSZ6wmBrWWsnKWXABSal1TgUaefD6m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"29365\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">actor \"Nom de l'acteur\" as actor\r\nparticipant \"Participant\" as participant\r\nactor -&gt; participant: Message\r\nactivate participant\r\nparticipant --&gt; actor: Retour\r\ndeactivate participant\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIKFBBprL8ILN8KKzCBaajBL9II2nMI0H9yN8L91QLP2Pd5YJcbIWe1I0uO3L8ahnSO0qAkdR8ebOAlgd5nOdfgM3fpBB4abHKJSZ6wmBrWWsnKWXABSal1TgUaefD6m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK784Ktw9kQbA2ed52eaWBYzNGM9HIMPoPa5YNec2KW220rQ39CdB1TQWe6k7B6gbu9jQN9oOdWgMpYnBB4b5rOHil2vGBzWGAuMWr9BIeZnUhfHKRDe0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29366\"><a data-nodeid=\"30358\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK784Ktw9kQbA2ed52eaWBYzNGM9HIMPoPa5YNec2KW220rQ39CdB1TQWe6k7B6gbu9jQN9oOdWgMpYnBB4b5rOHil2vGBzWGAuMWr9BIeZnUhfHKRDe0\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29367\">Diagramme des cas d&#8217;utilisation<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK0ejJYrIKaWiLYW5CdYvW6HoOd4gM5p16SY2o2M3POeKT7Nj89na1JqzEuNClEISqfJK50Kh1HiRACVE3YnjewUda5fHafe7auPmxEm0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:DOf12e0W44NtGNVuk6cL1mXnqnawW8op44HXLEXAdQEBLLQR3--_vwXcWTfgYA6uoaqKN44hBEDmBxd2KEjz-QbzKSZfZQWdWdcsBn2qjWY9OlFiiS2O3iBMTcsq1k-Lqw_Fuu77Nm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"29368\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">actor \"Utilisateur\" as user\r\nusecase \"Cas d'utilisation\" as uc\r\nuser --&gt; uc\r\nuc ..&gt; included : &lt;&lt;inclure&gt;&gt;\r\nuc &lt;.. extended : &lt;&lt;\u00e9tendre&gt;&gt;\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:DOf12e0W44NtGNVuk6cL1mXnqnawW8op44HXLEXAdQEBLLQR3--_vwXcWTfgYA6uoaqKN44hBEDmBxd2KEjz-QbzKSZfZQWdWdcsBn2qjWY9OlFiiS2O3iBMTcsq1k-Lqw_Fuu77Nm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK0ejJYrIKaWiLYW5CdYvW6HoOd4gM5p16SY2o2M3POeKT7Nj89na1JqzEuNClEISqfJK50Kh1HiRACVE3YnjewUda5fHafe7auPmxEm0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier PlantUML dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29369\"><a data-nodeid=\"30362\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK0ejJYrIKaWiLYW5CdYvW6HoOd4gM5p16SY2o2M3POeKT7Nj89na1JqzEuNClEISqfJK50Kh1HiRACVE3YnjewUda5fHafe7auPmxEm0\">Modifier Plantuml dans VPasCode<\/a><\/p>\n<hr data-nodeid=\"29370\"\/>\n<h2 data-nodeid=\"29371\">Conclusion<\/h2>\n<p data-nodeid=\"29372\">L&#8217;\u00e9cosyst\u00e8me propuls\u00e9 par l&#8217;IA de Visual Paradigm repr\u00e9sente un bond en avant significatif dans la mani\u00e8re dont les \u00e9quipes techniques g\u00e8rent la complexit\u00e9. En int\u00e9grant l&#8217;id\u00e9ation pilot\u00e9e par l&#8217;IA, la mod\u00e9lisation structur\u00e9e C4 et la documentation vivante dans un seul pipeline, il \u00e9limine la friction traditionnelle entre la conception et la documentation.<\/p>\n<p class=\"\" data-nodeid=\"29373\">Que vous soyez en train de brainstormer une nouvelle architecture de microservices, d&#8217;affiner des strat\u00e9gies de d\u00e9ploiement au niveau de l&#8217;entreprise, ou de vous assurer que vos documents d&#8217;int\u00e9gration restent \u00e0 jour, ce flux de travail garantit que vos mod\u00e8les visuels et vos explications textuelles restent synchronis\u00e9s, pr\u00e9cis et accessibles. Commencez par le Chatbot IA pour une id\u00e9ation rapide, utilisez C4-PlantUML Studio pour un raffinement structur\u00e9, et bouclez le processus avec OpenDocs pour une documentation vivante qui reste automatiquement synchronis\u00e9e avec votre architecture en \u00e9volution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Dans l&#8217;ing\u00e9nierie logicielle moderne, l&#8217;\u00e9cart entre la conception architecturale et la documentation technique est souvent l&#8217;endroit o\u00f9 les projets<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","source_url":"","source_h1_title":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[81,109,120],"tags":[],"asset-category":[],"class_list":["post-12691","post","type-post","status-publish","format-standard","hentry","category-ai","category-c4-model","category-vpascode-editor"],"source_url":"","source_h1_title":"","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#039;IA de Visual Paradigm - Cyberm\u00e9diane<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#039;IA de Visual Paradigm - Cyberm\u00e9diane\" \/>\n<meta property=\"og:description\" content=\"Introduction Dans l&#8217;ing\u00e9nierie logicielle moderne, l&#8217;\u00e9cart entre la conception architecturale et la documentation technique est souvent l&#8217;endroit o\u00f9 les projets\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\" \/>\n<meta property=\"og:site_name\" content=\"Cyberm\u00e9diane\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-29T05:20:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-29T05:29:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#8217;IA de Visual Paradigm\",\"datePublished\":\"2026-10-29T05:20:02+00:00\",\"dateModified\":\"2026-10-29T05:29:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\"},\"wordCount\":3708,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\",\"articleSection\":[\"AI\",\"C4 Model\",\"VPasCode Editor\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\",\"name\":\"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l'IA de Visual Paradigm - Cyberm\u00e9diane\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\",\"datePublished\":\"2026-10-29T05:20:02+00:00\",\"dateModified\":\"2026-10-29T05:29:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#8217;IA de Visual Paradigm\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/\",\"name\":\"Cyberm\u00e9diane\",\"description\":\"Apprendre une nouvelle chose tous les jours\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/fr\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l'IA de Visual Paradigm - Cyberm\u00e9diane","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","og_locale":"fr_FR","og_type":"article","og_title":"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l'IA de Visual Paradigm - Cyberm\u00e9diane","og_description":"Introduction Dans l&#8217;ing\u00e9nierie logicielle moderne, l&#8217;\u00e9cart entre la conception architecturale et la documentation technique est souvent l&#8217;endroit o\u00f9 les projets","og_url":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","og_site_name":"Cyberm\u00e9diane","article_published_time":"2026-10-29T05:20:02+00:00","article_modified_time":"2026-10-29T05:29:23+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","type":"","width":"","height":""}],"author":"curtis","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"curtis","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#8217;IA de Visual Paradigm","datePublished":"2026-10-29T05:20:02+00:00","dateModified":"2026-10-29T05:29:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"},"wordCount":3708,"image":{"@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","articleSection":["AI","C4 Model","VPasCode Editor"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","url":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","name":"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l'IA de Visual Paradigm - Cyberm\u00e9diane","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","datePublished":"2026-10-29T05:20:02+00:00","dateModified":"2026-10-29T05:29:23+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage","url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","contentUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/fr\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Du prompt aux documents vivants : ma\u00eetriser le flux de travail C4 aliment\u00e9 par l&#8217;IA de Visual Paradigm"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/fr\/#website","url":"https:\/\/www.cybermedian.com\/fr\/","name":"Cyberm\u00e9diane","description":"Apprendre une nouvelle chose tous les jours","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/fr\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts\/12691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/comments?post=12691"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts\/12691\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/media?parent=12691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/categories?post=12691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/tags?post=12691"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/asset-category?post=12691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}