{"id":2086,"date":"2026-07-08T05:45:59","date_gmt":"2026-07-08T05:45:59","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-event-modeling-syntax-swimlane-guide\/"},"modified":"2026-07-08T05:45:59","modified_gmt":"2026-07-08T05:45:59","slug":"mermaid-js-event-modeling-syntax-swimlane-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","title":{"rendered":"Sintaxis de modelado de eventos de Mermaid.js &#038; Gu\u00eda de carriles"},"content":{"rendered":"<p>El modelado de eventos (EM) es una metodolog\u00eda estrat\u00e9gica utilizada para dise\u00f1ar y describir sistemas de informaci\u00f3n mediante el mapeo de c\u00f3mo los datos cambian, se transforman y evolucionan a lo largo de una l\u00ednea temporal lineal. Al omitir deliberadamente los mecanismos transitorios del sistema, un diagrama de modelado de eventos se centra estrictamente en el flujo exacto de informaci\u00f3n y en lo que el usuario ve expl\u00edcitamente en cualquier momento designado. El motor nativo <code>modeladoeventos<\/code> motor categoriza autom\u00e1ticamente sus definiciones de dise\u00f1o en tres carriles visuales aislados: <strong>Interfaz de usuario\/Automatizaci\u00f3n<\/strong>, <strong>Comando\/Modelo de lectura<\/strong>, y <strong>Eventos<\/strong>.<\/p>\n<h2>Comprender los carriles del sistema<\/h2>\n<p>Cuando defines elementos en tu l\u00ednea de tiempo, Mermaid los asigna a pistas horizontales espec\u00edficas bas\u00e1ndose \u00fanicamente en los tipos de entidad subyacentes:<\/p>\n<ul>\n<li><strong>Carril de Interfaz de usuario\/Automatizaci\u00f3n:<\/strong> Almacena interfaces de usuario (<code>ui<\/code>) y procesadores de fondo (<code>pcr<\/code> \/ <code>procesador<\/code>). Representa c\u00f3mo se activan o visualizan las acciones.<\/li>\n<li><strong>Carril de Comando\/Modelo de lectura:<\/strong> Almacena comandos (<code>cmd<\/code> \/ <code>comando<\/code>) que pretenden alterar el estado del sistema, o modelos de lectura (<code>rmo<\/code> \/ <code>modeloleer<\/code>) que almacenan datos de consulta estructurados.<\/li>\n<li><strong>V\u00eda de eventos:<\/strong> Almacena eventos hist\u00f3ricos del dominio (<code>evt<\/code> \/ <code>evento<\/code>). Esta pista captura la fuente absoluta de verdad sobre lo que ha ocurrido en el pasado.<\/li>\n<\/ul>\n<h2>Estructura b\u00e1sica de sintaxis (Compacta frente a Relajada)<\/h2>\n<p>Cada diagrama comienza con la declaraci\u00f3n de <code>eventmodeling<\/code> declaraci\u00f3n. Puedes trazar tu cronolog\u00eda utilizando una sintaxis <strong>compacta<\/strong> (usando tokens estructurales cortos como <code>tf<\/code>, <code>ui<\/code>, <code>cmd<\/code>, <code>evt<\/code>) o una sintaxis descriptiva <strong>relajada<\/strong> (usando <code>timeframe<\/code>, <code>command<\/code>, <code>readmodel<\/code>). Ambos estilos pueden combinarse indistintamente.<\/p>\n<h3>1. Plantilla de sintaxis compacta<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFQozVTwyU\/PzAtOLkpNzYOIGikk56YoBJcm5WaWOBelpgC1ZSbmFEMkjRVSy0oUQotTixxLSzJAUsmJJakpAMvQIAk=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>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:eNotjUkKgDAMAO+Cf8gTXF4g4sGbID4gNBECbQJt6vst6HmYmWTEEcmAGPhhdSt95zcMI1SBA9UxRtxVgtjJRUw\/PEFIBGuiTR\/BvGYm1iAY+ffnlnO4SsUstlRvaQlt9AKmMyda\" \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\">modelado de eventos\r\ntf 01 ui PantallaInicioSesion\r\ntf 02 cmd CmdEnviarCredenciales\r\ntf 03 evt UsuarioAutenticado<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotjUkKgDAMAO+Cf8gTXF4g4sGbID4gNBECbQJt6vst6HmYmWTEEcmAGPhhdSt95zcMI1SBA9UxRtxVgtjJRUw\/PEFIBGuiTR\/BvGYm1iAY+ffnlnO4SsUstlRvaQlt9AKmMyda\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFQozVTwyU\/PzAtOLkpNzYOIGikk56YoBJcm5WaWOBelpgC1ZSbmFEMkjRVSy0oUQotTixxLSzJAUsmJJakpAMvQIAk=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"QtcNbEM\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-944\" decoding=\"async\" fetchpriority=\"high\" height=\"470\" sizes=\"(max-width: 871px) 100vw, 871px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png 871w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892-300x162.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892-768x414.png 768w\" width=\"871\"\/><\/p>\n<h3>2. Plantilla de sintaxis relajada<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjbsNgDAMBXskdvAIfCZAtHQRA4TkAZZiRwoO8wMl9Z3ucENNckRiPdrGWLAXL6Cup8q05IPVhQLoDw4UsojXSK5uwjYXxDfEPl0\/byR8A1ovlKna+TnBG+IDHMkrJw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>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:eNpVjksKAlEMBPeCd8gR\/JxABhfuBPEA4aWFhpcE3mfO78CsZtlQVLWnoaqlGAQrYmQ\/nwYdv6YOuVxlUt4aQ2vVV7AwP+jMOFA3KemuYbK4PWOltqXBEIVacTTe9458+9TGfMyxLZbtwx\/BMjJ4\" \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\">modelado de eventos\r\ntimeframe 01 ui PantallaInicioSesion\r\ntimeframe 02 command CmdEnviarCredenciales\r\ntimeframe 03 event UsuarioAutenticado<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjksKAlEMBPeCd8gR\/JxABhfuBPEA4aWFhpcE3mfO78CsZtlQVLWnoaqlGAQrYmQ\/nwYdv6YOuVxlUt4aQ2vVV7AwP+jMOFA3KemuYbK4PWOltqXBEIVacTTe9458+9TGfMyxLZbtwx\/BMjJ4\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjbsNgDAMBXskdvAIfCZAtHQRA4TkAZZiRwoO8wMl9Z3ucENNckRiPdrGWLAXL6Cup8q05IPVhQLoDw4UsojXSK5uwjYXxDfEPl0\/byR8A1ovlKna+TnBG+IDHMkrJw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"MtnYXzX\"><img alt=\"\" class=\"alignnone size-full wp-image-945\" decoding=\"async\" height=\"470\" sizes=\"(max-width: 871px) 100vw, 871px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f.png 871w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f-300x162.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de45a5138f-768x414.png 768w\" width=\"871\"\/><\/p>\n<hr\/>\n<h2>Referencia de sintaxis<\/h2>\n<p>La tabla a continuaci\u00f3n desglosa los componentes de datos principales, palabras clave de formato y tokens de acceso directo utilizados para establecer marcos de modelado de eventos dentro del int\u00e9rprete en tiempo de ejecuci\u00f3n de Mermaid.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Token compacto<\/th>\n<th>Palabra clave relajada<\/th>\n<th>Asignaci\u00f3n de carril<\/th>\n<th>Descripci\u00f3n y reglas<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>tf<\/code><\/td>\n<td><code>timeframe<\/code><\/td>\n<td>N\/D (Encabezado de cuadr\u00edcula)<\/td>\n<td>Declara una ranura de marco de columna de cronolog\u00eda secuencial. Debe ir seguido de un n\u00famero de secuencia \u00fanico (por ejemplo, <code>01<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>rf<\/code><\/td>\n<td><code>resetframe<\/code><\/td>\n<td>N\/D (Encabezado de cuadr\u00edcula)<\/td>\n<td>Restablece el \u00edndice de posici\u00f3n de columna o crea l\u00edneas de flujo automatizadas fuera de banda.<\/td>\n<\/tr>\n<tr>\n<td><code>ui<\/code><\/td>\n<td><code>ui<\/code><\/td>\n<td>Interfaz de usuario\/Automatizaci\u00f3n<\/td>\n<td>Mapea un panel o p\u00e1gina de interfaz gr\u00e1fica que una persona visualiza o interact\u00faa.<\/td>\n<\/tr>\n<tr>\n<td><code>pcr<\/code><\/td>\n<td><code>procesador<\/code><\/td>\n<td>Interfaz de usuario\/Automatizaci\u00f3n<\/td>\n<td>Define un procesador de fondo automatizado, un mecanismo cron o una saga.<\/td>\n<\/tr>\n<tr>\n<td><code>cmd<\/code><\/td>\n<td><code>comando<\/code><\/td>\n<td>Comando\/Modelo de lectura<\/td>\n<td>Representa una intenci\u00f3n de acci\u00f3n expl\u00edcita o una solicitud para modificar variables de estado.<\/td>\n<\/tr>\n<tr>\n<td><code>rmo<\/code><\/td>\n<td><code>modelo de lectura<\/code><\/td>\n<td>Comando\/Modelo de lectura<\/td>\n<td>Define vistas de cach\u00e9 estructuradas y de solo lectura o tablas de proyecci\u00f3n de b\u00fasqueda.<\/td>\n<\/tr>\n<tr>\n<td><code>evt<\/code><\/td>\n<td><code>evento<\/code><\/td>\n<td>Registro de eventos<\/td>\n<td>Un registro hist\u00f3rico inmutable que documenta una actividad que se ejecut\u00f3 con \u00e9xito.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Documentaci\u00f3n de proyecciones de datos de contexto<\/h2>\n<p>Para proporcionar dise\u00f1os de informaci\u00f3n de alta densidad, Mermaid permite incrustar esquemas de datos expl\u00edcitos o prototipos de estado directamente en sus marcos de cronolog\u00eda. Puedes implementar esto utilizando campos en l\u00ednea o bloques de datos estructurales externos.<\/p>\n<h3>1. Definiciones de datos en l\u00ednea<\/h3>\n<p>Para definiciones breves de par\u00e1metros, a\u00f1ade un mapa de datos expl\u00edcito rodeado por corchetes (<code>{ }<\/code>) directamente en la declaraci\u00f3n de l\u00ednea de tiempo activa:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFRIzk1RcExJCcl3TiwqUahWyCxJzQ3OLrVSKC4pAirTUUjOL80rsVLIzCtRqIVoMlJILStR8AQqBGpMTcHUpFALALSaJIE=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>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:eNptzL0Ng0AMBtA+Ejt8A1CElHQoygRMYGFzsrgfyZg00e0e0LUM8F4qLJG4gAXylexl7x6+4jlgSYwpmASyKb7JTL3gB3VJ83aM2N00hx4LZVcmHqHZURt\/nZvjEyVdZ2v4hqP+AYRYLUc=\" \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\">modelado de eventos\r\ntf 01 cmd AgregarAlCarrito { itemSku: string, cantidad: int }\r\ntf 02 evt ElementoAgregado { itemSku: string }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptzL0Ng0AMBtA+Ejt8A1CElHQoygRMYGFzsrgfyZg00e0e0LUM8F4qLJG4gAXylexl7x6+4jlgSYwpmASyKb7JTL3gB3VJ83aM2N00hx4LZVcmHqHZURt\/nZvjEyVdZ2v4hqP+AYRYLUc=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLLUvNK8nNT0nNycxL5+UqSVMwMFRIzk1RcExJCcl3TiwqUahWyCxJzQ3OLrVSKC4pAirTUUjOL80rsVLIzCtRqIVoMlJILStR8AQqBGpMTcHUpFALALSaJIE=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"leNAhTk\"><img alt=\"\" class=\"alignnone size-full wp-image-946\" decoding=\"async\" height=\"330\" sizes=\"(max-width: 869px) 100vw, 869px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7.png 869w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7-300x114.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de467805f7-768x292.png 768w\" width=\"869\"\/><\/p>\n<h3>2. Bloques de datos separados (corchetes dobles)<\/h3>\n<p>Cuando se manejan matrices de objetos complejas o se reutilizan propiedades coincidentes en diferentes marcos, asigna un descriptor externo. Coloca una referencia de puntero encerrada entre corchetes dobles (<code>[[IDBloque]]<\/code>) en la l\u00ednea de tiempo, y detalla los componentes del objeto por separado al final del script mediante la palabra clave <code>datos<\/code>palabra clave:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>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:eNply7EKwkAQRdE+sP\/wulRKEkyRdGKaVBHFKqRYdkYENxlYJ4KI\/+5GG8FuuHPeKMTekoAYfOdJ5WYSPSPL4UbC7sLuKrOi77tAHBqrNsuH4WuKOFF8HntvHdM\/MwnFGz8VT5MAsoSWaqTdoVlVVZEuVUWt344yT1oj35TrMluym0PgyT2iPh2bKF9vGUc3vA==\" \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\">modelado de eventos\r\ntf 01 cmd Checkout [[OrderData01]]\r\ntf 02 evt OrderPlaced [[OrderData01]]\r\n\r\ndata OrderData01 {\r\n  orderId: 'ORD-992'\r\n  totalAmount: 145.50\r\n  currency: 'USD'\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNply7EKwkAQRdE+sP\/wulRKEkyRdGKaVBHFKqRYdkYENxlYJ4KI\/+5GG8FuuHPeKMTekoAYfOdJ5WYSPSPL4UbC7sLuKrOi77tAHBqrNsuH4WuKOFF8HntvHdM\/MwnFGz8VT5MAsoSWaqTdoVlVVZEuVUWt344yT1oj35TrMluym0PgyT2iPh2bKF9vGUc3vA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplyrEKwjAUheE9kHe4WyclKXZoNzGLU0VxKh1CctVik0C4KYj47ia6CG6H7\/y4oCcXLM6Tv3JGFxASjLOwu6G5h0QwDH20GJUmLeQ4fpsacCH4HIdZG7T\/GWc2b\/hReHIGEArsbQdVf1Srtq2rohRIz1sXkqcO5KZZN6KwSTGiN49cn08ql683wtI12w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"Qjeasgy\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-947\" decoding=\"async\" height=\"362\" loading=\"lazy\" sizes=\"auto, (max-width: 1105px) 100vw, 1105px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2.png 1105w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-300x98.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-1024x335.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de47409aa2-768x252.png 768w\" width=\"1105\"\/><\/p>\n<hr\/>\n<h2>Plano real: Automatizaci\u00f3n de inventario para comercio electr\u00f3nico<\/h2>\n<p>Este plano completo y de m\u00faltiples carriles muestra un flujo de trabajo avanzado de arquitectura para comercio electr\u00f3nico. Mapea las acciones secuenciales del usuario en la interfaz frontal, transiciones a trav\u00e9s de comandos de procesamiento, rastrea las huellas hist\u00f3ricas de eventos e implementa un procesador de microservicios en segundo plano automatizado mediante un <code>resetframe<\/code> (<code>rf<\/code>), y proporciona modelos de bloques de datos aislados.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVUjtPwzAQ3iPlP9yCukCVlkAhWykMHRAV5TEgBmNfW6uxXexzoar47\/hRoEgsTFFy3\/MuuEZNyghspZ6XxcEBTBbMIfQauHdoYcQswVgTWsZJGl0WNIOqB17CxBrhOY0YsdbMHyS+5WEfuBIwFGJMqO5MUnh6io+RUYpp8fycgceAa0oO3QgNDBQ75FWM9YWrwSoDw+C\/xmupZQREux12wjatYUl1r0C\/gaEnoxgF0QvGl3NrvBahS5Q2dgMPrJWC5VI22Jz8EScHOIUVt3CLYSHrRAjVOTpnbJ4PcuO2NTzYPTKLC+MdTsnwJWzBLX0DjmzY8CG80qYBqQk+MvcsuX6n6iZStgrBt2B\/XMeiAe+liNTU9Oo93EWzFi7DDWDKF6gQpivkciZ5oriyEHG2t33YlgXAKh8vSnYmtzeXR3XV78TBq2eaZAzZK4uPPXo6yX\/IACQVOmJqFd4HvbOTuq6q6rfq7nhZl0z4leLu3U6AB8TUv6TvDfTr7vl5oH8CPDHgfQ==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>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:eNqVUstOG0EQvFvyP\/QFcUmstVkC7A05IPkQxYIIDohDZ6ZxRuxMr2d6nFgWH5NvyCfwY8zDCCLlktOqt6u6q7rGsqYeNYMmoA054TAeHRzAJQaCaQcLJ+RRKfP8xyVMDzFE9IZBsYNUKvTeCI9H8gDNFKKBpWcdlcxRsOfVjaGftTkDZTWca70Qst94jl7g7i5\/5mwtOn1\/X4FHSYhAbkwyNDFI75EXWeErrgVvGc6VmA19Mc5kQF63xy5x2zOWqW+OZh3cYG80VkMYhe3zbzEK8wGMy\/OLPXIQaBVduszQo0sGfVp5\/A9pVcwnGJSHKwrkNyiGXTqDohDY1\/5Jdd\/3rFDoFj394BjoWlg9wg7CY+wgiDdu9QHWsu2SFoGnyj0tWxdFHPvtpJDqqnSZHfi3rQvdQYxGZ2pxfREGUuYhGVSpTaHkHNaRbHGsMQUO9CuF7HLyqUZ4lwnsxiOAoUaahx8ur75+\/tg2s8PcWEd0YrLc6Xj09I5egvofMoAYS0HQDqk+mZ4et23TNH9P3Uda5wqnB5ZTCPsB6SnKdfxe\/ncwaydnZ4n+AvRG8t8=\" \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\">modelado de eventos\r\n%% Fase 1: Interacci\u00f3n del usuario con el carrito\r\ntf 01 ui ProductCatalogView\r\ntf 02 cmd AddItemToCart [[CartCommand]]\r\ntf 03 evt Cart.ItemAdded [[CartEvent]]\r\ntf 04 rmo ActiveMiniCartView [[CartPayload]]\r\n\r\n%% Fase 2: Validaci\u00f3n autom\u00e1tica de inventario en segundo plano\r\nrf 05 evt Cart.ItemAdded\r\ntf 06 pcr ReservationProcessor\r\ntf 07 cmd AllocateWarehouseStock { sku: string, qty: int }\r\ntf 08 evt Inventory.StockReserved { reservationId: uuid }\r\n\r\n%% Especificaciones de esquema de datos externos\r\ndata CartCommand {\r\n  productId: 'PROD-402'\r\n  quantity: 1\r\n}\r\ndata CartEvent {\r\n  productId: 'PROD-402'\r\n  quantity: 1\r\n  timestamp: 1718544000\r\n}\r\ndata CartPayload {\r\n  totalItems: 1\r\n  cartSubtotal: 24.99\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVUstOG0EQvFvyP\/QFcUmstVkC7A05IPkQxYIIDohDZ6ZxRuxMr2d6nFgWH5NvyCfwY8zDCCLlktOqt6u6q7rGsqYeNYMmoA054TAeHRzAJQaCaQcLJ+RRKfP8xyVMDzFE9IZBsYNUKvTeCI9H8gDNFKKBpWcdlcxRsOfVjaGftTkDZTWca70Qst94jl7g7i5\/5mwtOn1\/X4FHSYhAbkwyNDFI75EXWeErrgVvGc6VmA19Mc5kQF63xy5x2zOWqW+OZh3cYG80VkMYhe3zbzEK8wGMy\/OLPXIQaBVduszQo0sGfVp5\/A9pVcwnGJSHKwrkNyiGXTqDohDY1\/5Jdd\/3rFDoFj394BjoWlg9wg7CY+wgiDdu9QHWsu2SFoGnyj0tWxdFHPvtpJDqqnSZHfi3rQvdQYxGZ2pxfREGUuYhGVSpTaHkHNaRbHGsMQUO9CuF7HLyqUZ4lwnsxiOAoUaahx8ur75+\/tg2s8PcWEd0YrLc6Xj09I5egvofMoAYS0HQDqk+mZ4et23TNH9P3Uda5wqnB5ZTCPsB6SnKdfxe\/ncwaydnZ4n+AvRG8t8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVUjtPwzAQ3iPlP9yCukCVlkAhWykMHRAV5TEgBmNfW6uxXexzoar47\/hRoEgsTFFy3\/MuuEZNyghspZ6XxcEBTBbMIfQauHdoYcQswVgTWsZJGl0WNIOqB17CxBrhOY0YsdbMHyS+5WEfuBIwFGJMqO5MUnh6io+RUYpp8fycgceAa0oO3QgNDBQ75FWM9YWrwSoDw+C\/xmupZQREux12wjatYUl1r0C\/gaEnoxgF0QvGl3NrvBahS5Q2dgMPrJWC5VI22Jz8EScHOIUVt3CLYSHrRAjVOTpnbJ4PcuO2NTzYPTKLC+MdTsnwJWzBLX0DjmzY8CG80qYBqQk+MvcsuX6n6iZStgrBt2B\/XMeiAe+liNTU9Oo93EWzFi7DDWDKF6gQpivkciZ5oriyEHG2t33YlgXAKh8vSnYmtzeXR3XV78TBq2eaZAzZK4uPPXo6yX\/IACQVOmJqFd4HvbOTuq6q6rfq7nhZl0z4leLu3U6AB8TUv6TvDfTr7vl5oH8CPDHgfQ==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"vQXOTmY\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-948\" decoding=\"async\" height=\"801\" loading=\"lazy\" sizes=\"auto, (max-width: 2180px) 100vw, 2180px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174.png 2180w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-300x110.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-1024x376.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-768x282.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-1536x564.png 1536w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de494df174-2048x752.png 2048w\" width=\"2180\"\/><\/p>\n<hr\/>\n<p><em><strong>Consejo de sintaxis:<\/strong>Para crear carriles secundarios bien organizados debajo de las v\u00edas principales o aislar m\u00faltiples subsistemas, puede agregar una cadena calificadora de espacio de nombres separada por puntos a las etiquetas de sus entidades (por ejemplo: <code>evt Cart.ItemAdded<\/code> vs. <code>evt Inventory.StockReserved<\/code>). El motor generar\u00e1 autom\u00e1ticamente l\u00edneas de subgrupos distintas para esas entidades.<\/em><\/p>\n<hr\/>\n<h2>Errores comunes de sintaxis y limitaciones del sistema<\/h2>\n<p>Al dise\u00f1ar bloques de comportamiento de series de tiempo altamente densos, tenga en cuenta estas reglas de validaci\u00f3n de formato para evitar errores de compilaci\u00f3n:<\/p>\n<ul>\n<li><strong>N\u00fameros de secuencia de seguimiento de marcos temporales:<\/strong> Cada <code>tf<\/code> o <code>timeframe<\/code> asignaci\u00f3n requiere un token de identificador num\u00e9rico expl\u00edcito inmediatamente despu\u00e9s de \u00e9l. Escribir una definici\u00f3n de token como <code>tf ui ProductView<\/code> sin un \u00edndice num\u00e9rico intermedio detendr\u00e1 el an\u00e1lisis del sistema.<\/li>\n<li><strong>Espacios en blanco y formato de objetos:<\/strong> Dentro de mapas de datos con estilo JSON o independientes <code>datos<\/code> declaraciones, mantenga asignaciones limpias. Olvidar una llave de apertura o corchetes finales puede provocar dise\u00f1os de cuadr\u00edcula no resueltos.<\/li>\n<li><strong>Diferenciaci\u00f3n entre marcos de tiempo y marcos de reinicio:<\/strong> Use <code>tf<\/code> para operaciones progresivas impulsadas por humanos. Use <code>rf<\/code> \/ <code>marco de reinicio<\/code> intencionalmente cuando necesite ilustrar desencadenantes fuera de banda, como un trabajo cron en segundo plano que procesa un evento que ocurri\u00f3 anteriormente.<\/li>\n<li><strong>Reutilizaci\u00f3n de datos inmutables:<\/strong> Cuando se hace referencia al mismo dise\u00f1o de carga de datos exacto en m\u00faltiples pasos de la cronolog\u00eda, conserve coincidencias id\u00e9nticas en los nombres en sus puntos de acceso de datos para evitar la generaci\u00f3n de nodos duplicados.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El modelado de eventos (EM) es una metodolog\u00eda estrat\u00e9gica utilizada para dise\u00f1ar y describir sistemas de informaci\u00f3n mediante el mapeo de c\u00f3mo los datos cambian, se transforman y evolucionan a lo largo de una l\u00ednea temporal lineal. Al omitir deliberadamente&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":19,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2086","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Event Modeling | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Event Modeling | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 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-event-modeling-syntax-swimlane-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\",\"name\":\"Mermaid Event Modeling | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\",\"datePublished\":\"2026-07-08T05:45:59+00:00\",\"description\":\"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4de44e3a892.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-event-modeling-syntax-swimlane-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\":\"Sintaxis de modelado de eventos de Mermaid.js &#038; Gu\u00eda de carriles\"}]},{\"@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 Event Modeling | VPasCode Text to Diagram Guide","description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid Event Modeling | VPasCode Text to Diagram Guide","og_description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/","name":"Mermaid Event Modeling | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","datePublished":"2026-07-08T05:45:59+00:00","description":"Map event-driven architecture systems using Mermaid event modeling syntax in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4de44e3a892.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-event-modeling-syntax-swimlane-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":"Sintaxis de modelado de eventos de Mermaid.js &#038; Gu\u00eda de carriles"}]},{"@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\/2086","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=2086"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}