{"id":9946,"date":"2026-07-09T18:21:34","date_gmt":"2026-07-09T10:21:34","guid":{"rendered":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/"},"modified":"2026-07-26T19:08:58","modified_gmt":"2026-07-26T11:08:58","slug":"from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2","status":"publish","type":"post","link":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/","title":{"rendered":"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs"},"content":{"rendered":"<p data-nodeid=\"29401\">Ce guide est con\u00e7u pour vous accompagner \u00e9tape par \u00e9tape dans l&#8217;ensemble du processus de cr\u00e9ation de diagrammes professionnels \u00e0 l&#8217;aide de la syntaxe Mermaid dans VPasCode, puis de leur publication sans interruption dans votre base de connaissances sur OpenDocs. Nous couvrirons l&#8217;int\u00e9gralit\u00e9 du pipeline, du param\u00e9trage \u00e0 la publication, avec des exemples concrets et directement utilisables.<\/p>\n<p id=\"cCkoiOv\"><img alt=\"From Diagram-as-Code To Open Publishing: VPasCode + OpenDocs Workflow\" class=\"alignnone wp-image-25252 size-full\" decoding=\"async\" height=\"523\" loading=\"lazy\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" src=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png\" srcset=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png 937w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185-300x167.png 300w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185-768x429.png 768w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185-150x84.png 150w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185-400x223.png 400w\" width=\"937\"\/><\/p>\n<h2 data-nodeid=\"29402\">Pourquoi ce flux de travail est-il important<\/h2>\n<p data-nodeid=\"29403\">La documentation en d\u00e9veloppement logiciel est souvent en retard par rapport au code. Les ing\u00e9nieurs passent des heures \u00e0 concevoir des architectures syst\u00e8me complexes, tandis que les r\u00e9dacteurs techniques peinent \u00e0 maintenir les visuels \u00e0 jour dans des documents statiques. R\u00e9sultat ? Des diagrammes obsol\u00e8tes, des liens cass\u00e9s et une base de connaissances qui ne refl\u00e8te pas la r\u00e9alit\u00e9.<\/p>\n<p data-nodeid=\"29404\">VPasCode et OpenDocs r\u00e9solvent ce probl\u00e8me. VPasCode vous permet de cr\u00e9er des diagrammes professionnels \u00e0 l&#8217;aide d&#8217;une syntaxe textuelle simple (comme Mermaid), tandis qu&#8217;OpenDocs agit comme une plateforme de gestion des connaissances aliment\u00e9e par l&#8217;IA. La magie op\u00e8re lorsque vous les connectez : gr\u00e2ce \u00e0 l&#8217;int\u00e9gration du pipeline VPasCode vers OpenDocs, vous pouvez envoyer directement vos diagrammes depuis votre \u00e9diteur de code vers votre documentation en un seul clic. Plus besoin d&#8217;exporter, de t\u00e9l\u00e9charger ou de r\u00e9uploader.<\/p>\n<h2 data-nodeid=\"29405\">Configuration et outils<\/h2>\n<h3 data-nodeid=\"29406\">Mise en route<\/h3>\n<p data-nodeid=\"29407\">Avant de commencer la cr\u00e9ation de diagrammes, assurez-vous d&#8217;avoir acc\u00e8s aux outils n\u00e9cessaires :<\/p>\n<ul data-nodeid=\"29408\">\n<li data-nodeid=\"29409\">\n<p data-nodeid=\"29410\"><strong data-nodeid=\"29516\">VPasCode<\/strong>: Une plateforme interactive bas\u00e9e sur navigateur pour le Diagramme en tant que Code (DaC), combinant un environnement de d\u00e9veloppement et un \u00e9diteur. Elle prend en charge Mermaid.js, PlantUML et Graphviz dans une interface unifi\u00e9e.<\/p>\n<\/li>\n<li data-nodeid=\"29411\">\n<p data-nodeid=\"29412\"><strong data-nodeid=\"29525\">OpenDocs<\/strong>: Une plateforme de gestion des connaissances bas\u00e9e sur le web sp\u00e9cialement con\u00e7ue pour \u00eatre \u00ab consciente des diagrammes \u00bb.<\/p>\n<\/li>\n<li data-nodeid=\"29413\">\n<p data-nodeid=\"29414\"><strong data-nodeid=\"29530\">Compte Visual Paradigm<\/strong>: Bien que les versions gratuites offrent un aper\u00e7u en temps r\u00e9el et l&#8217;exportation, les \u00e9ditions payantes d\u00e9bloquent des fonctionnalit\u00e9s avanc\u00e9es d&#8217;IA telles que la correction d&#8217;erreurs et la traduction.<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29415\">Comprendre l&#8217;interface de VPasCode<\/h3>\n<p data-nodeid=\"29416\">VPasCode propose une mise en page \u00e0 deux colonnes r\u00e9active qui \u00e9quilibre la r\u00e9daction du code et les retours visuels imm\u00e9diats :<\/p>\n<ul data-nodeid=\"29417\">\n<li data-nodeid=\"29418\">\n<p data-nodeid=\"29419\"><strong data-nodeid=\"29539\">Panneau gauche : \u00c9diteur de code<\/strong>\u00a0\u2013 Contient la coloration syntaxique, le s\u00e9lecteur de moteur et le comptage d&#8217;erreurs en temps r\u00e9el.<\/p>\n<\/li>\n<li data-nodeid=\"29420\">\n<p data-nodeid=\"29421\"><strong data-nodeid=\"29544\">Panneau droit : Aper\u00e7u visuel<\/strong>\u00a0\u2013 Affiche instantan\u00e9ment votre diagramme au fur et \u00e0 mesure que vous tapez.<\/p>\n<\/li>\n<li data-nodeid=\"29422\">\n<p data-nodeid=\"29423\"><strong data-nodeid=\"29549\">Barre d&#8217;\u00e9tat<\/strong>: Affiche la validation syntaxique en temps r\u00e9el et le nombre d&#8217;erreurs.<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29424\">Connexion du pipeline<\/h3>\n<p data-nodeid=\"29425\">L&#8217;int\u00e9gration est int\u00e9gr\u00e9e, donc aucune cl\u00e9 API complexe n&#8217;est requise. Connectez-vous simplement aux deux plateformes avec les m\u00eames identifiants Visual Paradigm. Lorsque vous \u00eates pr\u00eat \u00e0 partager un diagramme, le bouton<strong data-nodeid=\"29560\">\u00ab Envoyer au pipeline OpenDocs \u00bb<\/strong> dans VPasCode achemine de mani\u00e8re s\u00e9curis\u00e9e votre visuel vers votre espace de travail OpenDocs.<\/p>\n<p data-nodeid=\"29426\">Le pipeline agit comme un entrep\u00f4t central s\u00e9curis\u00e9 et bas\u00e9 sur le cloud pour l&#8217;ensemble de vos actifs visuels. Il suit les versions des \u00e9l\u00e9ments, conserve l&#8217;historique des r\u00e9visions et enregistre les commentaires des utilisateurs, tout cela sans n\u00e9cessiter d&#8217;enregistrement manuel des fichiers.<\/p>\n<h2 data-nodeid=\"29427\">Exemples concrets avec Mermaid<\/h2>\n<p data-nodeid=\"29428\">Examinons ensemble comment cr\u00e9er des diagrammes du monde r\u00e9el en utilisant la syntaxe Mermaid dans VPasCode.<\/p>\n<h3 data-nodeid=\"29429\">Exemple 1 : Diagramme de flux d&#8217;authentification utilisateur<\/h3>\n<p data-nodeid=\"29430\">Cet exemple montre un processus de connexion basique utilisant un organigramme. Les organigrammes sont id\u00e9aux pour documenter la logique m\u00e9tier, les parcours utilisateurs et les flux de processus.<\/p>\n<p id=\"LGlaacr\"><img alt=\"\" class=\"alignnone size-full wp-image-25246\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1917px) 100vw, 1917px\" src=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d.png\" srcset=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d.png 1917w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d-300x136.png 300w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d-1030x468.png 1030w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d-768x349.png 768w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d-1536x698.png 1536w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d-150x68.png 150w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74e4c839d-400x182.png 400w\" width=\"1917\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#mermaid:eNpVj0Frg0AQhe+B\/IeBQm85lCIEDy3qrrm0pcT0UCSHVWdVsK7MbggS+9+7ulrM3Ga+9+bNlCS6Ck5suwFbQZoYQcaHL40EqsNWg+i6M+x2LxCmvDV2PLJW\/CA8wqfQ+qqoODt7OOmi24l6MAreVFm3vw5FIxqSS56j1gOw9IhFTZibUciErjIl\/vc4cSzq5kI4AE+TSl2BEymCd+sXJc5KPiXGtyMa6l\/nrHiyf6PNCdeTDzXAwT5R+O40CDJFBpdUNu06bDeu1aZvEAKQddP4D\/gkPYlrwhaylx7u14TPRErM8M4TLeQZPen9ATBXbRg=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpVkMuKwjAUhveC73BgFq5cDFIQFzPYi26GGVB3xUWantRATEouMmLnAeZNxufoi03SVqhZJee\/5ONUmtQnOKTTCfizztP2XjgLK\/iYOcsFN8Si06DcRSOIGalrwSmxXMkjzOdvEOd7wg3XIBCkOkP5FEMb5mdloUSoiTF47D+Ku3ByO6C0qINqEKiSEql\/\/\/SmJJiavaO0\/TMNpPkOS6555QMX1CZUW1IIJC4UFEqXx3Gw\/aUnpA1k+Zox7u8d5BmNIRV6UNTaMw6RrAPa3HbtPRiu3vw+YGy6ti\/HG4jHk08lG9jmGy79upLA\/u3XAkRKJ3zLUJx2xdvppH8ae\/UQa2BciNULvrKI4VhJH8qSRbgcK9mgMIYFPmWSh7LAiEX\/e16P1A==\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\" data-nodeid=\"29431\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD\r\n    A[D\u00e9but : L'utilisateur ouvre l'application] --&gt; B[Saisir le nom d'utilisateur et le mot de passe]\r\n    B --&gt; C{Tenter de se connecter}\r\n    C --&gt;|Succ\u00e8s| D[Rediriger vers le tableau de bord]\r\n    C --&gt;|\u00c9chec| E[Afficher le message d'erreur]\r\n    E --&gt; F{R\u00e9essayer ?}\r\n    F --&gt;|Oui| B\r\n    F --&gt;|Non| G[Fin : Connexion annul\u00e9e]\r\n    D --&gt; G\r\n\r\n    style A fill:#e1f5fe\r\n    style D fill:#e8f5e8\r\n    style E fill:#ffebee\r\n    style C fill:#f3e5f5\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpVkMuKwjAUhveC73BgFq5cDFIQFzPYi26GGVB3xUWantRATEouMmLnAeZNxufoi03SVqhZJee\/5ONUmtQnOKTTCfizztP2XjgLK\/iYOcsFN8Si06DcRSOIGalrwSmxXMkjzOdvEOd7wg3XIBCkOkP5FEMb5mdloUSoiTF47D+Ku3ByO6C0qINqEKiSEql\/\/\/SmJJiavaO0\/TMNpPkOS6555QMX1CZUW1IIJC4UFEqXx3Gw\/aUnpA1k+Zox7u8d5BmNIRV6UNTaMw6RrAPa3HbtPRiu3vw+YGy6ti\/HG4jHk08lG9jmGy79upLA\/u3XAkRKJ3zLUJx2xdvppH8ae\/UQa2BciNULvrKI4VhJH8qSRbgcK9mgMIYFPmWSh7LAiEX\/e16P1A==\" \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 Mermaid 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\/#mermaid:eNpVj0Frg0AQhe+B\/IeBQm85lCIEDy3qrrm0pcT0UCSHVWdVsK7MbggS+9+7ulrM3Ga+9+bNlCS6Ck5suwFbQZoYQcaHL40EqsNWg+i6M+x2LxCmvDV2PLJW\/CA8wqfQ+qqoODt7OOmi24l6MAreVFm3vw5FIxqSS56j1gOw9IhFTZibUciErjIl\/vc4cSzq5kI4AE+TSl2BEymCd+sXJc5KPiXGtyMa6l\/nrHiyf6PNCdeTDzXAwT5R+O40CDJFBpdUNu06bDeu1aZvEAKQddP4D\/gkPYlrwhaylx7u14TPRErM8M4TLeQZPen9ATBXbRg=\" 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 Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29432\"><strong data-nodeid=\"29582\">Comment l&#8217;utiliser<\/strong>: Copiez ce code dans l&#8217;\u00e9diteur de VPasCode, s\u00e9lectionnez \u00ab Mermaid \u00bb comme moteur, et observez le diagramme s&#8217;afficher instantan\u00e9ment. Cliquez sur \u00ab Envoyer vers le pipeline OpenDocs \u00bb pour int\u00e9grer directement ce diagramme \u00e0 votre document de sp\u00e9cification technique.<\/p>\n<h3 data-nodeid=\"29433\">Exemple 2 : Diagramme de s\u00e9quence d&#8217;authentification API REST<\/h3>\n<p data-nodeid=\"29434\">Pour documenter les interactions entre les composants du syst\u00e8me, les diagrammes de s\u00e9quence sont inestimables. Cet exemple montre un flux complet d&#8217;authentification API REST avec g\u00e9n\u00e9ration de jeton JWT.<\/p>\n<p id=\"eLVadWd\"><img alt=\"\" class=\"alignnone size-full wp-image-25247\" decoding=\"async\" height=\"1401\" loading=\"lazy\" sizes=\"auto, (max-width: 1058px) 100vw, 1058px\" src=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518.png\" srcset=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518.png 1058w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518-227x300.png 227w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518-778x1030.png 778w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518-768x1017.png 768w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518-113x150.png 113w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f74ff1a518-400x530.png 400w\" width=\"1058\"\/><\/p>\n<p>\u00a0<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#mermaid:eNqVk99PwjAQx99N\/B\/unSyi8WkPJOLQoEaIgDyX7oDG0WLbgfrXe\/0xwG2a2Jfuep\/efe+uM\/heouSYCbbSbHN+BrRYaZUsNwvUwY6n3CoNM1Odbpm2gostkxZuC4G0MQNzXESrSd2Mhw55GUym7rsFKO3aEX6foN4Jjk0q6zsmY5YtmCF\/IJywpNcLuVMYSIsauMacTMEKE6jgJq5DAlIYj0jKRaFWQgY\/nXonCUjhlRUiZxabYZzfcVk\/hTshcyh9W2KjCuvVAH4IY+MNt7J+QpdCbA9o5ErnRyCGjdlRi+UnVW7M\/gd1\/HKZxtEPG2b5Gk\/SNSLeo0Tt6nmYT1sw4hLflal6Q1kDqC\/OX7X3qtuF0SN02thDjyt4Qg8Hwf5KEurakcKTGwSYknM0J4VgYfBY514ruWqX79UP5c7NrTm0Wi2VuuvuJcwkvfm10uIL878lzl32lqGgjIYX66crlYWlKmVefwFJGMdz099aSHn45f6lvq68TROp\/gb3CBzP\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNqNk89OAjEQxu8mvsPcPBAiGk97IBExRo1gBPVcywijuy32D\/GV9jn2xZxuF6yyKBsI3fY3M983Uyx+eFQShyTmRhSHB8CP8E4rX7ygie\/NrnToDTw6ysmKsI77S2EcSVoK5eAiJ+QfqYsCYSRWNK9BeMaXbfj8\/rohw+rhcjJtYbxbNNAEzYokwuyI9S24DL2SFI602g4bDpqggbAcwR+tVFWiPTyIcOKi2+9H2RlMBFkykKMFmsUKnM3GkAgx3WG5GdyPJ1M4zvWcmvq8Wx+yuAyeRM4ZdqUKTGCHgwweUC7QhC\/kRz5tbtP23KVqAT\/JOoxn4RkOupwqVr1UBud8bLAIY\/C\/R5XUbmRWpWFltVAotAutWgprk\/zfq6DkLmG4xcagdN\/EVv6rquS2G85\/8zxt4Rjs1t28Qbee4wbgfobz9XBOez0Y30Knjd3MZjNJp+V7tPW2E2c+6WwGF3xJuL1agalKby0lbcCcDf9wT2q3\/9CAYOs6GT0HrOpbYVt9rpWf9U5gxBLCn9CQrcq9pP+nDNUsvtQ+0vukuJYz2q\/SSvFSdeMQR23ED5tpvrXLBN3b4A5zf8plZ1\/gy2\/p\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\" data-nodeid=\"29435\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">sequenceDiagram\r\n    autonumber\r\n    \r\n    acteur Utilisateur\r\n    participant Client comme Navigateur Web\r\n    participant API comme API REST\r\n    participant Auth comme Service d'authentification\r\n    participant DB comme Base de donn\u00e9es\r\n\r\n    Utilisateur-&gt;&gt;Client: Saisir les identifiants\r\n    Client-&gt;&gt;+API: POST \/login\r\n    API-&gt;&gt;+Auth: Valider les identifiants\r\n    Auth-&gt;&gt;+DB: Rechercher l'utilisateur\r\n\r\n    alt Utilisateur existe\r\n        DB--&gt;&gt;Auth: Enregistrement utilisateur\r\n        Auth-&gt;&gt;Auth: V\u00e9rifier le mot de passe\r\n        \r\n        alt Mot de passe correct\r\n            Auth-&gt;&gt;Auth: G\u00e9n\u00e9rer JWT\r\n            Auth--&gt;&gt;-API: Jeton\r\n            API--&gt;&gt;-Client: 200 OK + Jeton\r\n            Client-&gt;&gt;Client: Stocker le jeton\r\n            Client--&gt;&gt;Utilisateur: Connexion r\u00e9ussie\r\n        else Mot de passe incorrect\r\n            Auth--&gt;&gt;API: Identifiants invalides\r\n            API--&gt;&gt;Client: 401 Non autoris\u00e9\r\n            Client--&gt;&gt;Utilisateur: Mot de passe incorrect\r\n        end\r\n    else Utilisateur non trouv\u00e9\r\n        DB--&gt;&gt;-Auth: Non trouv\u00e9\r\n        Auth--&gt;&gt;API: Utilisateur invalide\r\n        API--&gt;&gt;Client: 401 Non autoris\u00e9\r\n        Client--&gt;&gt;Utilisateur: Utilisateur non trouv\u00e9\r\n    end\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNqNk89OAjEQxu8mvsPcPBAiGk97IBExRo1gBPVcywijuy32D\/GV9jn2xZxuF6yyKBsI3fY3M983Uyx+eFQShyTmRhSHB8CP8E4rX7ygie\/NrnToDTw6ysmKsI77S2EcSVoK5eAiJ+QfqYsCYSRWNK9BeMaXbfj8\/rohw+rhcjJtYbxbNNAEzYokwuyI9S24DL2SFI602g4bDpqggbAcwR+tVFWiPTyIcOKi2+9H2RlMBFkykKMFmsUKnM3GkAgx3WG5GdyPJ1M4zvWcmvq8Wx+yuAyeRM4ZdqUKTGCHgwweUC7QhC\/kRz5tbtP23KVqAT\/JOoxn4RkOupwqVr1UBud8bLAIY\/C\/R5XUbmRWpWFltVAotAutWgprk\/zfq6DkLmG4xcagdN\/EVv6rquS2G85\/8zxt4Rjs1t28Qbee4wbgfobz9XBOez0Y30Knjd3MZjNJp+V7tPW2E2c+6WwGF3xJuL1agalKby0lbcCcDf9wT2q3\/9CAYOs6GT0HrOpbYVt9rpWf9U5gxBLCn9CQrcq9pP+nDNUsvtQ+0vukuJYz2q\/SSvFSdeMQR23ED5tpvrXLBN3b4A5zf8plZ1\/gy2\/p\" \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 Mermaid 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\/#mermaid:eNqVk99PwjAQx99N\/B\/unSyi8WkPJOLQoEaIgDyX7oDG0WLbgfrXe\/0xwG2a2Jfuep\/efe+uM\/heouSYCbbSbHN+BrRYaZUsNwvUwY6n3CoNM1Odbpm2gostkxZuC4G0MQNzXESrSd2Mhw55GUym7rsFKO3aEX6foN4Jjk0q6zsmY5YtmCF\/IJywpNcLuVMYSIsauMacTMEKE6jgJq5DAlIYj0jKRaFWQgY\/nXonCUjhlRUiZxabYZzfcVk\/hTshcyh9W2KjCuvVAH4IY+MNt7J+QpdCbA9o5ErnRyCGjdlRi+UnVW7M\/gd1\/HKZxtEPG2b5Gk\/SNSLeo0Tt6nmYT1sw4hLflal6Q1kDqC\/OX7X3qtuF0SN02thDjyt4Qg8Hwf5KEurakcKTGwSYknM0J4VgYfBY514ruWqX79UP5c7NrTm0Wi2VuuvuJcwkvfm10uIL878lzl32lqGgjIYX66crlYWlKmVefwFJGMdz099aSHn45f6lvq68TROp\/gb3CBzP\" 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 Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29436\"><strong data-nodeid=\"29589\">Fonctionnalit\u00e9s cl\u00e9s illustr\u00e9es<\/strong>:<\/p>\n<ul data-nodeid=\"29437\">\n<li data-nodeid=\"29438\">\n<p data-nodeid=\"29439\"><code data-backticks=\"1\" data-nodeid=\"29590\">num\u00e9rotation automatique<\/code>\u00a0num\u00e9rote automatiquement chaque \u00e9tape<\/p>\n<\/li>\n<li data-nodeid=\"29440\">\n<p data-nodeid=\"29441\"><code data-backticks=\"1\" data-nodeid=\"29592\">acteur<\/code>\u00a0et\u00a0<code data-backticks=\"1\" data-nodeid=\"29594\">participant<\/code>\u00a0d\u00e9finissent diff\u00e9rents types d&#8217;entit\u00e9s<\/p>\n<\/li>\n<li data-nodeid=\"29442\">\n<p data-nodeid=\"29443\"><code data-backticks=\"1\" data-nodeid=\"29596\">alt<\/code>\u00a0les blocs montrent des chemins conditionnels<\/p>\n<\/li>\n<li data-nodeid=\"29444\">\n<p data-nodeid=\"29445\"><code data-backticks=\"1\" data-nodeid=\"29598\">+<\/code>\u00a0et\u00a0<code data-backticks=\"1\" data-nodeid=\"29600\">-<\/code>\u00a0les symboles indiquent l&#8217;activation et la d\u00e9sactivation des services<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29446\">Exemple 3 : Diagramme de conteneurs C4 pour une architecture microservices<\/h3>\n<p data-nodeid=\"29447\">Pour la documentation d&#8217;architecture de haut niveau, le mod\u00e8le C4 offre une clart\u00e9 exceptionnelle. Cet exemple montre un diagramme de conteneurs pour un syst\u00e8me bancaire en ligne.<\/p>\n<p id=\"AOtRkiZ\"><img alt=\"\" class=\"alignnone size-full wp-image-25248\" decoding=\"async\" height=\"704\" loading=\"lazy\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" src=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f751cbd172.png\" srcset=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f751cbd172.png 324w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f751cbd172-138x300.png 138w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f751cbd172-69x150.png 69w\" width=\"324\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#mermaid:eNqNkVFrwjAUhd8F\/8NFYWwwccqmIkOw9sGNjbnVzYfiw22bdsGYlNxUEPzxS5qOCWOwQHrD6XfPyW0LjeUnrMN2C+yiKilqofMiBZcMApQ7LguIjmTYvuMptzYsmZdlbAvYKniKhit5n+j+7BEPeA1RqV3j88eiFkMm+IFpglRJw6QBo6AiK2x\/POerh9huG5rumMx+mwVKmVpdoswEI0gqsrckAqEKnp5ZhUF8GaLBBInVHdHrk69GadvoogHTVFXSEFyA0SgJUzcDXTU+9gr+4J\/vtiVeVGTUnukt9Hqzk5Xo1HwKD\/lz\/XKBQhAcOMJyvV5FJzeeh9yMjnhjmFF\/o7lxNmHQbjV\/wRwFq\/Mg50JMuzeT2+E4uU6VUHrazfP8nGsiPTkYjCZJ9gfpcv+BhcE3hXfD8eiM+gIxTKmK\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNqNkf9qwjAQx\/8XfIdD\/9lAccqmIkOwyn7hwFHd\/ij7I22vXVhMuiR1E\/oCexN9jr7Y0rRjhTFYILnj8rnv3SWxJMkLrBfNBpilRKriIkLfUoSWu1c6P2wRQgSf8CKGHBiNObbKhGI9oT9LEs9sRgOiqeDwjv6lL3vTO7IjHXATSXkM949zG7wSqeRUQ5hCILhGngJJPyDVlFFFNKZSPf+oz1a3nkOCV+Rh4f+WdYTQNnqdHyQCI8BEbPvf5kdNUdbEFo534hBlBwoF5\/kRlc11H5al1cKUAobK9LZNtLH1vgC1vdOScEWCYlZ1WulHlJdOeW4USm\/OKHL9DN3uNNtYHcyq9yqp0rf3xiJjCDtK4Ga9XrlZMW+JGccyS6p7+Wcgqc7MLM1G9Wt6b\/KKgqYJxibts\/H5YOR3AsGEnLSjKKpzVcmS7PeHYz\/8gyyq\/gNbON8UuRiMhjXqC7zWvws=\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\" data-nodeid=\"29448\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD\r\n    sousgraphique \"Syst\u00e8me de banque en ligne\"\r\n        WebApp[Application web&lt;br\/&gt;Java, Spring MVC&lt;br\/&gt;Fournit du contenu aux utilisateurs]\r\n        API[Backend API&lt;br\/&gt;Java, Spring Boot&lt;br\/&gt;G\u00e8re la logique m\u00e9tier]\r\n        DB[(Base de donn\u00e9es&lt;br\/&gt;SQL&lt;br\/&gt;Stocke les comptes utilisateurs et les transactions)]\r\n    fin\r\n    \r\n    User[Client] --&gt;|Utilise| WebApp\r\n    WebApp --&gt;|Appelle via HTTPS| API\r\n    API --&gt;|Lit\/\u00c9crit| DB\r\n\r\n    style User fill:#08427b,color:#fff\r\n    style WebApp fill:#1168bd,color:#fff\r\n    style API fill:#1168bd,color:#fff\r\n    style DB fill:#1a5276,color:#fff\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNqNkf9qwjAQx\/8XfIdD\/9lAccqmIkOwyn7hwFHd\/ij7I22vXVhMuiR1E\/oCexN9jr7Y0rRjhTFYILnj8rnv3SWxJMkLrBfNBpilRKriIkLfUoSWu1c6P2wRQgSf8CKGHBiNObbKhGI9oT9LEs9sRgOiqeDwjv6lL3vTO7IjHXATSXkM949zG7wSqeRUQ5hCILhGngJJPyDVlFFFNKZSPf+oz1a3nkOCV+Rh4f+WdYTQNnqdHyQCI8BEbPvf5kdNUdbEFo534hBlBwoF5\/kRlc11H5al1cKUAobK9LZNtLH1vgC1vdOScEWCYlZ1WulHlJdOeW4USm\/OKHL9DN3uNNtYHcyq9yqp0rf3xiJjCDtK4Ga9XrlZMW+JGccyS6p7+Wcgqc7MLM1G9Wt6b\/KKgqYJxibts\/H5YOR3AsGEnLSjKKpzVcmS7PeHYz\/8gyyq\/gNbON8UuRiMhjXqC7zWvws=\" \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 Mermaid 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\/#mermaid:eNqNkVFrwjAUhd8F\/8NFYWwwccqmIkOw9sGNjbnVzYfiw22bdsGYlNxUEPzxS5qOCWOwQHrD6XfPyW0LjeUnrMN2C+yiKilqofMiBZcMApQ7LguIjmTYvuMptzYsmZdlbAvYKniKhit5n+j+7BEPeA1RqV3j88eiFkMm+IFpglRJw6QBo6AiK2x\/POerh9huG5rumMx+mwVKmVpdoswEI0gqsrckAqEKnp5ZhUF8GaLBBInVHdHrk69GadvoogHTVFXSEFyA0SgJUzcDXTU+9gr+4J\/vtiVeVGTUnukt9Hqzk5Xo1HwKD\/lz\/XKBQhAcOMJyvV5FJzeeh9yMjnhjmFF\/o7lxNmHQbjV\/wRwFq\/Mg50JMuzeT2+E4uU6VUHrazfP8nGsiPTkYjCZJ9gfpcv+BhcE3hXfD8eiM+gIxTKmK\" 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 Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29449\"><strong data-nodeid=\"29608\">Pourquoi cela fonctionne<\/strong>: Cette visualisation aide les parties prenantes \u00e0 comprendre les limites du syst\u00e8me sans se perdre dans les d\u00e9tails du code. Le sous-graphique regroupe les composants connexes, et les styles rendent le diagramme plus professionnel.<\/p>\n<h3 data-nodeid=\"29450\">Exemple 4 : Flux OAuth 2.0 complexe<\/h3>\n<p data-nodeid=\"29451\">Pour des sc\u00e9narios d&#8217;authentification plus avanc\u00e9s, cet exemple montre le flux de code d&#8217;autorisation OAuth 2.0 avec actualisation des jetons.<\/p>\n<p id=\"AkaHyIJ\"><img alt=\"\" class=\"alignnone size-full wp-image-25249\" decoding=\"async\" height=\"1656\" loading=\"lazy\" sizes=\"auto, (max-width: 1179px) 100vw, 1179px\" src=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9.png\" srcset=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9.png 1179w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9-214x300.png 214w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9-733x1030.png 733w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9-768x1079.png 768w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9-1094x1536.png 1094w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9-107x150.png 107w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f7535c8cf9-400x562.png 400w\" width=\"1179\"\/><\/p>\n<p>\u00a0<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#mermaid:eNqtVMFO20AQvSPxDyNOoBIpILjkgJSWCiEhipLyAZv14Kzi7JqZNaH9+s54bcdOXPXSPSRrz5s3b96MzPheobd470xOZnt6AnJMFYOvtiuk9Ny8tTEQvHL7tjQUnXWl8RG+UtiNBuZlCYbhW+EwPY1AqrhWTP2\/RPoY41kgh4osKrC7z18eT08SVmVN7u4aHTMtaDdw9hRy52HnhPmH8p8ldAOTBFE0g0fvojMRoVB4gkigz7fAzBHaCDEcC+3RSWhWAwK53ya64IHUYo6tUg0K8rWmXa7DLlWFt0DbQS+J67uPSGAJMzHQmYL\/xmKDZ\/WYBYt+hOmB1MgSaeuYRdiBoONWa9uMNmtDhqPOzdsoWFMUK2M3LWvNQPnq\/Pr29hKub6byM51epKCe5yCGB\/FQrb5MEpOpkxgmXN\/gnNFWhL20NJfGm0+7Nj7HpEAMlOls0HMPrb11Yq1FZvgiHb4R8nqARp91hgxHv0QxFRvL+h50\/suW5ZiB6ywtQih1O2tXenIO3FukzYDMRHPYYbvks45HhDcd1Lr3CfubKSL81CB8mMJl+4CelrHz435Qti09XAUuda32KCwYmxL4Wcqe\/KvIzfTquEY7wMEgDmD9yT3jTj4\/Y72PGbbASL\/S9npJHMn4P1b4rFudPxEyh+g=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNq1U0Fu2zAQvAfIH4hckiIJ4AbJxYcARnxpD2lhow+gqbXNgqJULimk\/UF\/0WP1Dn2sS65kybKS9lIdBErc3dmZnUX4FsAqWGq5czI\/PxP0yOALG\/INOP5u\/yoPwYkvXhuNMp75fymd10qX0nrxLCu9e+VuUZZCFXkO8WS0kl4XViijwfqJ6OD3bfgaXBWRs0tqbE\/Rettmn6atAIvgFHRInz+IDIQD5N\/nZ5wyIHH7+Nh3PRdPRpMiPwQS4MU61rEWiLkTsgIlPsW+LrhIn0Y1iNNcLJs6l85RsJGc+XLokgJGUCvItNM7iq7AoTAg8C9MjxEphCAhl5YoppTCRVIpvAWlGAod0J2LxZaK7mOPILaFy4OR2kGUadTxsUgMt5YadUxFoTNukGTHf0G7bGrlpG2BkJIhP4x+CmuhVOEyYLQhOxzRmxY1zctEsAl5pudHLzBsGE9+ebsEF3FkDuF2m6u7h4cbcXc\/o9ds9o4vE0rhgbq\/zciDAWNxQrlp1Wzn3fw6jP4KSaZAKE09KMLm4aTmp9pLu+MBps5ITp8miOIrNW5xkBgV6uh9TJeRiFLNbxTX6eiDNEe6bHXvnxPTksXpXieHI1GaUnPsgSfeoabuym6KoAyw3BiXdCDX6VKxw13il1GppgYcS9PtfTfDuPjXrMaBb5\/Tn6TxLIuoSIUM+pv4dFUPCi5P4LsWxjZs6jKavA9EbQmFseCl1C7K8SbY\/ez9KU6\/HDw3tkEiOgoeTv65CBXI8KogU0KuIlGU3werZIdl\/p9UyYDt4Q+uNhmV\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\" data-nodeid=\"29452\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">sequenceDiagram\r\n    autonumber\r\n    \r\n    acteur Utilisateur\r\n    participant Navigateur\r\n    participant App comme Application client\r\n    participant Auth comme Serveur d'authentification\r\n    participant Resource comme API de ressource\r\n\r\n    Utilisateur-&gt;&gt;Navigateur: Cliquez sur \"Se connecter avec OAuth\"\r\n    Navigateur-&gt;&gt;App: D\u00e9marrer la connexion\r\n    App-&gt;&gt;Navigateur: Rediriger vers le serveur d'authentification\r\n    Navigateur-&gt;&gt;Auth: Demande d'autorisation\r\n\r\n    Auth-&gt;&gt;Utilisateur: Afficher le formulaire de connexion\r\n    Utilisateur-&gt;&gt;Auth: Saisir les identifiants\r\n    Auth-&gt;&gt;Utilisateur: Afficher l'\u00e9cran de consentement\r\n    Utilisateur-&gt;&gt;Auth: Accorder les autorisations\r\n\r\n    Auth-&gt;&gt;Navigateur: Rediriger avec le code d'autorisation\r\n    Navigateur-&gt;&gt;App: Appel de retour avec le code d'autorisation\r\n\r\n    rect rgb(255, 240, 200)\r\n        Note au-dessus de App,Auth: Serveur \u00e0 serveur (s\u00e9curis\u00e9)\r\n        App-&gt;&gt;Auth: \u00c9changer le code contre des jetons\r\n        Auth--&gt;&gt;App: Jetons d'acc\u00e8s + d'actualisation\r\n    fin\r\n\r\n    App-&gt;&gt;Navigateur: D\u00e9finir la session\r\n    Navigateur--&gt;&gt;Utilisateur: Connect\u00e9\r\n\r\n    boucle Appels API\r\n        Navigateur-&gt;&gt;App: Demander des donn\u00e9es\r\n        App-&gt;&gt;Resource: Appel API + jeton d'acc\u00e8s\r\n        \r\n        alt Jeton valide\r\n            Resource--&gt;&gt;App: Donn\u00e9es\r\n            App--&gt;&gt;Navigateur: R\u00e9ponse\r\n        sinon Jeton expir\u00e9\r\n            Resource--&gt;&gt;App: 401\r\n            App-&gt;&gt;Auth: Actualiser le jeton\r\n            Auth--&gt;&gt;App: Nouveau jeton d'acc\u00e8s\r\n            App-&gt;&gt;Resource: R\u00e9essayer avec le nouveau jeton\r\n            Resource--&gt;&gt;App: Donn\u00e9es\r\n            App--&gt;&gt;Navigateur: R\u00e9ponse\r\n        fin\r\n    fin\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNq1U0Fu2zAQvAfIH4hckiIJ4AbJxYcARnxpD2lhow+gqbXNgqJULimk\/UF\/0WP1Dn2sS65kybKS9lIdBErc3dmZnUX4FsAqWGq5czI\/PxP0yOALG\/INOP5u\/yoPwYkvXhuNMp75fymd10qX0nrxLCu9e+VuUZZCFXkO8WS0kl4XViijwfqJ6OD3bfgaXBWRs0tqbE\/Rettmn6atAIvgFHRInz+IDIQD5N\/nZ5wyIHH7+Nh3PRdPRpMiPwQS4MU61rEWiLkTsgIlPsW+LrhIn0Y1iNNcLJs6l85RsJGc+XLokgJGUCvItNM7iq7AoTAg8C9MjxEphCAhl5YoppTCRVIpvAWlGAod0J2LxZaK7mOPILaFy4OR2kGUadTxsUgMt5YadUxFoTNukGTHf0G7bGrlpG2BkJIhP4x+CmuhVOEyYLQhOxzRmxY1zctEsAl5pudHLzBsGE9+ebsEF3FkDuF2m6u7h4cbcXc\/o9ds9o4vE0rhgbq\/zciDAWNxQrlp1Wzn3fw6jP4KSaZAKE09KMLm4aTmp9pLu+MBps5ITp8miOIrNW5xkBgV6uh9TJeRiFLNbxTX6eiDNEe6bHXvnxPTksXpXieHI1GaUnPsgSfeoabuym6KoAyw3BiXdCDX6VKxw13il1GppgYcS9PtfTfDuPjXrMaBb5\/Tn6TxLIuoSIUM+pv4dFUPCi5P4LsWxjZs6jKavA9EbQmFseCl1C7K8SbY\/ez9KU6\/HDw3tkEiOgoeTv65CBXI8KogU0KuIlGU3werZIdl\/p9UyYDt4Q+uNhmV\" \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 Mermaid 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\/#mermaid:eNqtVMFO20AQvSPxDyNOoBIpILjkgJSWCiEhipLyAZv14Kzi7JqZNaH9+s54bcdOXPXSPSRrz5s3b96MzPheobd470xOZnt6AnJMFYOvtiuk9Ny8tTEQvHL7tjQUnXWl8RG+UtiNBuZlCYbhW+EwPY1AqrhWTP2\/RPoY41kgh4osKrC7z18eT08SVmVN7u4aHTMtaDdw9hRy52HnhPmH8p8ldAOTBFE0g0fvojMRoVB4gkigz7fAzBHaCDEcC+3RSWhWAwK53ya64IHUYo6tUg0K8rWmXa7DLlWFt0DbQS+J67uPSGAJMzHQmYL\/xmKDZ\/WYBYt+hOmB1MgSaeuYRdiBoONWa9uMNmtDhqPOzdsoWFMUK2M3LWvNQPnq\/Pr29hKub6byM51epKCe5yCGB\/FQrb5MEpOpkxgmXN\/gnNFWhL20NJfGm0+7Nj7HpEAMlOls0HMPrb11Yq1FZvgiHb4R8nqARp91hgxHv0QxFRvL+h50\/suW5ZiB6ywtQih1O2tXenIO3FukzYDMRHPYYbvks45HhDcd1Lr3CfubKSL81CB8mMJl+4CelrHz435Qti09XAUuda32KCwYmxL4Wcqe\/KvIzfTquEY7wMEgDmD9yT3jTj4\/Y72PGbbASL\/S9npJHMn4P1b4rFudPxEyh+g=\" 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 Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29453\"><strong data-nodeid=\"29615\">Fonctionnalit\u00e9s avanc\u00e9es d\u00e9montr\u00e9es<\/strong>:<\/p>\n<ul data-nodeid=\"29454\">\n<li data-nodeid=\"29455\">\n<p data-nodeid=\"29456\"><code data-backticks=\"1\" data-nodeid=\"29616\">rect<\/code>\u00a0cr\u00e9e une section mise en \u00e9vidence avec une couleur de fond personnalis\u00e9e<\/p>\n<\/li>\n<li data-nodeid=\"29457\">\n<p data-nodeid=\"29458\"><code data-backticks=\"1\" data-nodeid=\"29618\">Note au-dessus de<\/code>\u00a0ajoute du texte explicatif<\/p>\n<\/li>\n<li data-nodeid=\"29459\">\n<p data-nodeid=\"29460\"><code data-backticks=\"1\" data-nodeid=\"29620\">boucle<\/code>\u00a0montre des interactions r\u00e9p\u00e9titives<\/p>\n<\/li>\n<li data-nodeid=\"29461\">\n<p data-nodeid=\"29462\"><code data-backticks=\"1\" data-nodeid=\"29622\">alt<\/code>\u00a0les blocs g\u00e8rent les conditions d&#8217;erreur<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29463\">Exemple 5 : Flux de d\u00e9cision avec sous-graphiques<\/h3>\n<p data-nodeid=\"29464\">Pour les flux de travail complexes avec plusieurs phases, l&#8217;utilisation de sous-graphiques organise le diagramme de mani\u00e8re logique.<\/p>\n<p id=\"lKDEEZn\"><img alt=\"\" class=\"alignnone size-full wp-image-25250\" decoding=\"async\" height=\"893\" loading=\"lazy\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" src=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f754e86fa5.png\" srcset=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f754e86fa5.png 488w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f754e86fa5-164x300.png 164w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f754e86fa5-82x150.png 82w, https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f754e86fa5-400x732.png 400w\" width=\"488\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#mermaid:eNp1z0FLwzAUB\/C74Hd4zPMOItHhQWmbdhNEytxFSg9p89IFQzOa9DCs3921aVmcNqfwfu+9P69q2GEPO3p9Badn2qIaCouwlYpDumcGF876F2SvsrYQaY45LJdPEGbbtoYdGmtcIcrcZNBYKVhpczeMNXefyxyKB6WPf4JoNoLV8G5ZJevK7Y+HwJfa4mmBlXoKP4\/GQ1\/yNdQhZcY8f5816bX7QNPB2stIG83bst+XX\/a+6Q422VYrVbDy8\/97oiGT\/jrRHhVCAEIq9XiDt4II9CWclWhW6CQrQXDlSzwrySjiDokgvqxHYYTfswdfNtOMwALxBzfVleU=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNp9kE1OwzAQhfdI3GFUFl11gVCgYgFK89OuAKHuoizcZJxaCnbwj0REuA85Ry6GEzdqQC2zsvy9mfdmCkmqPWzDywuwpYRRRf\/D3g3C7GVPFEKOkAmutDSZZoLPnLQvP\/E5KetRk2MKi8UDrJLoo2szo1FCiQo0Kq0cCpJAdm3\/PydSIyWZTt08yrh7\/J8k79qqFAzfkOtJkjAJB1Db0cr0tqA0KRgvnG90KhLkc8Z111qffrH0OC4amuLP7SCziY1STMHj11ES95Lm2bAG1hNz5FBJkbtTpX\/lT4I3sEleUQsbkkjJum+Jpy8QDBnCX0fRtV3Mt8qyvL\/Ca+pRnJLVWRKcJeFIltTD5ZREZ0l8IPQGPepNyfpAiJffkrsp2Yw9FHeIP2ngvTc=\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\" data-nodeid=\"29465\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD\r\n    sousgraphique \"Phase de construction\"\r\n        A[Analyse de code] --&gt; B[Ex\u00e9cuter les tests] --&gt; C[Cr\u00e9er l'artefact]\r\n    fin\r\n    \r\n    sousgraphique \"Phase de d\u00e9ploiement\"\r\n        D[D\u00e9ployer sur le staging] --&gt; E[Ex\u00e9cuter les tests d'int\u00e9gration]\r\n        E --&gt; F{Tests r\u00e9ussis ?}\r\n        F --&gt;|Oui| G[D\u00e9ployer en production]\r\n        F --&gt;|Non| H[Retour arri\u00e8re]\r\n    fin\r\n    \r\n    C --&gt; D\r\n    \r\n    style A fill:#e1f5fe\r\n    style B fill:#e1f5fe\r\n    style C fill:#e1f5fe\r\n    style D fill:#e8f5e8\r\n    style E fill:#e8f5e8\r\n    style F fill:#f3e5f5\r\n    style G fill:#a5d6a7\r\n    style H fill:#ffebee\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNp9kE1OwzAQhfdI3GFUFl11gVCgYgFK89OuAKHuoizcZJxaCnbwj0REuA85Ry6GEzdqQC2zsvy9mfdmCkmqPWzDywuwpYRRRf\/D3g3C7GVPFEKOkAmutDSZZoLPnLQvP\/E5KetRk2MKi8UDrJLoo2szo1FCiQo0Kq0cCpJAdm3\/PydSIyWZTt08yrh7\/J8k79qqFAzfkOtJkjAJB1Db0cr0tqA0KRgvnG90KhLkc8Z111qffrH0OC4amuLP7SCziY1STMHj11ES95Lm2bAG1hNz5FBJkbtTpX\/lT4I3sEleUQsbkkjJum+Jpy8QDBnCX0fRtV3Mt8qyvL\/Ca+pRnJLVWRKcJeFIltTD5ZREZ0l8IPQGPepNyfpAiJffkrsp2Yw9FHeIP2ngvTc=\" \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 Mermaid 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\/#mermaid:eNp1z0FLwzAUB\/C74Hd4zPMOItHhQWmbdhNEytxFSg9p89IFQzOa9DCs3921aVmcNqfwfu+9P69q2GEPO3p9Badn2qIaCouwlYpDumcGF876F2SvsrYQaY45LJdPEGbbtoYdGmtcIcrcZNBYKVhpczeMNXefyxyKB6WPf4JoNoLV8G5ZJevK7Y+HwJfa4mmBlXoKP4\/GQ1\/yNdQhZcY8f5816bX7QNPB2stIG83bst+XX\/a+6Q422VYrVbDy8\/97oiGT\/jrRHhVCAEIq9XiDt4II9CWclWhW6CQrQXDlSzwrySjiDokgvqxHYYTfswdfNtOMwALxBzfVleU=\" 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 Mermaid dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"29466\"><strong data-nodeid=\"29630\">Meilleure pratique<\/strong>: Pour les flux de travail avec 5+ t\u00e2ches, utilisez des sous-graphiques pour regrouper les \u00e9tapes connexes.<\/p>\n<h2 data-nodeid=\"29467\">Publication dans OpenDocs via le pipeline<\/h2>\n<p data-nodeid=\"29468\">Une fois votre diagramme pr\u00eat, la publication est un processus \u00e0 un clic :<\/p>\n<ol data-nodeid=\"29469\">\n<li data-nodeid=\"29470\">\n<p data-nodeid=\"29471\"><strong data-nodeid=\"29641\">Envoyer vers le pipeline<\/strong>: Dans VPasCode, cliquez sur \u00ab Envoyer vers le pipeline OpenDocs \u00bb.<\/p>\n<\/li>\n<li data-nodeid=\"29472\">\n<p data-nodeid=\"29473\"><strong data-nodeid=\"29650\">Commentaire facultatif<\/strong>: Ajoutez un contexte comme \u00ab v2.1 \u2013 Flux d\u2019authentification mis \u00e0 jour \u00bb pour aider \u00e0 identifier la version.<\/p>\n<\/li>\n<li data-nodeid=\"29474\">\n<p data-nodeid=\"29475\"><strong data-nodeid=\"29655\">Insertion dans OpenDocs<\/strong>: Dans OpenDocs, \u00e9ditez votre document, cliquez sur Ins\u00e9rer &gt; Pipeline, puis s\u00e9lectionnez votre diagramme dans la liste des ressources.<\/p>\n<\/li>\n<\/ol>\n<p data-nodeid=\"29476\">Le pipeline \u00e9limine les difficult\u00e9s li\u00e9es au t\u00e9l\u00e9chargement et au t\u00e9l\u00e9versement manuels. Il pr\u00e9serve l&#8217;\u00e9ditabilit\u00e9 de vos mod\u00e8les et garantit que chaque intervenant consulte la derni\u00e8re version d&#8217;un design.<\/p>\n<h2 data-nodeid=\"29477\">Fonctionnalit\u00e9s aliment\u00e9es par l&#8217;IA<\/h2>\n<p data-nodeid=\"29478\">Les capacit\u00e9s d&#8217;IA de Visual Paradigm poussent le dessin de diagrammes au niveau sup\u00e9rieur :<\/p>\n<p data-nodeid=\"29479\"><strong data-nodeid=\"29669\">Prompt vers diagramme<\/strong>: Dans OpenDocs, utilisez le chatbot d&#8217;IA pour g\u00e9n\u00e9rer un diagramme \u00e0 partir d&#8217;un langage naturel. Par exemple, tapez \u00ab Cr\u00e9ez un diagramme de s\u00e9quence pour un flux de traitement de paiement \u00bb et l&#8217;IA g\u00e9n\u00e9rera le code, que vous pourrez ensuite affiner dans VPasCode.<\/p>\n<p data-nodeid=\"29480\"><strong data-nodeid=\"29674\">Correction des erreurs de code par l&#8217;IA<\/strong>: Vous avez fait une erreur de syntaxe ? L&#8217;IA peut la d\u00e9tecter et proposer des corrections.<\/p>\n<p data-nodeid=\"29481\"><strong data-nodeid=\"29679\">Traduction par l&#8217;IA<\/strong>: Besoin de localiser la documentation ? Utilisez l&#8217;IA pour traduire les \u00e9tiquettes du diagramme dans plusieurs langues.<\/p>\n<h2 data-nodeid=\"29482\">Meilleures pratiques et astuces<\/h2>\n<p data-nodeid=\"29483\">Pour maximiser l&#8217;efficacit\u00e9, suivez ces meilleures pratiques :<\/p>\n<ul data-nodeid=\"29484\">\n<li data-nodeid=\"29485\">\n<p data-nodeid=\"29486\"><strong data-nodeid=\"29688\">Utilisez des titres descriptifs<\/strong>: Ajoutez des titres \u00e0 vos diagrammes pour plus de clart\u00e9 dans la documentation.<\/p>\n<\/li>\n<li data-nodeid=\"29487\">\n<p data-nodeid=\"29488\"><strong data-nodeid=\"29693\">Utilisez le panneau du pipeline<\/strong>: Dans OpenDocs, utilisez le panneau du pipeline pour organiser les diagrammes envoy\u00e9s.<\/p>\n<\/li>\n<li data-nodeid=\"29489\">\n<p data-nodeid=\"29490\"><strong data-nodeid=\"29698\">It\u00e9rez avec le bouton crayon<\/strong>: Si un diagramme n\u00e9cessite des mises \u00e0 jour, cliquez sur l&#8217;ic\u00f4ne crayon dans OpenDocs pour le rouvrir dans VPasCode. Apportez les modifications, renvoyez-le et remplacez l&#8217;ancienne version sans interruption.<\/p>\n<\/li>\n<li data-nodeid=\"29491\">\n<p data-nodeid=\"29492\"><strong data-nodeid=\"29703\">Gardez les diagrammes sous contr\u00f4le de version<\/strong>: \u00c9tant donn\u00e9 que les diagrammes sont bas\u00e9s sur du code, vous pouvez suivre les modifications dans Git, ce qui facilite le retour \u00e0 une version ant\u00e9rieure ou la comparaison des versions.<\/p>\n<\/li>\n<\/ul>\n<h2 data-nodeid=\"29493\">Conclusion<\/h2>\n<p data-nodeid=\"29494\">L&#8217;int\u00e9gration de VPasCode et d&#8217;OpenDocs repr\u00e9sente une avanc\u00e9e majeure dans la documentation technique. En traitant les diagrammes comme du code, vous gagnez en pr\u00e9cision, en contr\u00f4le de version et en facilit\u00e9 de mise \u00e0 jour. Le pipeline fluide \u00e9limine les \u00e9tapes manuelles, permettant aux ing\u00e9nieurs et aux r\u00e9dacteurs de se concentrer sur le contenu plut\u00f4t que sur la mise en forme.<\/p>\n<p class=\"\" data-nodeid=\"29495\">Commencez par exp\u00e9rimenter avec des diagrammes Mermaid simples dans VPasCode et envoyez-les vers OpenDocs. Au fur et \u00e0 mesure que vous vous sentirez plus \u00e0 l&#8217;aise, explorez les fonctionnalit\u00e9s d&#8217;IA et int\u00e9grez-les dans l&#8217;\u00e9cosyst\u00e8me plus large de Visual Paradigm. Avec ce flux de travail, votre documentation ne sera plus une simple apr\u00e8s-pens\u00e9e : elle deviendra une partie vivante et dynamique de votre processus de d\u00e9veloppement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce guide est con\u00e7u pour vous accompagner \u00e9tape par \u00e9tape dans l&#8217;ensemble du processus de cr\u00e9ation de diagrammes professionnels \u00e0 l&#8217;aide de la syntaxe Mermaid dans VPasCode, puis de leur publication sans interruption dans votre base de connaissances sur OpenDocs. Nous couvrirons l&#8217;int\u00e9gralit\u00e9 du pipeline, du param\u00e9trage \u00e0 la publication, avec des exemples concrets et [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[62,70,69],"tags":[],"class_list":["post-9946","post","type-post","status-publish","format-standard","hentry","category-ai","category-opendocs","category-vpascode","loop-entry","clr"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs - Visual Paradigm Blog Fran\u00e7ais<\/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:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs - Visual Paradigm Blog Fran\u00e7ais\" \/>\n<meta property=\"og:description\" content=\"Ce guide est con\u00e7u pour vous accompagner \u00e9tape par \u00e9tape dans l&#8217;ensemble du processus de cr\u00e9ation de diagrammes professionnels \u00e0 l&#8217;aide de la syntaxe Mermaid dans VPasCode, puis de leur publication sans interruption dans votre base de connaissances sur OpenDocs. Nous couvrirons l&#8217;int\u00e9gralit\u00e9 du pipeline, du param\u00e9trage \u00e0 la publication, avec des exemples concrets et [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Visual Paradigm Blog Fran\u00e7ais\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-09T10:21:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-26T11:08:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png\" \/>\n<meta name=\"author\" content=\"Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/\",\"url\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/\",\"name\":\"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs - Visual Paradigm Blog Fran\u00e7ais\",\"isPartOf\":{\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png\",\"datePublished\":\"2026-07-09T10:21:34+00:00\",\"dateModified\":\"2026-07-26T11:08:58+00:00\",\"author\":{\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/#\/schema\/person\/a649c442f11a53040710ddec750926c6\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#primaryimage\",\"url\":\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png\",\"contentUrl\":\"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.visual-paradigm.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/#website\",\"url\":\"https:\/\/blog.visual-paradigm.com\/fr\/\",\"name\":\"Visual Paradigm Blog Fran\u00e7ais\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.visual-paradigm.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/#\/schema\/person\/a649c442f11a53040710ddec750926c6\",\"name\":\"Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/blog.visual-paradigm.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6b756c36f5e9132f6067fb4d22bef2e3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6b756c36f5e9132f6067fb4d22bef2e3?s=96&d=mm&r=g\",\"caption\":\"Admin\"},\"url\":\"https:\/\/blog.visual-paradigm.com\/fr\/author\/vpadminuser\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs - Visual Paradigm Blog Fran\u00e7ais","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:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/","og_locale":"fr_FR","og_type":"article","og_title":"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs - Visual Paradigm Blog Fran\u00e7ais","og_description":"Ce guide est con\u00e7u pour vous accompagner \u00e9tape par \u00e9tape dans l&#8217;ensemble du processus de cr\u00e9ation de diagrammes professionnels \u00e0 l&#8217;aide de la syntaxe Mermaid dans VPasCode, puis de leur publication sans interruption dans votre base de connaissances sur OpenDocs. Nous couvrirons l&#8217;int\u00e9gralit\u00e9 du pipeline, du param\u00e9trage \u00e0 la publication, avec des exemples concrets et [&hellip;]","og_url":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/","og_site_name":"Visual Paradigm Blog Fran\u00e7ais","article_published_time":"2026-07-09T10:21:34+00:00","article_modified_time":"2026-07-26T11:08:58+00:00","og_image":[{"url":"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png","type":"","width":"","height":""}],"author":"Admin","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Admin","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/","url":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/","name":"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs - Visual Paradigm Blog Fran\u00e7ais","isPartOf":{"@id":"https:\/\/blog.visual-paradigm.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#primaryimage"},"image":{"@id":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png","datePublished":"2026-07-09T10:21:34+00:00","dateModified":"2026-07-26T11:08:58+00:00","author":{"@id":"https:\/\/blog.visual-paradigm.com\/fr\/#\/schema\/person\/a649c442f11a53040710ddec750926c6"},"breadcrumb":{"@id":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#primaryimage","url":"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png","contentUrl":"https:\/\/blog.visual-paradigm.com\/wp-content\/uploads\/2026\/07\/img_6a4f75e873185.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.visual-paradigm.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Du code \u00e0 la clart\u00e9 : un guide pour d\u00e9butants sur la cr\u00e9ation fluide de diagrammes avec VPasCode et OpenDocs"}]},{"@type":"WebSite","@id":"https:\/\/blog.visual-paradigm.com\/fr\/#website","url":"https:\/\/blog.visual-paradigm.com\/fr\/","name":"Visual Paradigm Blog Fran\u00e7ais","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.visual-paradigm.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/blog.visual-paradigm.com\/fr\/#\/schema\/person\/a649c442f11a53040710ddec750926c6","name":"Admin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blog.visual-paradigm.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6b756c36f5e9132f6067fb4d22bef2e3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6b756c36f5e9132f6067fb4d22bef2e3?s=96&d=mm&r=g","caption":"Admin"},"url":"https:\/\/blog.visual-paradigm.com\/fr\/author\/vpadminuser\/"}]}},"modified_by":"Admin","_links":{"self":[{"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/posts\/9946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/comments?post=9946"}],"version-history":[{"count":0,"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/posts\/9946\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/media?parent=9946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/categories?post=9946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.visual-paradigm.com\/fr\/wp-json\/wp\/v2\/tags?post=9946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}