{"id":2095,"date":"2026-07-02T08:12:16","date_gmt":"2026-07-02T08:12:16","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-user-journey-syntax-guide\/"},"modified":"2026-07-02T08:12:16","modified_gmt":"2026-07-02T08:12:16","slug":"mermaid-js-user-journey-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","title":{"rendered":"Guide de syntaxe du parcours utilisateur Mermaid.js"},"content":{"rendered":"<p>Un diagramme de parcours utilisateur d\u00e9crit les \u00e9tapes que l&#8217;utilisateur suit pour atteindre un objectif sp\u00e9cifique au sein de votre application. Contrairement aux organigrammes centr\u00e9s sur les syst\u00e8mes ou aux diagrammes de s\u00e9quence, les parcours utilisateurs se concentrent sur les actions humaines, les \u00e9tapes du flux de travail et le suivi de la satisfaction de l&#8217;utilisateur au fil du temps.<\/p>\n<h2>Structure de syntaxe de base<\/h2>\n<p>Chaque parcours utilisateur commence par la d\u00e9claration <code>journey<\/code> d\u00e9claration, suivie d&#8217;un titre et de sections s\u00e9quentielles qui d\u00e9composent l&#8217;exp\u00e9rience utilisateur.<\/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:eNrLyi8tykut5OUqySzJSVUITswtAFKhxalFCl4wqeLU5JLM\/DyF4JLE9FQFv8TcVF4uBYWQxOJsMMdKITg5vwhIOSaX5BcZ6kBoIwCMHh4w\" 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:eNrLyi8tykut5OUqySzJSVUISCxKBooUK5SWZOZkFieWpJYWKaRWpOYW5KTychWnJpdk5ucp+OXnKqSkKuSoH15ZklgAlFCACyUqlBxelJyRqmClEJycXwSiHZNBphjqQBlGAHz+KI8=\" \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\">journey\r\ntitle Parcours utilisateur exemple\r\nsection Nom de l'\u00e9tape\r\n  Nom de la t\u00e2che : Score : Acteur1, Acteur2<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNrLyi8tykut5OUqySzJSVUISCxKBooUK5SWZOZkFieWpJYWKaRWpOYW5KTychWnJpdk5ucp+OXnKqSkKuSoH15ZklgAlFCACyUqlBxelJyRqmClEJycXwSiHZNBphjqQBlGAHz+KI8=\" \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:eNrLyi8tykut5OUqySzJSVUITswtAFKhxalFCl4wqeLU5JLM\/DyF4JLE9FQFv8TcVF4uBYWQxOJsMMdKITg5vwhIOSaX5BcZ6kBoIwCMHh4w\" 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=\"UrcGTAj\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-896\" decoding=\"async\" fetchpriority=\"high\" height=\"540\" sizes=\"(max-width: 500px) 100vw, 500px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png 500w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c-278x300.png 278w\" width=\"500\"\/><\/p>\n<h2>R\u00e9f\u00e9rence de syntaxe<\/h2>\n<p>Le tableau ci-dessous d\u00e9taille les \u00e9l\u00e9ments principaux utilis\u00e9s pour construire une carte de parcours utilisateur dans Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Composant<\/th>\n<th>Description<\/th>\n<th>Exemple de syntaxe<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>D\u00e9claration<\/strong><\/td>\n<td>Initialise le rendu du diagramme de parcours utilisateur.<\/td>\n<td><code>journey<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Titre<\/strong><\/td>\n<td>D\u00e9finit le titre principal ou l&#8217;objectif utilisateur en haut de la carte.<\/td>\n<td><code>title Flux de connexion<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Section<\/strong><\/td>\n<td>Repr\u00e9sente une phase ou un stade de haut niveau du parcours utilisateur.<\/td>\n<td><code>section Phase de d\u00e9couverte<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>T\u00e2che<\/strong><\/td>\n<td>Une action sp\u00e9cifique effectu\u00e9e par l&#8217;utilisateur au sein d&#8217;une section.<\/td>\n<td><code>Parcourir la documentation<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Note de satisfaction<\/strong><\/td>\n<td>Un entier compris entre 1 et 5 qui repr\u00e9sente le plaisir ou les difficult\u00e9s de l&#8217;utilisateur.<\/td>\n<td><code>: 4 :<\/code> <em>(4 sur 5)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>Acteurs<\/strong><\/td>\n<td>Liste s\u00e9par\u00e9e par des virgules des r\u00f4les impliqu\u00e9s dans la r\u00e9alisation de la t\u00e2che.<\/td>\n<td><code>Utilisateur, Syst\u00e8me<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Maquette du monde r\u00e9el : Exp\u00e9rience de paiement en ligne<\/h2>\n<p>Cette maquette met en \u00e9vidence un parcours utilisateur complet, suivant l&#8217;exp\u00e9rience d&#8217;un client lors de l&#8217;achat d&#8217;un article en ligne, en rep\u00e9rant les points de douleur \u00e9motionnelle (faibles notes) et les moments de plaisir (hautes notes).<\/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:eNpVkMtOw0AMRfdI\/MP9gLLgtckOlYeEkKgosLccNzFNZiKP0yp\/z0yrULrx5ti+j584WpDp8sLVO8F76DQIVqNxS0nwOuMk7BoDVhbrkR2PmjjuxDIC1kJ5H5toUJe+wl2FryRW2DL2A5lgMGUNTYXbE\/tW2Wdw\/Kg9NZIq3M98lly2wts4Op7HEKQrhw91fVCCRzCZnyuakAsogJjjGDK9OdIF1lPKZ2XrKbgYUqvDkG2hFift0pm9nJUlJbBJrV6E6grX86sVTb0Ex0sW29P\/imLyq7nB8udDWHQnkD5LgGPYqPVUdg9pT54+jXiLIY9cRbbUaWn4L9wCb7HR5MrpF0AWka0=\" 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:eNptkb9uAjEMxveTeAdvLHTov6UbatWpAyptdyvnglEuuToOat8InuNerM5xCB0wRFGcz\/bvs1sUF7OkSaWsQrAY3lBP0a1RgQJ4XgWaVImccgzw0u1NsiVRgjpDK7HOrJMK4J3cmqQcyAFQlJ0neIIHO5\/KnhMqZSnS59i0KCb0lKwE\/5rk\/lL2xSmjBQYhN7iy69TVMh7Ps46crzkE8lATtMjUUOgZ55uYtZSbHvnQqmFgi10nlW5\/MOSMWYufu7FqBsu\/pN2uoaJfIic+4LoYpY4hWIFUODxvxX6N7arZD\/vs0RAc9tMlcNa97n3enjddYLK5kPc09nj0P2+l26VitCxy2A9tIx86xPDN0mAvtVUA3TTIfhjoyFA2bCo5J37bgIuGcjmyGbzFFSfln0z\/917Ryw==\" \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\">parcours\r\ntitre Parcours d'achat en ligne\r\nsection D\u00e9couverte du produit\r\n  Rechercher un article : 4 : Utilisateur\r\n  Comparer les prix : 3 : Utilisateur\r\n  Visualiser les images du produit : 5 : Utilisateur\r\nsection Funnel de paiement\r\n  Ajouter l'article au panier : 4 : Utilisateur\r\n  Cr\u00e9er un compte : 2 : Utilisateur, Syst\u00e8me\r\n  Saisir les coordonn\u00e9es de livraison : 3 : Utilisateur\r\n  Traiter la carte de cr\u00e9dit : 1 : Utilisateur, Passerelle de paiement\r\nsection Apr\u00e8s l'achat\r\n  Recevoir la confirmation par e-mail : 5 : Syst\u00e8me\r\n  Suivre la livraison du colis : 4 : Utilisateur, Logistique<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkb9uAjEMxveTeAdvLHTov6UbatWpAyptdyvnglEuuToOat8InuNerM5xCB0wRFGcz\/bvs1sUF7OkSaWsQrAY3lBP0a1RgQJ4XgWaVImccgzw0u1NsiVRgjpDK7HOrJMK4J3cmqQcyAFQlJ0neIIHO5\/KnhMqZSnS59i0KCb0lKwE\/5rk\/lL2xSmjBQYhN7iy69TVMh7Ps46crzkE8lATtMjUUOgZ55uYtZSbHvnQqmFgi10nlW5\/MOSMWYufu7FqBsu\/pN2uoaJfIic+4LoYpY4hWIFUODxvxX6N7arZD\/vs0RAc9tMlcNa97n3enjddYLK5kPc09nj0P2+l26VitCxy2A9tIx86xPDN0mAvtVUA3TTIfhjoyFA2bCo5J37bgIuGcjmyGbzFFSfln0z\/917Ryw==\" \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:eNpVkMtOw0AMRfdI\/MP9gLLgtckOlYeEkKgosLccNzFNZiKP0yp\/z0yrULrx5ti+j584WpDp8sLVO8F76DQIVqNxS0nwOuMk7BoDVhbrkR2PmjjuxDIC1kJ5H5toUJe+wl2FryRW2DL2A5lgMGUNTYXbE\/tW2Wdw\/Kg9NZIq3M98lly2wts4Op7HEKQrhw91fVCCRzCZnyuakAsogJjjGDK9OdIF1lPKZ2XrKbgYUqvDkG2hFift0pm9nJUlJbBJrV6E6grX86sVTb0Ex0sW29P\/imLyq7nB8udDWHQnkD5LgGPYqPVUdg9pT54+jXiLIY9cRbbUaWn4L9wCb7HR5MrpF0AWka0=\" 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=\"VasGPtu\"><a href=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08.png\"><img alt=\"\" class=\"alignnone wp-image-897 size-full\" decoding=\"async\" height=\"540\" sizes=\"(max-width: 2357px) 100vw, 2357px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08.png 2357w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-300x69.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-1024x235.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-768x176.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-1536x352.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620d4d8a08-2048x469.png 2048w\" width=\"2357\"\/><\/a><\/p>\n<hr\/>\n<p><em><strong>Astuce de syntaxe :<\/strong>Les notes de satisfaction sont automatiquement color\u00e9es par le moteur de rendu. Une note de 1 ou 2 met en \u00e9vidence des frictions op\u00e9rationnelles (rouge\/orange), une note de 3 est neutre (jaune), et les notes de 4 ou 5 repr\u00e9sentent des interactions fluides et r\u00e9ussies (vert).<\/em><\/p>\n<hr\/>\n<h2>Concept avanc\u00e9 : Parcours impliquant plusieurs acteurs<\/h2>\n<p>Dans les flux de travail complexes, les t\u00e2ches sont rarement r\u00e9alis\u00e9es par une seule personne. Mermaid vous permet d&#8217;attribuer plusieurs acteurs \u00e0 une m\u00eame t\u00e2che en s\u00e9parant leurs noms par des virgules. Cela est utile pour montrer o\u00f9 une interaction client n\u00e9cessite un support c\u00f4t\u00e9 serveur ou une automatisation provenant d&#8217;un syst\u00e8me.<\/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:eNpVjbFOAzEQRPtI+Yf5gNAAadydAgUFBSQ\/4HOWY8HePXnXJ+7vcQQKohzNmzcf2qrQut04eyY8t+x8MyTXimObZ62Ox69Y5kzbjVFyVsGhmWuhP+IQrdfoeSzs8Kpt7DLn9EkecBeukws1mPEkvy1cESeSjt0HHFdzKrureDgXlsvmSRYy5yl611J6F04xY2xTwG3AAy2Udaa6w8uAUyd\/nl7JNC8ENmuEKGeIOr+tAfvw\/+MbOHxabA==\" 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:eNp1jz1OA0EMhftIuYMPkIqfJt0qUFCScIHJrHexmD\/GdgS3oSTn2IthI0BpKF4zet+bzy30WLXzeiUkHeH+DXNLCCMCa2u1C5A90KuGItCSMqHVIUTBb4wxCtUCu8CXUEyERdYrgEPVjOLbWkAovqB4sfV6TMtnRtjCtWX3BwzTZJvYwTR++suHw2G2hlVvLId3Fqc3MIyZCrH04EYw6q+Dbz2UE7LQrDZnC0edQTA+F7vHP76y3C3nE6bamtEbeLK6zzwOju+XM1cdzT1dGpsRlan2bKtbuLX8K\/EFdFd+uw==\" \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\">parcours\r\ntitre Exemple de support impliquant plusieurs acteurs\r\nsection Cas de support client\r\n  Soumettre un ticket de probl\u00e8me : 3 : Client\r\n  Affecter le ticket \u00e0 un agent : 4 : Syst\u00e8me, Administrateur du support\r\n  Investiguer un bug technique : 2 : D\u00e9veloppeur, Testeur QA\r\n  R\u00e9soudre le probl\u00e8me et informer : 5 : Administrateur du support<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1jz1OA0EMhftIuYMPkIqfJt0qUFCScIHJrHexmD\/GdgS3oSTn2IthI0BpKF4zet+bzy30WLXzeiUkHeH+DXNLCCMCa2u1C5A90KuGItCSMqHVIUTBb4wxCtUCu8CXUEyERdYrgEPVjOLbWkAovqB4sfV6TMtnRtjCtWX3BwzTZJvYwTR++suHw2G2hlVvLId3Fqc3MIyZCrH04EYw6q+Dbz2UE7LQrDZnC0edQTA+F7vHP76y3C3nE6bamtEbeLK6zzwOju+XM1cdzT1dGpsRlan2bKtbuLX8K\/EFdFd+uw==\" \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:eNpVjbFOAzEQRPtI+Yf5gNAAadydAgUFBSQ\/4HOWY8HePXnXJ+7vcQQKohzNmzcf2qrQut04eyY8t+x8MyTXimObZ62Ox69Y5kzbjVFyVsGhmWuhP+IQrdfoeSzs8Kpt7DLn9EkecBeukws1mPEkvy1cESeSjt0HHFdzKrureDgXlsvmSRYy5yl611J6F04xY2xTwG3AAy2Udaa6w8uAUyd\/nl7JNC8ENmuEKGeIOr+tAfvw\/+MbOHxabA==\" 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=\"oTBwXgi\"><img alt=\"\" class=\"alignnone size-full wp-image-898\" decoding=\"async\" height=\"540\" sizes=\"(max-width: 1308px) 100vw, 1308px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5.png 1308w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5-300x124.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5-1024x423.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620ebf38f5-768x317.png 768w\" width=\"1308\"\/><\/p>\n<h2>P\u00e9ch\u00e9s courants de syntaxe<\/h2>\n<p>Lors de l&#8217;\u00e9criture de cartes de parcours utilisateur, de petites erreurs de formatage peuvent provoquer une erreur dans le moteur de rendu. Gardez ces trois r\u00e8gles de formatage \u00e0 l&#8217;esprit pour vous assurer que votre diagramme se construit correctement :<\/p>\n<ul>\n<li><strong>La r\u00e8gle des deux points doubles :<\/strong> Chaque ligne de t\u00e2che doit suivre exactement la structure de <code>Description de la t\u00e2che : Note : Acteur<\/code>. Oublier le deuxi\u00e8me deux-points avant la liste des acteurs est la raison la plus courante pour laquelle un diagramme de parcours ne parvient pas \u00e0 se charger.<\/li>\n<li><strong>Restrictions sur la plage des notes :<\/strong>Les notes de satisfaction doivent \u00eatre un entier compris entre 1 et 5. Passer une note de 0 ou un nombre sup\u00e9rieur \u00e0 5 rompra les param\u00e8tres de mise en page.<\/li>\n<li><strong>Indentation :<\/strong> Bien que Mermaid soit souple concernant les espaces, garder vos t\u00e2ches indent\u00e9es sous leurs sections respectives rend vos fichiers texte bruts bien plus faciles \u00e0 lire et \u00e0 maintenir \u00e0 mesure que les fonctionnalit\u00e9s de votre produit \u00e9voluent.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un diagramme de parcours utilisateur d\u00e9crit les \u00e9tapes que l&#8217;utilisateur suit pour atteindre un objectif sp\u00e9cifique au sein de votre application. Contrairement aux organigrammes centr\u00e9s sur les syst\u00e8mes ou aux diagrammes de s\u00e9quence, les parcours utilisateurs se concentrent sur les&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":10,"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-2095","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 User Journey Map | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a 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-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid User Journey Map | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-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_6a4620b91114c.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=\"3 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-user-journey-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\",\"name\":\"Mermaid User Journey Map | 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-user-journey-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\",\"datePublished\":\"2026-07-02T08:12:16+00:00\",\"description\":\"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4620b91114c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-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\":\"Guide de syntaxe du parcours utilisateur Mermaid.js\"}]},{\"@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 User Journey Map | VPasCode Text to Diagram Guide","description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a 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-user-journey-syntax-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid User Journey Map | VPasCode Text to Diagram Guide","og_description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","name":"Mermaid User Journey Map | 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-user-journey-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","datePublished":"2026-07-02T08:12:16+00:00","description":"Map user experience steps and satisfaction scores using Mermaid user journey charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4620b91114c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-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":"Guide de syntaxe du parcours utilisateur Mermaid.js"}]},{"@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\/2095","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=2095"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}