{"id":2087,"date":"2026-07-08T05:45:59","date_gmt":"2026-07-08T05:45:59","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-event-modeling-syntax-swimlane-guide\/"},"modified":"2026-07-08T05:45:59","modified_gmt":"2026-07-08T05:45:59","slug":"mermaid-js-event-modeling-syntax-swimlane-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","title":{"rendered":"Syntax de mod\u00e9lisation des \u00e9v\u00e9nements Mermaid.js &#038; Guide des voies de navigation"},"content":{"rendered":"<p>La mod\u00e9lisation des \u00e9v\u00e9nements (EM) est une m\u00e9thodologie strat\u00e9gique utilis\u00e9e pour concevoir et d\u00e9crire les syst\u00e8mes d&#8217;information en cartographiant comment les donn\u00e9es \u00e9voluent, se transforment et changent au fil d&#8217;un timeline lin\u00e9aire. En omettant d\u00e9lib\u00e9r\u00e9ment les m\u00e9canismes transitoires du syst\u00e8me, un diagramme de mod\u00e9lisation des \u00e9v\u00e9nements se concentre strictement sur le flux d&#8217;information exact et ce que l&#8217;utilisateur voit explicitement \u00e0 tout moment donn\u00e9. Le moteur natif <code>eventmodeling<\/code> moteur cat\u00e9gorise automatiquement vos d\u00e9finitions de disposition en trois voies visuelles isol\u00e9es : <strong>UI\/Automatisation<\/strong>, <strong>Commande\/Mod\u00e8le de lecture<\/strong>, et <strong>\u00c9v\u00e9nements<\/strong>.<\/p>\n<h2>Comprendre les voies du syst\u00e8me<\/h2>\n<p>Lorsque vous d\u00e9finissez des \u00e9l\u00e9ments sur votre timeline, Mermaid les attribue \u00e0 des pistes horizontales sp\u00e9cifiques en fonction enti\u00e8rement des types d&#8217;entit\u00e9s sous-jacentes :<\/p>\n<ul>\n<li><strong>Voie UI\/Automatisation :<\/strong> Contient les interfaces utilisateur (<code>ui<\/code>) et les processeurs en arri\u00e8re-plan (<code>pcr<\/code> \/ <code>processeur<\/code>). Repr\u00e9sente la mani\u00e8re dont les actions sont d\u00e9clench\u00e9es ou visualis\u00e9es.<\/li>\n<li><strong>Voie Commande\/Mod\u00e8le de lecture :<\/strong> Contient les commandes (<code>cmd<\/code> \/ <code>commande<\/code>) destin\u00e9es \u00e0 modifier l&#8217;\u00e9tat du syst\u00e8me, ou les mod\u00e8les de lecture (<code>rmo<\/code> \/ <code>mod\u00e8le de lecture<\/code>) qui contiennent des donn\u00e9es de requ\u00eate structur\u00e9es.<\/li>\n<li><strong>Voie des \u00e9v\u00e9nements :<\/strong> Contient les \u00e9v\u00e9nements du domaine historiques (<code>evt<\/code> \/ <code>\u00e9v\u00e9nement<\/code>). Cette piste capture la source absolue de v\u00e9rit\u00e9 concernant ce qui s&#8217;est produit dans le pass\u00e9.<\/li>\n<\/ul>\n<h2>Structure de syntaxe de base (Compacte vs. D\u00e9tendue)<\/h2>\n<p>Chaque diagramme commence par la d\u00e9claration <code>eventmodeling<\/code> d\u00e9claration. Vous pouvez tracer votre chronologie en utilisant soit une syntaxe <strong>compacte<\/strong> (en utilisant des jetons structurels courts comme <code>tf<\/code>, <code>ui<\/code>, <code>cmd<\/code>, <code>evt<\/code>) ou une syntaxe descriptive <strong>d\u00e9tendue<\/strong> (en utilisant <code>timeframe<\/code>, <code>command<\/code>, <code>readmodel<\/code>). Les deux styles peuvent \u00eatre m\u00e9lang\u00e9s indiff\u00e9remment.<\/p>\n<h3>1. Mod\u00e8le de syntaxe compacte<\/h3>\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\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFQozVTwyU\/PzAtOLkpNzYOIGikk56YoBJcm5WaWOBelpgC1ZSbmFEMkjRVSy0oUQotTixxLSzJAUsmJJakpAMvQIAk=\" 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\/editor\/#mermaid:eNo9jcEJwzAMRe+F7PBHSNoJSuih55ABTKRQQSSDLYeu5Dm8WEIDPb\/3eBqp1U1ycIkG4oxW91aNlc1zd\/MV\/YAieC0p2BjN+HuaF7hjUcKoNMWi7J74TWcmq4R\/\/ADvjtnlN+GSnsU\/l9TqAfWOL74=\" \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\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">mod\u00e9lisation des \u00e9v\u00e9nements\r\ntf 01 ui EcranConnexion\r\ntf 02 cmd CmdSoumettreIdentifiants\r\ntf 03 evt UtilisateurAuthentifi\u00e9<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo9jcEJwzAMRe+F7PBHSNoJSuih55ABTKRQQSSDLYeu5Dm8WEIDPb\/3eBqp1U1ycIkG4oxW91aNlc1zd\/MV\/YAieC0p2BjN+HuaF7hjUcKoNMWi7J74TWcmq4R\/\/ADvjtnlN+GSnsU\/l9TqAfWOL74=\" \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\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFQozVTwyU\/PzAtOLkpNzYOIGikk56YoBJcm5WaWOBelpgC1ZSbmFEMkjRVSy0oUQotTixxLSzJAUsmJJakpAMvQIAk=\" 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 id=\"QtcNbEM\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-944\" decoding=\"async\" fetchpriority=\"high\" height=\"470\" sizes=\"(max-width: 871px) 100vw, 871px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png 871w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892-300x162.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892-768x414.png 768w\" width=\"871\"\/><\/p>\n<h3>2. Mod\u00e8le de syntaxe souple<\/h3>\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\/editor\/#mermaid:eNpVjbsNgDAMBXskdvAIfCZAtHQRA4TkAZZiRwoO8wMl9Z3ucENNckRiPdrGWLAXL6Cup8q05IPVhQLoDw4UsojXSK5uwjYXxDfEPl0\/byR8A1ovlKna+TnBG+IDHMkrJw==\" 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\/editor\/#mermaid:eNpdjsEJAkEMRe+CPaSEVSuQxYNnsYBh85cNmARmMmJLU8c0tote1PPnvffVubeHlBTiRoxCvT17Mygsyn4XophzUtBwoCp0mXKy0c3w2oCf\/UiTqyZj0Kh886qIyLjyZpJZ0r\/v9J2ie8j7Bmo+11g+TG8rqWM+9A==\" \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\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">mod\u00e9lisation des \u00e9v\u00e9nements\r\ntimeframe 01 ui EcranConnexion\r\ntimeframe 02 commande CmdSoumettreIdentifiants\r\ntimeframe 03 \u00e9v\u00e9nement UtilisateurAuthentifi\u00e9<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdjsEJAkEMRe+CPaSEVSuQxYNnsYBh85cNmARmMmJLU8c0tote1PPnvffVubeHlBTiRoxCvT17Mygsyn4XophzUtBwoCp0mXKy0c3w2oCf\/UiTqyZj0Kh886qIyLjyZpJZ0r\/v9J2ie8j7Bmo+11g+TG8rqWM+9A==\" \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\/editor\/#mermaid:eNpVjbsNgDAMBXskdvAIfCZAtHQRA4TkAZZiRwoO8wMl9Z3ucENNckRiPdrGWLAXL6Cup8q05IPVhQLoDw4UsojXSK5uwjYXxDfEPl0\/byR8A1ovlKna+TnBG+IDHMkrJw==\" 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 id=\"MtnYXzX\"><img alt=\"\" class=\"alignnone size-full wp-image-945\" decoding=\"async\" height=\"470\" sizes=\"(max-width: 871px) 100vw, 871px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f.png 871w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f-300x162.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f-768x414.png 768w\" width=\"871\"\/><\/p>\n<hr\/>\n<h2>R\u00e9f\u00e9rence de syntaxe<\/h2>\n<p>Le tableau ci-dessous d\u00e9taille les composants de donn\u00e9es principaux, les mots-cl\u00e9s de formatage et les jetons raccourcis utilis\u00e9s pour \u00e9tablir des cadres de mod\u00e9lisation des \u00e9v\u00e9nements dans l&#8217;interpr\u00e9teur en temps d&#8217;ex\u00e9cution de Mermaid.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Jetons compacts<\/th>\n<th>Mot-cl\u00e9 souple<\/th>\n<th>Affectation de voie<\/th>\n<th>Description et r\u00e8gles<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>tf<\/code><\/td>\n<td><code>timeframe<\/code><\/td>\n<td>N\/C (En-t\u00eate de grille)<\/td>\n<td>D\u00e9clare une case de cadre de colonne de chronologie s\u00e9quentielle. Doit \u00eatre suivi d&#8217;un num\u00e9ro de s\u00e9quence unique (par exemple, <code>01<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>rf<\/code><\/td>\n<td><code>resetframe<\/code><\/td>\n<td>N\/C (En-t\u00eate de grille)<\/td>\n<td>R\u00e9initialise l&#8217;index de position de colonne ou cr\u00e9e des lignes de flux automatis\u00e9es hors bande.<\/td>\n<\/tr>\n<tr>\n<td><code>ui<\/code><\/td>\n<td><code>ui<\/code><\/td>\n<td>UI\/Automatisation<\/td>\n<td>Mappe un panneau ou une page d&#8217;interface graphique que l&#8217;humain visualise ou avec laquelle il interagit.<\/td>\n<\/tr>\n<tr>\n<td><code>pcr<\/code><\/td>\n<td><code>processeur<\/code><\/td>\n<td>Interface utilisateur\/automatisation<\/td>\n<td>D\u00e9finit un processeur en arri\u00e8re-plan automatis\u00e9, un m\u00e9canisme cron ou une saga.<\/td>\n<\/tr>\n<tr>\n<td><code>cmd<\/code><\/td>\n<td><code>commande<\/code><\/td>\n<td>Commande\/Mod\u00e8le de lecture<\/td>\n<td>Repr\u00e9sente une intention d&#8217;action explicite ou une demande de modification des variables d&#8217;\u00e9tat.<\/td>\n<\/tr>\n<tr>\n<td><code>rmo<\/code><\/td>\n<td><code>mod\u00e8le de lecture<\/code><\/td>\n<td>Commande\/Mod\u00e8le de lecture<\/td>\n<td>D\u00e9finit des vues de cache structur\u00e9es en lecture seule ou des tables de projection de recherche.<\/td>\n<\/tr>\n<tr>\n<td><code>evt<\/code><\/td>\n<td><code>\u00e9v\u00e9nement<\/code><\/td>\n<td>Suivi des \u00e9v\u00e9nements<\/td>\n<td>Un enregistrement historique immuable documentant une activit\u00e9 ayant \u00e9t\u00e9 ex\u00e9cut\u00e9e avec succ\u00e8s.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Documentation des projections de donn\u00e9es de contexte<\/h2>\n<p>Pour offrir des mises en page d&#8217;informations \u00e0 haute densit\u00e9, Mermaid permet d&#8217;incorporer directement dans vos cadres de chronologie des sch\u00e9mas de donn\u00e9es explicites ou des maquettes d&#8217;\u00e9tat. Vous pouvez impl\u00e9menter cela \u00e0 l&#8217;aide de champs en ligne ou de blocs de donn\u00e9es structurales externes.<\/p>\n<h3>1. D\u00e9finitions de donn\u00e9es en ligne<\/h3>\n<p>Pour des d\u00e9finitions de param\u00e8tres br\u00e8ves, ajoutez une carte de donn\u00e9es explicite entour\u00e9e de crochets (<code>{ }<\/code>) directement sur l&#8217;instruction de ligne de cadre actif :<\/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\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFRIzk1RcExJCcl3TiwqUahWyCxJzQ3OLrVSKC4pAirTUUjOL80rsVLIzCtRqIVoMlJILStR8AQqBGpMTcHUpFALALSaJIE=\" 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\/editor\/#mermaid:eNptzLENwjAQRuEeKTv8A1AEynTeACkTWPYhDuKzZJ\/ToAzkhiVuMQK09O97KUfrC1evnAWRKqyv1oUSidbhoFeMJ4QU4e65KRXXLl6YCp5gpTQ\/2oRw8\/YSOiLkJjphp59i+\/EzaFW4ohwW+l6s\/9HY3vC1NTw=\" \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\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">mod\u00e9lisation des \u00e9v\u00e9nements\r\ntf 01 cmd AjouterAuPanier { itemSku: cha\u00eene, count: entier }\r\ntf 02 evt ArticleAjout\u00e9 { itemSku: cha\u00eene }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptzLENwjAQRuEeKTv8A1AEynTeACkTWPYhDuKzZJ\/ToAzkhiVuMQK09O97KUfrC1evnAWRKqyv1oUSidbhoFeMJ4QU4e65KRXXLl6YCp5gpTQ\/2oRw8\/YSOiLkJjphp59i+\/EzaFW4ohwW+l6s\/9HY3vC1NTw=\" \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\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFRIzk1RcExJCcl3TiwqUahWyCxJzQ3OLrVSKC4pAirTUUjOL80rsVLIzCtRqIVoMlJILStR8AQqBGpMTcHUpFALALSaJIE=\" 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 id=\"leNAhTk\"><img alt=\"\" class=\"alignnone size-full wp-image-946\" decoding=\"async\" height=\"330\" sizes=\"(max-width: 869px) 100vw, 869px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7.png 869w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7-300x114.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7-768x292.png 768w\" width=\"869\"\/><\/p>\n<h3>2. Blocs de donn\u00e9es s\u00e9par\u00e9s (crochets doubles)<\/h3>\n<p>Lors de la gestion de matrices d&#8217;objets complexes ou de la r\u00e9utilisation de propri\u00e9t\u00e9s correspondantes dans diff\u00e9rents cadres, d\u00e9finissez un descripteur externe. Placez une r\u00e9f\u00e9rence de pointeur encadr\u00e9e par des crochets doubles (<code>[[IDBloc]]<\/code>) sur la ligne de cadre, et d\u00e9taillez les composants de l&#8217;objet s\u00e9par\u00e9ment en bas du script via le mot-cl\u00e9 <code>data<\/code>mot-cl\u00e9 :<\/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\/editor\/#mermaid:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" 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\/editor\/#mermaid:eNplysEKgkAUheG94DucnatCJRe6i9y0MopW4mKYe6PImYHxKkT0QD6HL5bWJmh3+M5vHE1je+uU3JwFcYdpHKbRsmErXRjIBXECbQi7K+u76wV1XXliXypRcdI03yYFD4LPcWiVZvrPwoDmjR\/FMwwAt8CeCkTVsVzleRotKk5UuzWut1Ig2WTrLF5Y996z1Y+5Pp\/KuXy9AdGOPj0=\" \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\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">mod\u00e9lisation des \u00e9v\u00e9nements\r\ntf 01 cmd Checkout [[OrderData01]]\r\ntf 02 evt OrderPlaced [[OrderData01]]\r\n\r\ndata OrderData01 {\r\n  orderId: 'ORD-992'\r\n  totalAmount: 145.50\r\n  currency: 'USD'\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplysEKgkAUheG94DucnatCJRe6i9y0MopW4mKYe6PImYHxKkT0QD6HL5bWJmh3+M5vHE1je+uU3JwFcYdpHKbRsmErXRjIBXECbQi7K+u76wV1XXliXypRcdI03yYFD4LPcWiVZvrPwoDmjR\/FMwwAt8CeCkTVsVzleRotKk5UuzWut1Ig2WTrLF5Y996z1Y+5Pp\/KuXy9AdGOPj0=\" \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\/editor\/#mermaid:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" 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 id=\"Qjeasgy\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-947\" decoding=\"async\" height=\"362\" loading=\"lazy\" sizes=\"auto, (max-width: 1105px) 100vw, 1105px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2.png 1105w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-300x98.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-1024x335.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-768x252.png 768w\" width=\"1105\"\/><\/p>\n<hr\/>\n<h2>Maquette du monde r\u00e9el : Automatisation des stocks pour e-commerce<\/h2>\n<p>Cette maquette compl\u00e8te et \u00e0 plusieurs voies met en \u00e9vidence un flux de travail avanc\u00e9 d&#8217;architecture e-commerce. Elle d\u00e9crit les actions successives de l&#8217;utilisateur en front-end, les transitions par des commandes de traitement, suit les traces historiques des \u00e9v\u00e9nements, et met en \u0153uvre un processeur de microservice en arri\u00e8re-plan automatis\u00e9 via un <code>resetframe<\/code> (<code>rf<\/code>), et fournit des mod\u00e8les de blocs de donn\u00e9es isol\u00e9s.<\/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\/editor\/#mermaid:eNqVUjtPwzAQ3iPlP9yCukCVlkAhWykMHRAV5TEgBmNfW6uxXexzoar47\/hRoEgsTFFy3\/MuuEZNyghspZ6XxcEBTBbMIfQauHdoYcQswVgTWsZJGl0WNIOqB17CxBrhOY0YsdbMHyS+5WEfuBIwFGJMqO5MUnh6io+RUYpp8fycgceAa0oO3QgNDBQ75FWM9YWrwSoDw+C\/xmupZQREux12wjatYUl1r0C\/gaEnoxgF0QvGl3NrvBahS5Q2dgMPrJWC5VI22Jz8EScHOIUVt3CLYSHrRAjVOTpnbJ4PcuO2NTzYPTKLC+MdTsnwJWzBLX0DjmzY8CG80qYBqQk+MvcsuX6n6iZStgrBt2B\/XMeiAe+liNTU9Oo93EWzFi7DDWDKF6gQpivkciZ5oriyEHG2t33YlgXAKh8vSnYmtzeXR3XV78TBq2eaZAzZK4uPPXo6yX\/IACQVOmJqFd4HvbOTuq6q6rfq7nhZl0z4leLu3U6AB8TUv6TvDfTr7vl5oH8CPDHgfQ==\" 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\/editor\/#mermaid:eNqVUrtuGzEQ7A+4f9jGcBMLJ0WO7XSGkkJFEMEKnMJwsSHXEeEjeeLjEkHw\/+Sa\/MT9mJekjMiAm1R35M7OzsxSWzkOrfIYlDUgycM49ONgSJMJvq5OTmC1QU8whY+wNIEcigyNQeU2ig6wJwEtQYdGkaur8ADNFKKClbMyirDAgK39eavoVynOQGgJ11IuA+lvdoEuwN1d+iys1mjk\/X0BvgfqA6TCJEG5g+QB+blnhS+4OTht4Zql9fRFGZUAadwBu8JdazGzHlmasaVbbJUs5jEGq\/l3GykH4YMVjx6IK86p8Y+js65FU1eOB56\/IaxI+QCdcHBDnlyfiTkEQd7bQzAXxXvbWsHpfUdHGxs9rdM02IN\/jCxLbHD8a+gdbMOOj+yUg4WnwnCZZy9NCsC63SS3loGczh7cv9lLyd0xKpl6s\/V1Nw5CPSiR6744FZtx0JgOIK0x48CX9JuXbYjfAOeDcLQc2NcVQFd2myecrm6+fjqbN7PTVNlGZL1Z+LSuno4I8s7+rx0gKE0+oO7SxcX08nw+b5rmNfFhwYU6WH5uaSv+hUIwZB1\/5ALfzeaTqysmeAbXPf6m\" \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\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">mod\u00e9lisation des \u00e9v\u00e9nements\r\n%% Phase 1 : Interaction utilisateur avec le panier\r\ntf 01 ui ProductCatalogView\r\ntf 02 cmd AddItemToCart [[CartCommand]]\r\ntf 03 evt Cart.ItemAdded [[CartEvent]]\r\ntf 04 rmo ActiveMiniCartView [[CartPayload]]\r\n\r\n%% Phase 2 : Validation automatique des stocks en arri\u00e8re-plan\r\nrf 05 evt Cart.ItemAdded\r\ntf 06 pcr ReservationProcessor\r\ntf 07 cmd AllocateWarehouseStock { sku : cha\u00eene, qty : entier }\r\ntf 08 evt Inventory.StockReserved { reservationId : uuid }\r\n\r\n%% Sp\u00e9cifications des sch\u00e9mas de donn\u00e9es externes\r\ndata CartCommand {\r\n  productId : 'PROD-402'\r\n  quantity : 1\r\n}\r\ndata CartEvent {\r\n  productId : 'PROD-402'\r\n  quantity : 1\r\n  timestamp : 1718544000\r\n}\r\ndata CartPayload {\r\n  totalItems : 1\r\n  cartSubtotal : 24.99\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVUrtuGzEQ7A+4f9jGcBMLJ0WO7XSGkkJFEMEKnMJwsSHXEeEjeeLjEkHw\/+Sa\/MT9mJekjMiAm1R35M7OzsxSWzkOrfIYlDUgycM49ONgSJMJvq5OTmC1QU8whY+wNIEcigyNQeU2ig6wJwEtQYdGkaur8ADNFKKClbMyirDAgK39eavoVynOQGgJ11IuA+lvdoEuwN1d+iys1mjk\/X0BvgfqA6TCJEG5g+QB+blnhS+4OTht4Zql9fRFGZUAadwBu8JdazGzHlmasaVbbJUs5jEGq\/l3GykH4YMVjx6IK86p8Y+js65FU1eOB56\/IaxI+QCdcHBDnlyfiTkEQd7bQzAXxXvbWsHpfUdHGxs9rdM02IN\/jCxLbHD8a+gdbMOOj+yUg4WnwnCZZy9NCsC63SS3loGczh7cv9lLyd0xKpl6s\/V1Nw5CPSiR6744FZtx0JgOIK0x48CX9JuXbYjfAOeDcLQc2NcVQFd2myecrm6+fjqbN7PTVNlGZL1Z+LSuno4I8s7+rx0gKE0+oO7SxcX08nw+b5rmNfFhwYU6WH5uaSv+hUIwZB1\/5ALfzeaTqysmeAbXPf6m\" \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\/editor\/#mermaid:eNqVUjtPwzAQ3iPlP9yCukCVlkAhWykMHRAV5TEgBmNfW6uxXexzoar47\/hRoEgsTFFy3\/MuuEZNyghspZ6XxcEBTBbMIfQauHdoYcQswVgTWsZJGl0WNIOqB17CxBrhOY0YsdbMHyS+5WEfuBIwFGJMqO5MUnh6io+RUYpp8fycgceAa0oO3QgNDBQ75FWM9YWrwSoDw+C\/xmupZQREux12wjatYUl1r0C\/gaEnoxgF0QvGl3NrvBahS5Q2dgMPrJWC5VI22Jz8EScHOIUVt3CLYSHrRAjVOTpnbJ4PcuO2NTzYPTKLC+MdTsnwJWzBLX0DjmzY8CG80qYBqQk+MvcsuX6n6iZStgrBt2B\/XMeiAe+liNTU9Oo93EWzFi7DDWDKF6gQpivkciZ5oriyEHG2t33YlgXAKh8vSnYmtzeXR3XV78TBq2eaZAzZK4uPPXo6yX\/IACQVOmJqFd4HvbOTuq6q6rfq7nhZl0z4leLu3U6AB8TUv6TvDfTr7vl5oH8CPDHgfQ==\" 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 id=\"vQXOTmY\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-948\" decoding=\"async\" height=\"801\" loading=\"lazy\" sizes=\"auto, (max-width: 2180px) 100vw, 2180px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174.png 2180w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-300x110.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-1024x376.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-768x282.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-1536x564.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-2048x752.png 2048w\" width=\"2180\"\/><\/p>\n<hr\/>\n<p><em><strong>Astuce de syntaxe :<\/strong> Pour cr\u00e9er des voies secondaires bien organis\u00e9es sous les voies principales ou isoler plusieurs sous-syst\u00e8mes, vous pouvez pr\u00e9fixer les \u00e9tiquettes d&#8217;entit\u00e9s par une cha\u00eene de qualificateur d&#8217;espace de noms s\u00e9par\u00e9e par des points (par exemple : <code>evt Cart.ItemAdded<\/code> vs. <code>evt Inventory.StockReserved<\/code>). Le moteur g\u00e9n\u00e9rera automatiquement des lignes distinctes de sous-groupes pour ces entit\u00e9s.<\/em><\/p>\n<hr\/>\n<h2>P\u00e9ch\u00e9s courants de syntaxe et contraintes du syst\u00e8me<\/h2>\n<p>Lors de la conception de blocs de comportement \u00e0 s\u00e9rie temporelle tr\u00e8s dense, gardez \u00e0 l&#8217;esprit ces r\u00e8gles de validation de formatage afin d&#8217;\u00e9viter les erreurs de compilation :<\/p>\n<ul>\n<li><strong>Num\u00e9ros de s\u00e9quence de suivi des intervalles de temps :<\/strong> Chaque <code>tf<\/code> ou <code>intervalle de temps<\/code> affectation n\u00e9cessite un jeton d&#8217;identifiant num\u00e9rique explicite imm\u00e9diatement apr\u00e8s. \u00c9crire une d\u00e9finition de jeton comme <code>tf ui ProductView<\/code> sans un index num\u00e9rique interm\u00e9diaire arr\u00eatera le traitement du syst\u00e8me.<\/li>\n<li><strong>Espaces blancs et formatage des objets :<\/strong> \u00c0 l&#8217;int\u00e9rieur des cartes de donn\u00e9es au format JSON ou en tant que donn\u00e9es autonomes <code>donn\u00e9es<\/code> d\u00e9clarations, assurez-vous des affectations propres. Oublier une accolade ouvrante ou des crochets fermants peut entra\u00eener des mises en page de grille non r\u00e9solues.<\/li>\n<li><strong>Diff\u00e9rencier les intervalles de temps des r\u00e9initialisations :<\/strong> Utilisez <code>tf<\/code> pour les op\u00e9rations en avancement, pilot\u00e9es par l&#8217;humain. Utilisez <code>rf<\/code> \/ <code>resetframe<\/code> intentionnellement lorsque vous devez illustrer des d\u00e9clencheurs hors bande, tels qu&#8217;un job cron en arri\u00e8re-plan traitant un \u00e9v\u00e9nement survenu pr\u00e9c\u00e9demment.<\/li>\n<li><strong>R\u00e9utilisation de donn\u00e9es immuables :<\/strong> Lorsque vous faites r\u00e9f\u00e9rence \u00e0 la m\u00eame structure de charge utile de donn\u00e9es \u00e0 travers plusieurs \u00e9tapes du chronologie, conservez des correspondances de noms identiques dans vos points de r\u00e9f\u00e9rence de donn\u00e9es afin d&#8217;\u00e9viter la g\u00e9n\u00e9ration de n\u0153uds en double.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>La mod\u00e9lisation des \u00e9v\u00e9nements (EM) est une m\u00e9thodologie strat\u00e9gique utilis\u00e9e pour concevoir et d\u00e9crire les syst\u00e8mes d&#8217;information en cartographiant comment les donn\u00e9es \u00e9voluent, se transforment et changent au fil d&#8217;un timeline lin\u00e9aire. En omettant d\u00e9lib\u00e9r\u00e9ment les m\u00e9canismes transitoires du syst\u00e8me,&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":19,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2087","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Event Modeling | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\" \/>\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.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Event Modeling | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\",\"name\":\"Mermaid Event Modeling | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\",\"datePublished\":\"2026-07-08T05:45:59+00:00\",\"description\":\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Syntax de mod\u00e9lisation des \u00e9v\u00e9nements Mermaid.js &#038; Guide des voies de navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Event Modeling | VPasCode Text to Diagram Guide","description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","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.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid Event Modeling | VPasCode Text to Diagram Guide","og_description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","name":"Mermaid Event Modeling | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","datePublished":"2026-07-08T05:45:59+00:00","description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Syntax de mod\u00e9lisation des \u00e9v\u00e9nements Mermaid.js &#038; Guide des voies de navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2087"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}