{"id":2095,"date":"2026-07-02T08:12:16","date_gmt":"2026-07-02T08:12:16","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","title":{"rendered":"Mermaid.js Benutzerreise-Syntaxleitfaden"},"content":{"rendered":"<p>Ein Benutzerreise-Diagramm beschreibt die Schritte, die ein Benutzer unternimmt, um ein bestimmtes Ziel innerhalb Ihrer Anwendung zu erreichen. Im Gegensatz zu systemorientierten Flussdiagrammen oder Ablaufdiagrammen konzentrieren sich Benutzerreisen auf menschliche Handlungen, Arbeitsablaufstadien und die Verfolgung der Benutzerzufriedenheit im Zeitverlauf.<\/p>\n<h2>Grundlegende Syntaxstruktur<\/h2>\n<p>Jede Benutzerreise beginnt mit der <code>Reise<\/code>Deklaration, gefolgt von einem Titel und sequenziellen Abschnitten, die die Benutzererfahrung aufteilen.<\/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>Mermaid in VPasCode bearbeiten<\/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:eNoLSs0sTuXlKsksSc1RcAJyCjJTc3SdUvNKS6pSi4ogso5JxckZeZklJQrBJYkpmal5eYm5QGEFBcfStPTEJAjfCqi9PLWopDQv3UrBMbsktbTIUAfKMAIAcDkkUg==\" \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\">Reise\r\ntitel Beispiel-Benutzerreise\r\nAbschnitt Stadienname\r\n  Aufgabenname: Bewertung: Akteur1, Akteur2<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoLSs0sTuXlKsksSc1RcAJyCjJTc3SdUvNKS6pSi4ogso5JxckZeZklJQrBJYkpmal5eYm5QGEFBcfStPTEJAjfCqi9PLWopDQv3UrBMbsktbTIUAfKMAIAcDkkUg==\" \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>Mermaid in VPasCode bearbeiten<\/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>Syntaxreferenz<\/h2>\n<p>Die folgende Tabelle zeigt die wichtigsten Elemente, die zur Erstellung einer Benutzerreisekarte in Mermaid.js verwendet werden.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Komponente<\/th>\n<th>Beschreibung<\/th>\n<th>Syntaxbeispiel<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Deklaration<\/strong><\/td>\n<td>Initialisiert den Renderer f\u00fcr das Benutzerreisediagramm.<\/td>\n<td><code>Reise<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Titel<\/strong><\/td>\n<td>Definiert die Haupt\u00fcberschrift oder das Benutzerziel am oberen Rand der Karte.<\/td>\n<td><code>titel Anmeldevorgang<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Abschnitt<\/strong><\/td>\n<td>Stellt eine hochrangige Phase oder ein Stadium der Benutzerreise dar.<\/td>\n<td><code>Abschnitt Entdeckungsphase<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Aufgabe<\/strong><\/td>\n<td>Eine spezifische Aktion, die der Benutzer innerhalb eines Abschnitts unternimmt.<\/td>\n<td><code>Dokumentation durchsehen<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Zufriedenheitsbewertung<\/strong><\/td>\n<td>Eine ganze Zahl von 1 bis 5, die das Benutzerwohlgef\u00fchl oder die Reibung abbildet.<\/td>\n<td><code>: 4 :<\/code> <em>(4 von 5)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>Akteure<\/strong><\/td>\n<td>Durch Kommas getrennte Liste der Rollen, die an der Erf\u00fcllung der Aufgabe beteiligt sind.<\/td>\n<td><code>Benutzer, System<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Realit\u00e4tsnahes Blueprint: E-Commerce-Kassen-Erlebnis<\/h2>\n<p>Dieses Blueprint zeigt eine vollst\u00e4ndige Benutzerreise, bei der die Erfahrung eines Kunden beim Online-Kauf eines Artikels verfolgt wird, einschlie\u00dflich emotionaler Schmerzpunkte (niedrige Werte) und Momente der Freude (hohe Werte).<\/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>Mermaid in VPasCode bearbeiten<\/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:eNptkM1OwzAQhO+V+g77AM2Bv0tvVOIUfiqQQOK2SQZnibuW7A2ofR7ehBfDLqAU1Kvn8+zMvIYxKrbzmYl50J16UVQ1jy\/VPSRhPktoTYLSOoZuHAxqHdphVDefEV1GkwGe0tj20CWdL2kFHW2HWOR1LB70hug85Bs5+4\/sbRvxHSKx7iCuYBeH2G+GmlOJNN0VpSeO0CHEhjzckQx1UAuEmAzeF\/100hf0sM3vm8I9ZoS162AsPhFEHZojgeuITmzgaPtiHBuIFe7k0PeZe583So4N77ydKtxy21OHDZWNi99VdZMPVisk+\/wwcflXTtuzt58ZpohrHmD55kvwBftTdUHXwUnKs3wBX5CgWg==\" \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 Online-Kauf-Reise\r\nsection Produktentdeckung\r\n  Artikel suchen: 4: Benutzer\r\n  Preise vergleichen: 3: Benutzer\r\n  Produktbilder anzeigen: 5: Benutzer\r\nsection Kasse\r\n  Artikel in Warenkorb legen: 4: Benutzer\r\n  Konto erstellen: 2: Benutzer, System\r\n  Versanddetails eingeben: 3: Benutzer\r\n  Kreditkarte verarbeiten: 1: Benutzer, Zahlungsgateway\r\nsection Nach dem Kauf\r\n  E-Mail-Best\u00e4tigung erhalten: 5: System\r\n  Paketverfolgung: 4: Benutzer, Logistik<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkM1OwzAQhO+V+g77AM2Bv0tvVOIUfiqQQOK2SQZnibuW7A2ofR7ehBfDLqAU1Kvn8+zMvIYxKrbzmYl50J16UVQ1jy\/VPSRhPktoTYLSOoZuHAxqHdphVDefEV1GkwGe0tj20CWdL2kFHW2HWOR1LB70hug85Bs5+4\/sbRvxHSKx7iCuYBeH2G+GmlOJNN0VpSeO0CHEhjzckQx1UAuEmAzeF\/100hf0sM3vm8I9ZoS162AsPhFEHZojgeuITmzgaPtiHBuIFe7k0PeZe583So4N77ydKtxy21OHDZWNi99VdZMPVisk+\/wwcflXTtuzt58ZpohrHmD55kvwBftTdUHXwUnKs3wBX5CgWg==\" \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>Mermaid in VPasCode bearbeiten<\/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>Syntax-Tipp:<\/strong>Zufriedenheitswerte werden vom Renderer automatisch farblich kodiert. Ein Wert von 1 oder 2 markiert betriebliche Reibung (rot\/orange), ein Wert von 3 ist neutral (gelb), und Werte von 4 oder 5 stellen reibungslose, erfolgreiche Interaktionen dar (gr\u00fcn).<\/em><\/p>\n<hr\/>\n<h2>Erweitertes Konzept: Mehr-Akteur-Reisen<\/h2>\n<p>Bei komplexen Workflows werden Aufgaben selten von einer einzigen Person abgeschlossen. Mermaid erm\u00f6glicht es Ihnen, mehreren Akteuren eine einzelne Aufgabe zuzuweisen, indem Sie deren Namen durch Kommas trennen. Dies ist hilfreich, um darzustellen, wo eine Kundeninteraktion Unterst\u00fctzung aus dem Hintergrund oder Automatisierung durch ein System erfordert.<\/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>Mermaid in VPasCode bearbeiten<\/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:eNptjj1uwzAMhXcDvgMPEC\/9WbS5QLMUBVo4PYAjMxYbmTYoCkFysEzZfLFSaceuj9\/3Hr\/nLIznulLSiPCClBbCCIf1JvCOQZr2qJil+WJFSbre9JJ5rKuEXmlmeMs8IKe8LLNos+1jrCuATterGJcOFsCE0RgHj+4XL0QhAYlxgnZEK2e45JPNF\/DJQXdOitMGur\/mdpiIKan0Oksp2KEPFvhg5hZDRIF8\/zGXyMGDg1fWE\/mjnTbw2TY7tMq7+yHzPtpyXK+2Z94Ae+TeByEflMbiP7v\/t38ATppvNw==\" \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 Beispiel f\u00fcr Mehr-Akteur-Unterst\u00fctzung\r\nsection Kundensupport-Fall\r\n  St\u00f6rungsfall melden: 3: Kunde\r\n  Fall einem Agenten zuweisen: 4: System, Support-Administrator\r\n  Technischen Fehler untersuchen: 2: Entwickler, QA-Tester\r\n  Problem l\u00f6sen und benachrichtigen: 5: Support-Administrator<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptjj1uwzAMhXcDvgMPEC\/9WbS5QLMUBVo4PYAjMxYbmTYoCkFysEzZfLFSaceuj9\/3Hr\/nLIznulLSiPCClBbCCIf1JvCOQZr2qJil+WJFSbre9JJ5rKuEXmlmeMs8IKe8LLNos+1jrCuATterGJcOFsCE0RgHj+4XL0QhAYlxgnZEK2e45JPNF\/DJQXdOitMGur\/mdpiIKan0Oksp2KEPFvhg5hZDRIF8\/zGXyMGDg1fWE\/mjnTbw2TY7tMq7+yHzPtpyXK+2Z94Ae+TeByEflMbiP7v\/t38ATppvNw==\" \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>Mermaid in VPasCode bearbeiten<\/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>H\u00e4ufige Syntax-Fehler<\/h2>\n<p>Beim Schreiben von Benutzerreise-Karten k\u00f6nnen kleine Formatierungsfehler dazu f\u00fchren, dass der Rendering-Engine einen Fehler ausl\u00f6st. Behalten Sie diese drei Formatierungsregeln im Ged\u00e4chtnis, um sicherzustellen, dass Ihr Diagramm korrekt erstellt wird:<\/p>\n<ul>\n<li><strong>Die Doppelpunkts-Regel:<\/strong> Jede Aufgabenzeile muss genau der Struktur folgen:<code>Aufgabenbeschreibung: Bewertung: Akteur<\/code>. Das Vergessen des zweiten Doppelpunkts vor der Akteurliste ist der h\u00e4ufigste Grund daf\u00fcr, dass eine Reise-Diagramm nicht geladen wird.<\/li>\n<li><strong>Einschr\u00e4nkungen f\u00fcr Bewertungsbereich:<\/strong>Zufriedenheitswerte m\u00fcssen eine ganze Zahl zwischen 1 und 5 sein. Eine Bewertung von 0 oder eine Zahl \u00fcber 5 bricht die Layout-Parameter.<\/li>\n<li><strong>Einr\u00fcckung:<\/strong> Obwohl Mermaid flexibel mit Leerzeichen ist, macht die Einr\u00fcckung Ihrer Aufgaben unter ihren jeweiligen Abschnitten Ihre Rohtextdateien viel leichter lesbar und wartbar, je weiter sich Ihre Produktfunktionen entwickeln.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ein Benutzerreise-Diagramm beschreibt die Schritte, die ein Benutzer unternimmt, um ein bestimmtes Ziel innerhalb Ihrer Anwendung zu erreichen. Im Gegensatz zu systemorientierten Flussdiagrammen oder Ablaufdiagrammen konzentrieren sich Benutzerreisen auf menschliche Handlungen, Arbeitsablaufstadien und die Verfolgung der Benutzerzufriedenheit im Zeitverlauf. Grundlegende&#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\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/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\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Benutzerreise-Syntaxleitfaden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/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\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","url":"https:\/\/www.vpascode.com\/de\/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\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/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\/de\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Benutzerreise-Syntaxleitfaden"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/2095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=2095"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=2095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}