{"id":12451,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)"},"content":{"rendered":"<p>Le\u00a0<strong>mod\u00e8le C4<\/strong>, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture logicielle. Il utilise quatre niveaux d&#8217;abstraction (d&#8217;o\u00f9 le \u00ab C4 \u00bb) pour d\u00e9crire un syst\u00e8me, du niveau le plus \u00e9lev\u00e9 jusqu&#8217;aux d\u00e9tails au niveau du code :<\/p>\n<ol>\n<li><strong>Contexte du syst\u00e8me<\/strong>\u00a0(Niveau 1) \u2013 Vue d&#8217;ensemble : le syst\u00e8me et ses utilisateurs\/d\u00e9pendances externes.<\/li>\n<li><strong>Conteneurs<\/strong>\u00a0(Niveau 2) \u2013 Choix technologiques de haut niveau et responsabilit\u00e9s.<\/li>\n<li><strong>Composants<\/strong>\u00a0(Niveau 3) \u2013 Principaux blocs logiques \u00e0 l&#8217;int\u00e9rieur d&#8217;un conteneur.<\/li>\n<li><strong>Code<\/strong>\u00a0(Niveau 4) \u2013 D\u00e9tails optionnels au niveau des classes ou de la structure du code.<\/li>\n<\/ol>\n<p>Il est soutenu par trois types suppl\u00e9mentaires de diagrammes :<\/p>\n<ul>\n<li><strong>Paysage du syst\u00e8me<\/strong><\/li>\n<li><strong>Dynamique<\/strong><\/li>\n<li><strong>D\u00e9ploiement<\/strong><\/li>\n<\/ul>\n<p class=\"\">Le mod\u00e8le est ind\u00e9pendant de la notation (vous pouvez utiliser n&#8217;importe quel outil de diagrammation) et se concentre sur la clart\u00e9, la coh\u00e9rence et les d\u00e9tails adapt\u00e9s au public cible. Il est largement adopt\u00e9 car il \u00e9vite les diagrammes d&#8217;architecture \u00ab gros tas de boue \u00bb et s&#8217;adapte des croquis au tableau blanc \u00e0 la documentation automatis\u00e9e.<\/p>\n<p>Pour cette\u00a0<strong>\u00e9tude de cas cibl\u00e9e<\/strong>, nous utilisons l&#8217;exemple canonique du site officiel C4 :\u00a0<strong>Syst\u00e8me de banque en ligne<\/strong>\u00a0pour la banque fictive \u00ab Big Bank plc \u00bb. L&#8217;objectif m\u00e9tier est de permettre aux clients particuliers de consulter leurs comptes et de r\u00e9aliser des paiements en ligne tout en s&#8217;int\u00e9grant aux syst\u00e8mes centraux existants de la banque.<\/p>\n<p>Nous allons passer en revue\u00a0<strong>chaque niveau<\/strong>\u00a0avec :<\/p>\n<ul>\n<li>Objectif et public cible<\/li>\n<li>\u00c9l\u00e9ments cl\u00e9s + responsabilit\u00e9s<\/li>\n<li>Relations<\/li>\n<li>Un diagramme C4 PlantUML pr\u00eat \u00e0 l&#8217;emploi\u00a0<strong>diagramme PlantUML C4<\/strong>(PlantUML prend en charge la syntaxe C4 et s&#8217;affiche magnifiquement dans la plupart des visualisateurs Markdown)<\/li>\n<li>Raisonnement et d\u00e9cisions cl\u00e9s<\/li>\n<li>Comment le diagramme aide les parties prenantes<\/li>\n<\/ul>\n<h3>\u00c9tape 1 : D\u00e9finir le p\u00e9rim\u00e8tre et cr\u00e9er le diagramme de contexte du syst\u00e8me (Niveau 1)<\/h3>\n<p><strong>Objectif<\/strong>: Montrer comment le nouveau syst\u00e8me de banque en ligne s&#8217;int\u00e8gre dans le monde. Public cible : parties prenantes m\u00e9tier, personnes non techniques, nouveaux membres de l&#8217;\u00e9quipe.<\/p>\n<p><strong>\u00c9l\u00e9ments<\/strong>\u00a0(exemple officiel) :<\/p>\n<ul>\n<li><strong>Client de banque personnelle<\/strong>\u00a0(Personne) \u2013 Un client poss\u00e9dant un ou plusieurs comptes bancaires personnels.<\/li>\n<li><strong>Syst\u00e8me de banque en ligne<\/strong>\u00a0(Syst\u00e8me logiciel) \u2013 Le nouveau syst\u00e8me que nous d\u00e9veloppons.<\/li>\n<li><strong>Syst\u00e8me bancaire central<\/strong>\u00a0(Syst\u00e8me logiciel, existant) \u2013 Syst\u00e8me principal qui g\u00e8re les donn\u00e9es des clients, les comptes et les transactions.<\/li>\n<li><strong>Syst\u00e8me de messagerie<\/strong>\u00a0(Syst\u00e8me logiciel, externe) \u2013 Service Simple d&#8217;Email d&#8217;Amazon Web Services (AWS SES) pour l&#8217;envoi de confirmations.<\/li>\n<\/ul>\n<p><strong>Relations<\/strong>:<\/p>\n<ul>\n<li>Client \u2192 utilise \u2192 Syst\u00e8me de banque en ligne (pour consulter les comptes et effectuer des paiements)<\/li>\n<li>Syst\u00e8me de banque en ligne \u2192 utilise \u2192 Syst\u00e8me bancaire central (pour les donn\u00e9es des comptes et les paiements)<\/li>\n<li>Syst\u00e8me de banque en ligne \u2192 envoie un courriel via \u2192 Syst\u00e8me de messagerie<\/li>\n<\/ul>\n<p>Voici le\u00a0<strong>Diagramme de contexte C4 PlantUML<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><\/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#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" 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#plantuml:bPJDZjem4CVlIBp3bCk2j80gzTJJ8eZQIXHG0q8zHIOPw4Ysu_e3iNsYyXoyMCSXX6LLMkt9pdp-_kDHdfmNrWSbswrtf7CP2eGVtXltSJXabwTyi2SNXEmROKL1EpN8IpKqKkYOrNU-aBGPZZ_q5z6q-ZeTAk4yMZPbur9xFFY1gUgtMzFHz_bgcItdYsmoNy-wlSQq_hByd4sJJybi4gtjbYSl4IOaTbOeXS1O-RaQtmEuP-TFlzdUdT4UHO3tFJ1biC19ZOzpDaB_30YeGT9EOwoyGEjAhR6RIqBj7w4phYulmaqT8YLssB_IS8xb5iwTZWKBXQ2X361aS8J1EgPJngEB9N91bczD5JVeiAQqnkf6FbIOdPjbgBEAZHkbzyaZnnH1bw6IssYiHFDaN90yT9P_9K4FkDrYxWCxYWWaYFjg_s-Ud2Eia3Sy5r5GEpildSRouf0H4l10l3CydDtfQECPSGgUmUaOBv6jcgDxV0qQFxcmTYBtn6fk2BFau1jAXSw97LfwFR2hew93kwSS8ILbU2UAXqG9adoEbFXLQbZZ1keO1ztHEeKqIIyxz81wNrAzSrkoIboXsgrlA9lTkV-MAq-I7CQKc70tyFxqtrhXPZ99L81nItEMn3O9Un9d0LFnd4t-9w5tYNihUPsu-kkBtM_sXBhWtyGV\" \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\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagramme de contexte du syst\u00e8me (Niveau 1) pour le syst\u00e8me de banque en ligne\r\n\r\nPersonne(client, \"Client de banque personnelle\", \"Un client poss\u00e9dant un ou plusieurs comptes bancaires personnels.\")\r\nSyst\u00e8me(systeme_banque_en_ligne, \"Syst\u00e8me de banque en ligne\", \"Le nouveau syst\u00e8me pour consulter les comptes et effectuer des paiements.\")\r\nSyst\u00e8me(systeme_banque_centrale, \"Syst\u00e8me bancaire central\", \"Syst\u00e8me principal existant g\u00e9rant les donn\u00e9es des clients, les comptes et les transactions.\")\r\nSyst\u00e8me_Ext(systeme_messagerie, \"Syst\u00e8me de messagerie\", \"Service Simple d'Email d'Amazon Web Services (AWS SES) pour l'envoi de confirmations.\")\r\n\r\nRel(client, systeme_banque_en_ligne, \"Utilise\")\r\nRel(systeme_banque_en_ligne, systeme_banque_centrale, \"Utilise\")\r\nRel(systeme_banque_en_ligne, systeme_messagerie, \"Envoie un courriel via\")\r\n\r\nLay_D(client, systeme_banque_en_ligne)\r\nLay_D(systeme_banque_en_ligne, systeme_banque_centrale)\r\nLay_U(systeme_messagerie, systeme_banque_en_ligne)\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bPJDZjem4CVlIBp3bCk2j80gzTJJ8eZQIXHG0q8zHIOPw4Ysu_e3iNsYyXoyMCSXX6LLMkt9pdp-_kDHdfmNrWSbswrtf7CP2eGVtXltSJXabwTyi2SNXEmROKL1EpN8IpKqKkYOrNU-aBGPZZ_q5z6q-ZeTAk4yMZPbur9xFFY1gUgtMzFHz_bgcItdYsmoNy-wlSQq_hByd4sJJybi4gtjbYSl4IOaTbOeXS1O-RaQtmEuP-TFlzdUdT4UHO3tFJ1biC19ZOzpDaB_30YeGT9EOwoyGEjAhR6RIqBj7w4phYulmaqT8YLssB_IS8xb5iwTZWKBXQ2X361aS8J1EgPJngEB9N91bczD5JVeiAQqnkf6FbIOdPjbgBEAZHkbzyaZnnH1bw6IssYiHFDaN90yT9P_9K4FkDrYxWCxYWWaYFjg_s-Ud2Eia3Sy5r5GEpildSRouf0H4l10l3CydDtfQECPSGgUmUaOBv6jcgDxV0qQFxcmTYBtn6fk2BFau1jAXSw97LfwFR2hew93kwSS8ILbU2UAXqG9adoEbFXLQbZZ1keO1ztHEeKqIIyxz81wNrAzSrkoIboXsgrlA9lTkV-MAq-I7CQKc70tyFxqtrhXPZ99L81nItEMn3O9Un9d0LFnd4t-9w5tYNihUPsu-kkBtM_sXBhWtyGV\" \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#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" 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><strong>Raisonnement et valeur<\/strong>: Ce simple diagramme r\u00e9pond imm\u00e9diatement \u00e0 la question \u00ab Qu&#8217;est-ce que nous construisons et avec qui interagit-il ? \u00bb. Il emp\u00eache le d\u00e9bordement de p\u00e9rim\u00e8tre en rendant explicites les d\u00e9pendances externes. Les parties prenantes m\u00e9tier l&#8217;appr\u00e9cient car aucun d\u00e9tail technique n&#8217;est encore pr\u00e9sent.<\/p>\n<h3>\u00c9tape 2 : Diagramme de conteneurs (Niveau 2)<\/h3>\n<p><strong>Objectif<\/strong>: Zoomer sur le syst\u00e8me de banque en ligne et afficher les principaux unit\u00e9s d\u00e9ployables\/ex\u00e9cutables (conteneurs) ainsi que leurs choix technologiques. Public cible : architectes, chefs de d\u00e9veloppement, \u00e9quipes op\u00e9rationnelles.<\/p>\n<p><strong>Conteneurs \u00e0 l&#8217;int\u00e9rieur du syst\u00e8me de banque en ligne<\/strong>:<\/p>\n<ul>\n<li><strong>Application \u00e0 page unique<\/strong>\u00a0(Navigateur web \u2013 JavaScript + Angular) \u2013 Interface utilisateur compl\u00e8te de la banque en ligne.<\/li>\n<li><strong>Application mobile<\/strong>\u00a0(Appareil mobile \u2013 natif iOS\/Android ou React Native) \u2013 Fonctionnalit\u00e9s limit\u00e9es pour une utilisation en d\u00e9placement.<\/li>\n<li><strong>Application d&#8217;API<\/strong>\u00a0(C\u00f4t\u00e9 serveur \u2013 Java + Spring Boot) \u2013 API JSON\/HTTPS utilis\u00e9e par les deux interfaces frontales.<\/li>\n<li><strong>Base de donn\u00e9es<\/strong>\u00a0(Base de donn\u00e9es relationnelle \u2013 PostgreSQL) \u2013 Stocke les donn\u00e9es de session, les pr\u00e9f\u00e9rences utilisateur, les r\u00e9sum\u00e9s de comptes mis en cache (les donn\u00e9es principales restent sur le syst\u00e8me principal).<\/li>\n<\/ul>\n<p><strong>Relations cl\u00e9s<\/strong>\u00a0(m\u00eames syst\u00e8mes externes que le niveau 1) :<\/p>\n<ul>\n<li>SPA et application mobile \u2192 appel \u2192 Application d&#8217;API<\/li>\n<li>Application d&#8217;API \u2194 Base de donn\u00e9es<\/li>\n<li>Application d&#8217;API \u2192 Syst\u00e8me bancaire central et syst\u00e8me de messagerie<\/li>\n<\/ul>\n<p><strong>Diagramme de conteneurs C4 PlantUML<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/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#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" 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#plantuml:lLPBRXj74DqJu1qwH01JY2GkubM00AP49PP1Iun7Wf0LKPmfZihkwMdtXvOI1CWTSW4lpNFCJNAILFMGuWTKafLNC-oghdhr-hqUll81N8YLxdQ-8PFhMA2w3y7w7mO33WNAJnVa8-WJ2muAAglJlAu6LeEHNIS-59fcW_EN9nDPkdqx7bJW0pfUcfxN9W0PTAVsS0S7dqvB2lTn5ZswdDFHXDGWH0k5-txJY3XwCkUC4syT1VJhFWKk9EO7OCgeuUlqUWyB-2gDREr3wT1_rAjstSvu-ElrxStqvdeo7LtVNVMFdfRkBczUJySNFrzSZMIrsmaKDAeHGUcWgb0noXOFHkVL-Kjbw-WKf_X77velRSOCpCU82etIL1gKEXDqlZRzFFfGL-YELUzS4q-rbMvJYa6jiSVnMwFoDeKdyCsou8bLDAgEokheAG5WJYmFBILo89voKyMVzj846GF3QdfMHrE0U-mJetS6mvJtV21JJdrAu8xPyoC8e34gKyS5GjmCcwONcgFcgip31X86XVCvvY5oe11aG5ZnF09C_TxjF6cxxorm_Q6rcd8sJ6rKyvdJI-HvYM58zpUibontP8FwJWrReShwfOmpXvnp0sdo4311ggnkleGqYuO3utpRwkN7tahqGjO6KLNFIECKhDq3rWQaCLrdWw4fN4s5whz3o8Ewufm57adqfzhaii60fj0iFVUjv4Lu4CwYsG2MkeoiQ9Oiwpnnj0tGIUrTU63f0BRYnN1okUQAMSguW2dLMLrBlHu7rPli-chm-kPcagswCo9ckZsv0kE3eZMVNisTDEJ8DXhnxGwOqQnVG80PUEGcP_mGpWiUNQQLnfFMWTalO_cLXJh_W6t3LP9iyEWz3t6S0jOrotcpT6W4nzR1jc6E-bW9gycEhTugyi9Y3ldzplbk_2-m_zXOef_N3l_51MjFgPmFn87kRGU5sfmiQ8KFnDSyUxDamFBScQori3_UjuRyvAB6Gv99QzQLLIyUGXyh87tOcXKpnTvmb6IOeUEBZlaZLlnUN1HHmMyiZJkSgLMcL_tXNQQoY-oebIAQHVsuyYXRUKwkWWscRkU5UeUwNUbs-7Nh4ckDUvlE9w59qf9jktaxTdekFHNRKVRwAjoeTfsxNV1_RdbAsrBhc88SHhFaYoLvvCtex7mWGjtVT5WhwV9nDLzK0_LM2drMxvdI_m2mTxONp3_9LSTDekDZqsf1i4EF7CAbALP6Jx8loBEoAHc_ptxb2vY3S_Ntdtyf84vO_viGKBKhmJ3dhS-RfMwMwIPcqx3dvVC7ZzFHre4zyv5uodps8tA0fzMcsprDFz-Ystc5fk1lzJy0\" \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\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagramme de conteneurs C4 pour le syst\u00e8me de banque en ligne\r\n\r\nPerson(customer, \"Client de banque personnelle\", \"Un client poss\u00e9dant un ou plusieurs comptes bancaires personnels.\")\r\n\r\nSystem_Boundary(internet_banking_system, \"Syst\u00e8me de banque en ligne\", \"Le nouveau syst\u00e8me pour consulter les comptes et effectuer des paiements.\") {\r\nContainer(spa, \"Application \u00e0 page unique\", \"JavaScript + Angular\", \"Interface utilisateur compl\u00e8te de la banque en ligne\", $sprite=\"angular\")\r\nContainer(mobile_app, \"Application mobile\", \"iOS\/Android (React Native)\", \"Fonctionnalit\u00e9s limit\u00e9es pour une utilisation en d\u00e9placement\", $sprite=\"react\")\r\nContainer(api_app, \"Application d'API\", \"Java + Spring Boot\", \"API JSON\/HTTPS utilis\u00e9e par les deux interfaces frontales\", $sprite=\"java\")\r\nContainerDb(database, \"Base de donn\u00e9es\", \"PostgreSQL\", \"Stocke les donn\u00e9es de session, les pr\u00e9f\u00e9rences utilisateur, les r\u00e9sum\u00e9s de comptes mis en cache\", $sprite=\"postgresql\")\r\n}\r\n\r\nSystem(core_banking_system, \"Syst\u00e8me bancaire central\", \"Syst\u00e8me principal existant g\u00e9rant les donn\u00e9es clients, les comptes et les transactions.\")\r\nSystem_Ext(email_system, \"Syst\u00e8me de messagerie\", \"Service simple de messagerie d'Amazon Web Services (AWS SES) pour envoyer des confirmations.\")\r\n\r\n' Relations\r\nRel(customer, spa, \"Utilise\", \"HTTPS\")\r\nRel(customer, mobile_app, \"Utilise\", \"HTTPS\")\r\nRel(spa, api_app, \"Appelle\", \"JSON\/HTTPS\")\r\nRel(mobile_app, api_app, \"Appelle\", \"JSON\/HTTPS\")\r\nRel(api_app, database, \"Lit et \u00e9crit\", \"JDBC\/SQL\")\r\nRel(api_app, core_banking_system, \"Interroge \/ Met \u00e0 jour\", \"JSON\/HTTPS\")\r\nRel(api_app, email_system, \"Envoie un courriel via\", \"HTTPS\")\r\n\r\n' Indications de disposition (facultatif \u2013 aide PlantUML \u00e0 organiser les \u00e9l\u00e9ments mieux)\r\nLay_D(customer, internet_banking_system)\r\nLay_D(internet_banking_system, core_banking_system)\r\nLay_U(email_system, internet_banking_system)\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:lLPBRXj74DqJu1qwH01JY2GkubM00AP49PP1Iun7Wf0LKPmfZihkwMdtXvOI1CWTSW4lpNFCJNAILFMGuWTKafLNC-oghdhr-hqUll81N8YLxdQ-8PFhMA2w3y7w7mO33WNAJnVa8-WJ2muAAglJlAu6LeEHNIS-59fcW_EN9nDPkdqx7bJW0pfUcfxN9W0PTAVsS0S7dqvB2lTn5ZswdDFHXDGWH0k5-txJY3XwCkUC4syT1VJhFWKk9EO7OCgeuUlqUWyB-2gDREr3wT1_rAjstSvu-ElrxStqvdeo7LtVNVMFdfRkBczUJySNFrzSZMIrsmaKDAeHGUcWgb0noXOFHkVL-Kjbw-WKf_X77velRSOCpCU82etIL1gKEXDqlZRzFFfGL-YELUzS4q-rbMvJYa6jiSVnMwFoDeKdyCsou8bLDAgEokheAG5WJYmFBILo89voKyMVzj846GF3QdfMHrE0U-mJetS6mvJtV21JJdrAu8xPyoC8e34gKyS5GjmCcwONcgFcgip31X86XVCvvY5oe11aG5ZnF09C_TxjF6cxxorm_Q6rcd8sJ6rKyvdJI-HvYM58zpUibontP8FwJWrReShwfOmpXvnp0sdo4311ggnkleGqYuO3utpRwkN7tahqGjO6KLNFIECKhDq3rWQaCLrdWw4fN4s5whz3o8Ewufm57adqfzhaii60fj0iFVUjv4Lu4CwYsG2MkeoiQ9Oiwpnnj0tGIUrTU63f0BRYnN1okUQAMSguW2dLMLrBlHu7rPli-chm-kPcagswCo9ckZsv0kE3eZMVNisTDEJ8DXhnxGwOqQnVG80PUEGcP_mGpWiUNQQLnfFMWTalO_cLXJh_W6t3LP9iyEWz3t6S0jOrotcpT6W4nzR1jc6E-bW9gycEhTugyi9Y3ldzplbk_2-m_zXOef_N3l_51MjFgPmFn87kRGU5sfmiQ8KFnDSyUxDamFBScQori3_UjuRyvAB6Gv99QzQLLIyUGXyh87tOcXKpnTvmb6IOeUEBZlaZLlnUN1HHmMyiZJkSgLMcL_tXNQQoY-oebIAQHVsuyYXRUKwkWWscRkU5UeUwNUbs-7Nh4ckDUvlE9w59qf9jktaxTdekFHNRKVRwAjoeTfsxNV1_RdbAsrBhc88SHhFaYoLvvCtex7mWGjtVT5WhwV9nDLzK0_LM2drMxvdI_m2mTxONp3_9LSTDekDZqsf1i4EF7CAbALP6Jx8loBEoAHc_ptxb2vY3S_Ntdtyf84vO_viGKBKhmJ3dhS-RfMwMwIPcqx3dvVC7ZzFHre4zyv5uodps8tA0fzMcsprDFz-Ystc5fk1lzJy0\" \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#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" 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><strong>Justification<\/strong>: Nous avons choisi un mod\u00e8le moderne SPA + backend API pour le web, une application mobile native pour des performances optimales, et avons gard\u00e9 la base de donn\u00e9es l\u00e9g\u00e8re (la majorit\u00e9 des donn\u00e9es se trouvent sur le syst\u00e8me principal h\u00e9rit\u00e9). Ce diagramme est la source unique de v\u00e9rit\u00e9 pour les d\u00e9cisions technologiques de haut niveau et aide les \u00e9quipes DevOps \u00e0 planifier l&#8217;infrastructure.<\/p>\n<h3>\u00c9tape 3 : Diagramme de composants (Niveau 3)<\/h3>\n<p><strong>Objectif<\/strong>: Zoomer sur un conteneur (g\u00e9n\u00e9ralement le plus complexe \u2013 l&#8217;application d&#8217;API) et afficher ses principaux composants logiques. Public cible : les \u00e9quipes de d\u00e9veloppement.<\/p>\n<p><strong>Exemple : Composants \u00e0 l&#8217;int\u00e9rieur de l&#8217;application d&#8217;API<\/strong>:<\/p>\n<ul>\n<li>Contr\u00f4leur de comptes (Spring MVC)<\/li>\n<li>Contr\u00f4leur d&#8217;authentification<\/li>\n<li>Contr\u00f4leur de r\u00e9initialisation du mot de passe<\/li>\n<li>Composant de s\u00e9curit\u00e9 (gestion de l&#8217;authentification, JWT, etc.)<\/li>\n<li>Composant de gestion des comptes (orche\u65af\u7279re les appels au syst\u00e8me bancaire central)<\/li>\n<li>Composant de notification par e-mail<\/li>\n<\/ul>\n<p><strong>Diagramme de composants C4 PlantUML<\/strong>\u00a0(orient\u00e9 vers l&#8217;application API)\u00a0:<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/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#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" 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#plantuml:fLRDSY973Bwxok_GuRAuofXBJZcjZPtTTTbhAk1iSgB4Z3oqqzqpQVKGkr9vbnpDFMymBnQfPu0si3-fSA26bbhwzEcJXhSKm8VQckEZxxJBJ9sZMeHGqG_38Pk2piwMccemWmeyvBgmPrbfXvK19xS657AZvyFHzuEn7DtVtWmjK43FHxDHQQlIeGjdLSnmV7Hp_klT_NJswSFq_UpcwjtLnyl-YPm77GogIms51sjHCOfCBXF795MLjLTifsSApKjhdeFxlKQ5JXbTE5G3TLvLHcSCkNJgVFn1mevA5q0xz7sgu5JrKfVcRrL1WQfscWFrsFe8Iw3Cwoee30fSKHlmOlYHypiTL2ZhWCH8I3sKBfCm3emEpOeEGOBwIML6evImrC3tk0m7Irr0aCS_S7xMEqbHsbsGjfnh4y7z0XQyTYcSsYagQngW8xHpviTeAs0Oo_y021Lt6hNfShz6U3dlvtE6S04Kkv1pWcQ59B0csQ9PMMWJlJOhZoOMvD2qvKn2cVs6aKhj7aflevbHlj6kxO6KBuNKGHjDaJ4wRI_aZ5W_wAYD_0tKOT4UTAGjG91qpez2bXJAZbdMlF0nXYnMDM4vePrTFOM-dPE0MkkBYSf0UrGLKvxf2ao2EL71A-X8932aGb8K5KjhUbii8cc-slu87Xn1x562AU5wTb7MBWV_t8TAx-Y2zTqxKNyU7od-RCQipnNo7KdNap2--IUsj9kcqFL9YYhKxS-ZL4n2jMVMQYjYOVrJQUHiUpULIyIwavlRi9jthpVx-TyrByop0Sx2wdZwJDT15KWRIH1JtL8UegbPiSeyREoF6DXw0AD7mh1F3jUjcGCDCMMCKhFyXHJU4TpMVTXZz5QM15EIGjsDXhuTgZGOVtk50mlQ7818cDLUX-U8ijk0SfMQLJGqgmJC1O9BIDoZ-_G0FHqxwlhJDFA7SLva4mfr39GsI0zrkLMOBMpOHPXsQ5zkQwXtFbkmeszddvSD6b7MThTlPY_ZV1xCUlkJAgjr6SbyjOaE84KXU1UZAvCziUt30PnNRbdgbfFMXpwZ57pTN8pFIqQwJRIPeRXb9xVJSJVhWlWdDCdS9ks_Zxh2TMNHByxObtqwZNybKDh6TlcjlUHTms_nzzFfU99UwVYCw_z61_6xlhmOYSjVKelunBTiieIIcDUJku_Re5ldTcjytN4zkb_qjFyXlVt6xFPRahz5b_DVd7y1\" \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\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagramme de composants pour le syst\u00e8me de banque en ligne - Application API\r\n\r\nContainer(spa, \"Application \u00e0 page unique\", \"javascript et angular\", \"Fournit toutes les fonctionnalit\u00e9s de banque en ligne aux clients via leur navigateur web.\")\r\nContainer(ma, \"Application mobile\", \"Xamarin\", \"Fournit un sous-ensemble limit\u00e9 des fonctionnalit\u00e9s de banque en ligne aux clients via leur appareil mobile.\")\r\nContainerDb(db, \"Base de donn\u00e9es\", \"Sch\u00e9ma de base de donn\u00e9es relationnelle\", \"Stocke les informations d'inscription des utilisateurs, les identifiants d'authentification hach\u00e9s, les journaux d'acc\u00e8s, etc.\")\r\nSystem_Ext(mbs, \"Syst\u00e8me bancaire principal\", \"Stocke toutes les informations essentielles sur les clients, les comptes, les transactions, etc.\")\r\n\r\nContainer_Boundary(api, \"Application API\") {\r\n    Component(accounts, \"Contr\u00f4leur de comptes\", \"Spring MVC\", \"Fournit des r\u00e9sum\u00e9s et soldes de comptes aux clients.\")\r\n    Component(auth, \"Contr\u00f4leur d'authentification\", \"Spring MVC\", \"G\u00e8re la connexion des utilisateurs, la gestion des sessions et la g\u00e9n\u00e9ration des jetons.\")\r\n    Component(reset, \"Contr\u00f4leur de r\u00e9initialisation du mot de passe\", \"Spring MVC\", \"Permet aux utilisateurs de r\u00e9initialiser leur mot de passe par e-mail.\")\r\n    Component(security, \"Composant de s\u00e9curit\u00e9\", \"Spring Bean\", \"G\u00e8re l'authentification, la g\u00e9n\u00e9ration de jetons JWT et le hachage des mots de passe.\")\r\n    Component(accountmgmt, \"Composant de gestion des comptes\", \"Spring Bean\", \"Orchestre les appels au syst\u00e8me bancaire central pour les op\u00e9rations sur les comptes.\")\r\n    Component(email, \"Composant de notification par e-mail\", \"Spring Bean\", \"Envoie des e-mails de r\u00e9initialisation de mot de passe et de v\u00e9rification de compte via SMTP.\")\r\n\r\n    Rel(accounts, security, \"Utilise\")\r\n    Rel(auth, security, \"Utilise\")\r\n    Rel(reset, security, \"Utilise\")\r\n    Rel(accountmgmt, mbs, \"Utilise\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Lit\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Utilise\", \"JSON\/HTTPS\")\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:fLRDSY973Bwxok_GuRAuofXBJZcjZPtTTTbhAk1iSgB4Z3oqqzqpQVKGkr9vbnpDFMymBnQfPu0si3-fSA26bbhwzEcJXhSKm8VQckEZxxJBJ9sZMeHGqG_38Pk2piwMccemWmeyvBgmPrbfXvK19xS657AZvyFHzuEn7DtVtWmjK43FHxDHQQlIeGjdLSnmV7Hp_klT_NJswSFq_UpcwjtLnyl-YPm77GogIms51sjHCOfCBXF795MLjLTifsSApKjhdeFxlKQ5JXbTE5G3TLvLHcSCkNJgVFn1mevA5q0xz7sgu5JrKfVcRrL1WQfscWFrsFe8Iw3Cwoee30fSKHlmOlYHypiTL2ZhWCH8I3sKBfCm3emEpOeEGOBwIML6evImrC3tk0m7Irr0aCS_S7xMEqbHsbsGjfnh4y7z0XQyTYcSsYagQngW8xHpviTeAs0Oo_y021Lt6hNfShz6U3dlvtE6S04Kkv1pWcQ59B0csQ9PMMWJlJOhZoOMvD2qvKn2cVs6aKhj7aflevbHlj6kxO6KBuNKGHjDaJ4wRI_aZ5W_wAYD_0tKOT4UTAGjG91qpez2bXJAZbdMlF0nXYnMDM4vePrTFOM-dPE0MkkBYSf0UrGLKvxf2ao2EL71A-X8932aGb8K5KjhUbii8cc-slu87Xn1x562AU5wTb7MBWV_t8TAx-Y2zTqxKNyU7od-RCQipnNo7KdNap2--IUsj9kcqFL9YYhKxS-ZL4n2jMVMQYjYOVrJQUHiUpULIyIwavlRi9jthpVx-TyrByop0Sx2wdZwJDT15KWRIH1JtL8UegbPiSeyREoF6DXw0AD7mh1F3jUjcGCDCMMCKhFyXHJU4TpMVTXZz5QM15EIGjsDXhuTgZGOVtk50mlQ7818cDLUX-U8ijk0SfMQLJGqgmJC1O9BIDoZ-_G0FHqxwlhJDFA7SLva4mfr39GsI0zrkLMOBMpOHPXsQ5zkQwXtFbkmeszddvSD6b7MThTlPY_ZV1xCUlkJAgjr6SbyjOaE84KXU1UZAvCziUt30PnNRbdgbfFMXpwZ57pTN8pFIqQwJRIPeRXb9xVJSJVhWlWdDCdS9ks_Zxh2TMNHByxObtqwZNybKDh6TlcjlUHTms_nzzFfU99UwVYCw_z61_6xlhmOYSjVKelunBTiieIIcDUJku_Re5ldTcjytN4zkb_qjFyXlVt6xFPRahz5b_DVd7y1\" \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#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" 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><strong>Raisonnement<\/strong>: Ce niveau montre comment les responsabilit\u00e9s sont r\u00e9parties (s\u00e9paration des pr\u00e9occupations) et rend l&#8217;int\u00e9gration des nouveaux d\u00e9veloppeurs beaucoup plus rapide. Vous ne dessinez des diagrammes de composants que pour les conteneurs suffisamment complexes pour le justifier.<\/p>\n<h3>\u00c9tape 4 : Diagramme de code (Niveau 4) \u2013 Optionnel<\/h3>\n<p><strong>Objectif<\/strong>: Montrer la structure interne d&#8217;un composant unique (diagramme de classes, diagramme de s\u00e9quence, etc.). Public cible : les d\u00e9veloppeurs travaillant sur ce code.<\/p>\n<p>Exemple pour le\u00a0<strong>Contr\u00f4leur d&#8217;authentification<\/strong>composant \u2013 un diagramme de classes UML simple dans PlantUML\u00a0:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/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#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" 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#plantuml:XLB9QiCm4BqBz0_2lIGK0breGmybZkiSUYgb_G1XJHnXMHD6uuHG-k-Ld8NQK2g4G6_UCYEq2Ao9kzP9KJaTmelLDUbM2Yb2O_rMnulwaeAmywP2ya1gBaLEXFi27PAwkk_N2LkXvn6-H3908r2A8iKbwq7z9h-zUomZgAkcxaDFXN9Uvgi7ANu5dBdV_JuDeBAyumrujfLcYxw8V4BdWB8KTksmjdvI4PZ4qIvC8qYm9WYR3sp0JwP3kzSzz_WRuSwQiqqDyIKqmr7I1Q3aizFEcWlAwHovVKRcEsmnM4Ow7BtMrflb8LMyRk6I_zSSQZPxLkEkr9FAEhRE1iZ-aGvR60eNu4ty33y0\" \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\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\nclassDiagram\r\n\r\nskinparam {\r\nroundcorner 8\r\nArrowColor #444444\r\nArrowFontColor #444444\r\nBorderColor #444444\r\n\r\nClass {\r\nBorderColor #1A237E\r\nBackgroundColor #E8EAF6\r\nFontColor #1A237E\r\n}\r\n}\r\n\r\nclass \"AuthenticationController\" {\r\n+login(credentials)\r\n+refreshToken()\r\n}\r\n\r\nclass \"JwtTokenProvider\" {\r\n+generateToken(user)\r\n+validateToken(token)\r\n}\r\n\r\nclass \"UserRepository\" {\r\n+findByUsername()\r\n}\r\n\r\nAuthenticationController ..&gt; JwtTokenProvider : \"utilise\"\r\nAuthenticationController ..&gt; UserRepository : \"utilise\"\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:XLB9QiCm4BqBz0_2lIGK0breGmybZkiSUYgb_G1XJHnXMHD6uuHG-k-Ld8NQK2g4G6_UCYEq2Ao9kzP9KJaTmelLDUbM2Yb2O_rMnulwaeAmywP2ya1gBaLEXFi27PAwkk_N2LkXvn6-H3908r2A8iKbwq7z9h-zUomZgAkcxaDFXN9Uvgi7ANu5dBdV_JuDeBAyumrujfLcYxw8V4BdWB8KTksmjdvI4PZ4qIvC8qYm9WYR3sp0JwP3kzSzz_WRuSwQiqqDyIKqmr7I1Q3aizFEcWlAwHovVKRcEsmnM4Ow7BtMrflb8LMyRk6I_zSSQZPxLkEkr9FAEhRE1iZ-aGvR60eNu4ty33y0\" \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#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" 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>Dans les projets r\u00e9els, vous passez souvent le niveau 4 et vous vous r\u00e9f\u00e8rez directement au code source.<\/p>\n<h3>\u00c9tape 5 : Diagrammes d&#8217;assistance<\/h3>\n<p><strong>Diagramme dynamique<\/strong>\u00a0(exemple : flux \u00ab\u00a0Voir le r\u00e9sum\u00e9 du compte\u00a0\u00bb)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/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#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" 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#plantuml:NP9BRjim48Rt0dI7gJTnW5f2stJJLHn9UHHkQjZkEg2fWKEKh_9Xr2XwWDuaFeSkrg4KfQa1BWR3_-FCFyDB7vWBKSayUoCqbx55U0p1-azbILT1y68lV6HoPfbZhTYfWXjLMibqecO-j59io-fYjaofRryMfM8-eAFKGurMceD27GhRbyYp8894g0NREQOKGdlGJ8aV4S6Qw40os5Eyweu-gku8BNgWUZQWJ_GIdJTQuvHBGQ--XKdL1z16yEZsWYDicUPCE7hmMImdv_0hpogZ0sgCRkej8t9khHIS71eDocXZsGvFbSoA4-LyUNSYkc8UQwofKdT4FsstHAGSzGxjStP0rWSVkYU5pS_G7Pr81RXnUCNqTw5tX8s2VnuucNEC7EJPxrSdprOeNuOm-7bN00qZJTBJ8C-gOMfd4xfAU09wuU3fVG4tpGPAnhc9ElWa-xp-Ub_URZRBzGZqsjxHXm8MgI5QdXkNeuG7rC0PVyJNPNhgVsSNHTefZvQC8wsPrjgYqw9xSYaSntJwoE3i8y4Ow7le7eNKvoZDi_drzLrrswmU5jsVc-Q-RgQKlaJTqe_x2m00\" \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\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Diagramme dynamique pour la vue R\u00e9sum\u00e9 des comptes\r\n\r\nPersonne(client, \"Client du service bancaire personnel\") {\r\nConteneur(spa, \"Application monopage\") {\r\nConteneur(api, \"Application API\") {\r\nConteneurBaseDeDonn\u00e9es(db, \"Base de donn\u00e9es\") {\r\nSyst\u00e8meExt\u00e9rieur(coreBanking, \"Syst\u00e8me bancaire central\")\r\n}\r\n}\r\n}\r\n}\r\n\r\nRel(client, spa, \"1. Clique sur 'Comptes'\", \"\")\r\nRel(spa, api, \"2. GET \/accounts\", \"JSON\/HTTPS\")\r\nRel(api, db, \"3. Lire le r\u00e9sum\u00e9 mis en cache\", \"\")\r\nRel(api, coreBanking, \"4. R\u00e9cup\u00e9rer les derni\u00e8res donn\u00e9es\", \"\")\r\nRel(api, spa, \"5. Retourner le JSON\", \"\")\r\n\r\nAFFICHER_L\u00c9GENDE()\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:NP9BRjim48Rt0dI7gJTnW5f2stJJLHn9UHHkQjZkEg2fWKEKh_9Xr2XwWDuaFeSkrg4KfQa1BWR3_-FCFyDB7vWBKSayUoCqbx55U0p1-azbILT1y68lV6HoPfbZhTYfWXjLMibqecO-j59io-fYjaofRryMfM8-eAFKGurMceD27GhRbyYp8894g0NREQOKGdlGJ8aV4S6Qw40os5Eyweu-gku8BNgWUZQWJ_GIdJTQuvHBGQ--XKdL1z16yEZsWYDicUPCE7hmMImdv_0hpogZ0sgCRkej8t9khHIS71eDocXZsGvFbSoA4-LyUNSYkc8UQwofKdT4FsstHAGSzGxjStP0rWSVkYU5pS_G7Pr81RXnUCNqTw5tX8s2VnuucNEC7EJPxrSdprOeNuOm-7bN00qZJTBJ8C-gOMfd4xfAU09wuU3fVG4tpGPAnhc9ElWa-xp-Ub_URZRBzGZqsjxHXm8MgI5QdXkNeuG7rC0PVyJNPNhgVsSNHTefZvQC8wsPrjgYqw9xSYaSntJwoE3i8y4Ow7le7eNKvoZDi_drzLrrswmU5jsVc-Q-RgQKlaJTqe_x2m00\" \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#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" 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><strong>Diagramme de d\u00e9ploiement<\/strong>\u00a0(mappage physique de haut niveau)\u00a0:<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/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#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" 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#plantuml:bLDDRzf04BqZyH-sN09ImLBKKqy1R99K9A8uKOzel1wSLTUxg_qWIQlyW9xx1teilyFg_-ei9arBkFHaQVQzUM_UZC-S1-j3BRkTDq9n6KfaTzuRzpv9wCaBFje85q0E3LWeHLMFkAuJ8q55rj3vKeeYcRuRBcBfzcgUrE0yMYgjKZHIFzQe_CZi9BeTBxn4bWgeBDGrCf8hcot114OSCpfOHWZtw7ppam05A0x28aF5fAWKnYxNlxw7ClsBruTxzvRrnZLyqOfzmeBbQ3U2e-jHUIfrA7i3zlKO4_afGSwj3eQyd43mUjXi-HrAhLHhAfkUnZPpeS93ssQgbKU5mVR1Y2XiZ1ISuYBryU8oeZ_01bXkh50LcsZjUuDkv-cO0Lj6wyiqZwo5Thwoc7-S7mXDm66AANbgjkZwPK7WMDibkA_k9PwEHyIbe4-ACPRMCbWKafM1jKzHdw9BhdGX91uEwWmS35fhfGrK66LVSFME_GhQjjoRo_VRpHvyixKYqhYsE07rcU8YRlvg_PmCMf2iNuDGQpeUP59pa8FOjDjPecmTjll8rclaFiHq79KCIXVtmZPeTnTnSNEpo2CpyfuT_pzrTTlklyrcHhUhX6SGc8ADgC3JOEoUZl4budzvVx9wfZO_c3o1ey5rE-FPx79waIrNy-RRUNQTPdqgdw4gwT_w3G00\" \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\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Diagramme de d\u00e9ploiement pour le syst\u00e8me bancaire en ligne\r\n\r\nN\u0153udD\u00e9ploiement(aws, \"Amazon Web Services\", \"Cloud\") {\r\nN\u0153udD\u00e9ploiement(ec2, \"Groupe d'auto-\u00e9chelonnement EC2\", \"Linux\") {\r\nConteneur(api, \"Application API\", \"Java Spring Boot\")\r\n}\r\nN\u0153udD\u00e9ploiement(rds, \"RDS\", \"PostgreSQL\") {\r\nConteneurBaseDeDonn\u00e9es(db, \"Base de donn\u00e9es\")\r\n}\r\n}\r\n\r\nN\u0153udD\u00e9ploiement(clientDevice, \"Appareil du client\", \"Web\/Mobile\") {\r\nConteneur(spa, \"Application monopage\")\r\nConteneur(mobile, \"Application mobile\")\r\n}\r\n\r\nSyst\u00e8meExt\u00e9rieur(coreBanking, \"Syst\u00e8me bancaire central (mainframe local)\")\r\n\r\nRel(spa, api, \"Effectue des appels API vers\", \"HTTPS\")\r\nRel(mobile, api, \"Effectue des appels API vers\", \"HTTPS\")\r\nRel_U(api, spa, \"Fournit au navigateur web du client\")\r\nRel_U(api, mobile, \"Fournit \u00e0 l'application mobile\")\r\n\r\nAFFICHER_L\u00c9GENDE()\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com#plantuml:bLDDRzf04BqZyH-sN09ImLBKKqy1R99K9A8uKOzel1wSLTUxg_qWIQlyW9xx1teilyFg_-ei9arBkFHaQVQzUM_UZC-S1-j3BRkTDq9n6KfaTzuRzpv9wCaBFje85q0E3LWeHLMFkAuJ8q55rj3vKeeYcRuRBcBfzcgUrE0yMYgjKZHIFzQe_CZi9BeTBxn4bWgeBDGrCf8hcot114OSCpfOHWZtw7ppam05A0x28aF5fAWKnYxNlxw7ClsBruTxzvRrnZLyqOfzmeBbQ3U2e-jHUIfrA7i3zlKO4_afGSwj3eQyd43mUjXi-HrAhLHhAfkUnZPpeS93ssQgbKU5mVR1Y2XiZ1ISuYBryU8oeZ_01bXkh50LcsZjUuDkv-cO0Lj6wyiqZwo5Thwoc7-S7mXDm66AANbgjkZwPK7WMDibkA_k9PwEHyIbe4-ACPRMCbWKafM1jKzHdw9BhdGX91uEwWmS35fhfGrK66LVSFME_GhQjjoRo_VRpHvyixKYqhYsE07rcU8YRlvg_PmCMf2iNuDGQpeUP59pa8FOjDjPecmTjll8rclaFiHq79KCIXVtmZPeTnTnSNEpo2CpyfuT_pzrTTlklyrcHhUhX6SGc8ADgC3JOEoUZl4budzvVx9wfZO_c3o1ey5rE-FPx79waIrNy-RRUNQTPdqgdw4gwT_w3G00\" \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#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" 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<h3>Comment utiliser cette \u00e9tude de cas en pratique<\/h3>\n<ol>\n<li>Commencez par un atelier : dessinez le contexte sur un tableau blanc.<\/li>\n<li>It\u00e9rez vers les conteneurs et les composants en utilisant PlantUML C4.<\/li>\n<li>Gardez les diagrammes dans le d\u00e9p\u00f4t de code (en tant que code !) afin qu&#8217;ils restent \u00e0 jour.<\/li>\n<li>G\u00e9n\u00e9rez automatiquement une documentation vivante.<\/li>\n<\/ol>\n<p>Cet exemple exact du syst\u00e8me bancaire en ligne est la r\u00e9f\u00e9rence officielle cr\u00e9\u00e9e par Simon Brown et est utilis\u00e9 par des milliers d&#8217;organisations \u00e0 travers le monde. En suivant ces \u00e9tapes, vous disposez d\u00e9sormais d&#8217;une description compl\u00e8te et pr\u00eate \u00e0 \u00eatre mise en production de l&#8217;architecture, compr\u00e9hensible par n&#8217;importe qui \u2014 du PDG au nouveau d\u00e9veloppeur junior \u2014 au bon niveau de d\u00e9tail.<\/p>\n<h3>Articles sur les diagrammes C4<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Guide ultime pour la visualisation du mod\u00e8le C4 \u00e0 l&#8217;aide des outils d&#8217;IA de Visual Paradigm<\/strong><\/a>: Ce guide explique comment tirer parti des outils aliment\u00e9s par l&#8217;IA pour automatiser et am\u00e9liorer la visualisation du mod\u00e8le C4 afin de concevoir plus rapidement des architectures logicielles.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Utilisation de l&#8217;AI C4 Studio de Visual Paradigm pour une documentation d&#8217;architecture simplifi\u00e9e<\/strong><\/a>: Cet article d\u00e9taille l&#8217;utilisation d&#8217;un studio am\u00e9lior\u00e9 par l&#8217;IA pour cr\u00e9er une documentation d&#8217;architecture logicielle claire, \u00e9volutif et maintenable.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>Le guide ultime pour C4-PlantUML Studio : r\u00e9volutionner la conception d&#8217;architecture logicielle<\/strong><\/a>: Cette ressource explore la combinaison de l&#8217;automatisation pilot\u00e9e par l&#8217;IA, de la clart\u00e9 du mod\u00e8le C4 et de la flexibilit\u00e9 de PlantUML en un outil puissant unique.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Un guide complet sur le studio C4 PlantUML aliment\u00e9 par l&#8217;IA de Visual Paradigm<\/strong><\/a>: Ce guide d\u00e9crit un outil sp\u00e9cialement con\u00e7u, publi\u00e9 \u00e0 la fin 2025, qui transforme les invites en langage naturel en diagrammes C4 multicouches.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>Studio C4-PlantUML | G\u00e9n\u00e9rateur de diagrammes C4 aliment\u00e9 par l&#8217;IA<\/strong><\/a>: Cette vue d&#8217;ensemble des fonctionnalit\u00e9s met en \u00e9vidence un outil pilot\u00e9 par l&#8217;IA con\u00e7u pour g\u00e9n\u00e9rer des diagrammes d&#8217;architecture logicielle C4 \u00e0 partir de descriptions textuelles simples.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>G\u00e9n\u00e9ration et modification de diagrammes de composants C4 avec le chatbot d&#8217;IA de Visual Paradigm<\/strong><\/a>: Ce tutoriel montre comment utiliser un chatbot aliment\u00e9 par l&#8217;IA pour cr\u00e9er et affiner it\u00e9rativement l&#8217;architecture au niveau des composants pour des syst\u00e8mes complexes.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>G\u00e9n\u00e9rateur de diagrammes C4 aliment\u00e9 par l&#8217;IA : niveaux fondamentaux et vues d&#8217;accompagnement<\/strong><\/a>: Cette page explique comment le g\u00e9n\u00e9rateur d&#8217;IA prend en charge les quatre niveaux fondamentaux du mod\u00e8le C4 \u2014 Contexte, Conteneur, Composant et D\u00e9ploiement \u2014 afin de fournir une documentation compl\u00e8te.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>G\u00e9n\u00e9rateur de diagrammes IA : version avec prise en charge compl\u00e8te du mod\u00e8le C4<\/strong><\/a>: Cette mise \u00e0 jour d\u00e9crit l&#8217;int\u00e9gration de fonctionnalit\u00e9s aliment\u00e9es par l&#8217;IA pour la cr\u00e9ation automatis\u00e9e de diagrammes hi\u00e9rarchiques du mod\u00e8le C4.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>G\u00e9n\u00e9rateur IA du mod\u00e8le C4 : automatisation de tout le cycle de mod\u00e9lisation<\/strong><\/a>: Cette ressource met en \u00e9vidence la mani\u00e8re dont un chatbot IA sp\u00e9cialis\u00e9 utilise des invites conversationnelles pour assurer la coh\u00e9rence dans la documentation architecturale des \u00e9quipes DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Revue compl\u00e8te : chatbots IA g\u00e9n\u00e9riques vs. outils C4 de Visual Paradigm<\/strong><\/a>: Cette comparaison explique pourquoi des outils sp\u00e9cialis\u00e9s comme le C4 PlantUML Studio offrent des r\u00e9sultats plus structur\u00e9s et de qualit\u00e9 professionnelle que les mod\u00e8les linguistiques g\u00e9n\u00e9raux.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Le\u00a0mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture<\/p>\n","protected":false},"author":11,"featured_media":12452,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-12451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - 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\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane\" \/>\n<meta property=\"og:description\" content=\"Le\u00a0mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cyberm\u00e9diane\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":1729,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)\"}]},{\"@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":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - 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\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"fr_FR","og_type":"article","og_title":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane","og_description":"Le\u00a0mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture","og_url":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cyberm\u00e9diane","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"\u00c9crit par":"curtis","Dur\u00e9e de lecture estim\u00e9e":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":1729,"image":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png","articleSection":["C4 Model"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png","contentUrl":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5-1.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)"}]},{"@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\/12451","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=12451"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts\/12451\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/media\/12452"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/media?parent=12451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/categories?post=12451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/tags?post=12451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}