{"id":2095,"date":"2026-07-02T08:12:16","date_gmt":"2026-07-02T08:12:16","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis de recorrido del usuario de Mermaid.js"},"content":{"rendered":"<p>Un diagrama de recorrido del usuario describe los pasos que un usuario realiza para alcanzar un objetivo espec\u00edfico dentro de su aplicaci\u00f3n. A diferencia de los diagramas de flujo o diagramas de secuencia centrados en sistemas, los recorridos del usuario se centran en las acciones humanas, las etapas del flujo de trabajo y el seguimiento de la satisfacci\u00f3n del usuario con el tiempo.<\/p>\n<h2>Estructura b\u00e1sica de sintaxis<\/h2>\n<p>Cada recorrido del usuario comienza con la <code>recorrido<\/code> declaraci\u00f3n, seguida de un t\u00edtulo y secciones secuenciales que desglosan la experiencia del usuario.<\/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>Editar Mermaid en 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:eNorSk3OLyrKTMnn5So5vLakNCdfwTUrNbcASKekKhTBZIGcHIXS4tLEokygyuLU5OTMw5vzFPzyc5OKUkEqcxIVUksSCxJ5uRRQRUsSi1ITrRQCSvNKShPBuqwUHJNL8osMdSC0EQCSFS+J\" \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\">recorrido\r\nt\u00edtulo Ejemplo de recorrido del usuario\r\nsecci\u00f3n Nombre de la etapa\r\n  Nombre de la tarea: Puntuaci\u00f3n: Actor1, Actor2<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSk3OLyrKTMnn5So5vLakNCdfwTUrNbcASKekKhTBZIGcHIXS4tLEokygyuLU5OTMw5vzFPzyc5OKUkEqcxIVUksSCxJ5uRRQRUsSi1ITrRQCSvNKShPBuqwUHJNL8osMdSC0EQCSFS+J\" \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>Editar Mermaid en 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>Referencia de sintaxis<\/h2>\n<p>La tabla a continuaci\u00f3n desglosa los elementos principales utilizados para construir un mapa de recorrido del usuario en Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente<\/th>\n<th>Descripci\u00f3n<\/th>\n<th>Ejemplo de sintaxis<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaraci\u00f3n<\/strong><\/td>\n<td>Inicializa el renderizador del diagrama de recorrido del usuario.<\/td>\n<td><code>recorrido<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>T\u00edtulo<\/strong><\/td>\n<td>Define el encabezado principal o el objetivo del usuario en la parte superior del mapa.<\/td>\n<td><code>t\u00edtulo Flujo de inicio de sesi\u00f3n<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Secci\u00f3n<\/strong><\/td>\n<td>Representa una fase o etapa de alto nivel del recorrido del usuario.<\/td>\n<td><code>secci\u00f3n Fase de descubrimiento<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Tarea<\/strong><\/td>\n<td>Una acci\u00f3n espec\u00edfica realizada por el usuario dentro de una secci\u00f3n.<\/td>\n<td><code>Navegar en la documentaci\u00f3n<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Puntuaci\u00f3n de satisfacci\u00f3n<\/strong><\/td>\n<td>Un n\u00famero entero del 1 al 5 que representa el placer o la fricci\u00f3n del usuario.<\/td>\n<td><code>: 4 :<\/code> <em>(4 de 5)<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>Actores<\/strong><\/td>\n<td>Lista separada por comas de los roles involucrados en la finalizaci\u00f3n de la tarea.<\/td>\n<td><code>Usuario, Sistema<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Plantilla del mundo real: Experiencia de compra en comercio electr\u00f3nico<\/h2>\n<p>Esta plantilla muestra un recorrido completo del usuario que rastrea la experiencia de un cliente al comprar un art\u00edculo en l\u00ednea, rastreando puntos de dolor emocional (puntuaciones bajas) y momentos de placer (puntuaciones altas).<\/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>Editar Mermaid en 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:eNplkT1OA0EMhftIuYMPEAr+mu34SYFEEQVB78yalaPZmcXjyX0oKbbiCHMxvBMpbKC1Pz2\/93xg3NNyoazZR9iSiyLcRmgJXOwHQaAAvoyBcLlI5ByX7wCPlFzeCfdMQSfYwyCxzU7jcgFwn5NDARQtozPdBm4aeE0Zhev+wZRRjBiEHMfUwPXZ\/o0EuC+fHQVKZ+oN3M7Ik591v8tz05PIXSfUzV0AejBbwvrfkJCROSC4bImwgavTfgUvnJT6KvoUTDUZ25Ki99WdNXQoY\/wbYiPRVVRR9kZXd1K+2nr\/cqa\/QcPIV2LAbh5sE5Ne\/Gay\/\/COxVKGd5Yej9AQp4kIRSBPTsWG7I5dzbxvMWnN6aen6tTOsVv8yKQ072QFz7ErY1J2+ANy3sJi\" \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\">viaje\r\ntitulo Recorrido de compra en l\u00ednea\r\nsecci\u00f3n Descubrimiento del producto\r\n  Buscar art\u00edculo: 4: Usuario\r\n  Comparar precios: 3: Usuario\r\n  Ver im\u00e1genes del producto: 5: Usuario\r\nsecci\u00f3n Embudo de compra\r\n  Agregar art\u00edculo al carrito: 4: Usuario\r\n  Crear una cuenta: 2: Usuario, Sistema\r\n  Ingresar detalles de env\u00edo: 3: Usuario\r\n  Procesar tarjeta de cr\u00e9dito: 1: Usuario, Pasarela de pago\r\nsecci\u00f3n Post-compra\r\n  Recibir confirmaci\u00f3n por correo electr\u00f3nico: 5: Sistema\r\n  Rastrear la entrega del paquete: 4: Usuario, Log\u00edstica<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplkT1OA0EMhftIuYMPEAr+mu34SYFEEQVB78yalaPZmcXjyX0oKbbiCHMxvBMpbKC1Pz2\/93xg3NNyoazZR9iSiyLcRmgJXOwHQaAAvoyBcLlI5ByX7wCPlFzeCfdMQSfYwyCxzU7jcgFwn5NDARQtozPdBm4aeE0Zhev+wZRRjBiEHMfUwPXZ\/o0EuC+fHQVKZ+oN3M7Ik591v8tz05PIXSfUzV0AejBbwvrfkJCROSC4bImwgavTfgUvnJT6KvoUTDUZ25Ki99WdNXQoY\/wbYiPRVVRR9kZXd1K+2nr\/cqa\/QcPIV2LAbh5sE5Ne\/Gay\/\/COxVKGd5Yej9AQp4kIRSBPTsWG7I5dzbxvMWnN6aen6tTOsVv8yKQ072QFz7ErY1J2+ANy3sJi\" \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>Editar Mermaid en 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>Consejo de sintaxis:<\/strong>Las puntuaciones de satisfacci\u00f3n se codifican autom\u00e1ticamente por color mediante el renderizador. Una puntuaci\u00f3n de 1 o 2 destaca la fricci\u00f3n operativa (rojo\/naranja), una puntuaci\u00f3n de 3 es neutral (amarillo), y las puntuaciones de 4 o 5 representan interacciones fluidas y exitosas (verde).<\/em><\/p>\n<hr\/>\n<h2>Concepto avanzado: Recorridos con m\u00faltiples actores<\/h2>\n<p>En flujos de trabajo complejos, las tareas rara vez son completadas por una sola persona. Mermaid te permite asignar m\u00faltiples actores a una sola tarea separando sus nombres con comas. Esto es \u00fatil para mostrar d\u00f3nde una interacci\u00f3n con el cliente requiere soporte de fondo o automatizaci\u00f3n desde un sistema.<\/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>Editar Mermaid en 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:eNp1jj1OA0EMRvtIucN3gFT8NNNFIQUdCidwPGbl4J1ZzTgrcSTqdGn3YswgoUBBZdl+37NnpZOsV65+toz9Scap1SioecrFBZwTxuVqrpNJBbHnInW9qsKsyyVhR\/VPgAxsKsmbFtinWanAld\/FOzaVfDQZKeA+YHcDt1WHdCObhYa+C3gIeNXqLbPBNo6aWlMo5vLrajc8p1mq69AkYpBSGuHLJyflHHAX8CSV2tSshzd4KWc5UpcwmUaKXXKQmm2Wb8XPq\/hAyq5vylQCHsO\/X3wBn+N2PQ==\" \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\">viaje\r\ntitulo Ejemplo de soporte con m\u00faltiples actores\r\nsecci\u00f3n Caso de soporte al cliente\r\n  Enviar ticket de problema: 3: Cliente\r\n  Asignar ticket al agente: 4: Sistema, Administrador de soporte\r\n  Investigar el error t\u00e9cnico: 2: Desarrollador, Prueba de calidad\r\n  Resolver el problema y notificar: 5: Administrador de soporte<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1jj1OA0EMRvtIucN3gFT8NNNFIQUdCidwPGbl4J1ZzTgrcSTqdGn3YswgoUBBZdl+37NnpZOsV65+toz9Scap1SioecrFBZwTxuVqrpNJBbHnInW9qsKsyyVhR\/VPgAxsKsmbFtinWanAld\/FOzaVfDQZKeA+YHcDt1WHdCObhYa+C3gIeNXqLbPBNo6aWlMo5vLrajc8p1mq69AkYpBSGuHLJyflHHAX8CSV2tSshzd4KWc5UpcwmUaKXXKQmm2Wb8XPq\/hAyq5vylQCHsO\/X3wBn+N2PQ==\" \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>Editar Mermaid en 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>Errores comunes de sintaxis<\/h2>\n<p>Al escribir mapas de recorrido del usuario, peque\u00f1os errores de formato pueden hacer que el motor de renderizado genere un error. Ten en cuenta estas tres reglas de formato para asegurarte de que tu diagrama se construya correctamente:<\/p>\n<ul>\n<li><strong>La regla de dos puntos dobles:<\/strong>Cada l\u00ednea de tarea debe seguir exactamente la estructura de <code>Descripci\u00f3n de la tarea: Puntuaci\u00f3n: Actor<\/code>. Olvidar el segundo punto y coma antes de la lista de actores es la raz\u00f3n m\u00e1s com\u00fan por la que un diagrama de recorrido no carga.<\/li>\n<li><strong>Restricciones de rango de puntuaci\u00f3n:<\/strong>Las puntuaciones de satisfacci\u00f3n deben ser un n\u00famero entero entre 1 y 5. Pasar una puntuaci\u00f3n de 0 o un n\u00famero mayor que 5 romper\u00e1 los par\u00e1metros de dise\u00f1o.<\/li>\n<li><strong>Sangr\u00eda:<\/strong>Aunque Mermaid es flexible con los espacios, mantener tus tareas con sangr\u00eda bajo sus secciones respectivas hace que tus archivos de texto sin procesar sean mucho m\u00e1s f\u00e1ciles de leer y mantener a medida que tus funciones del producto crecen.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un diagrama de recorrido del usuario describe los pasos que un usuario realiza para alcanzar un objetivo espec\u00edfico dentro de su aplicaci\u00f3n. A diferencia de los diagramas de flujo o diagramas de secuencia centrados en sistemas, los recorridos del usuario&#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\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-user-journey-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda de sintaxis de recorrido del usuario de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/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\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/","url":"https:\/\/www.vpascode.com\/es\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-user-journey-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda de sintaxis de recorrido del usuario de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2095"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}