{"id":2088,"date":"2026-07-07T09:05:47","date_gmt":"2026-07-07T09:05:47","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-kanban-board-syntax-workflow-guide\/"},"modified":"2026-07-07T09:05:47","modified_gmt":"2026-07-07T09:05:47","slug":"mermaid-js-kanban-board-syntax-workflow-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","title":{"rendered":"Sintaxis del tablero Kanban de Mermaid.js y gu\u00eda de flujo de trabajo"},"content":{"rendered":"<p>Un tablero Kanban es una herramienta visual de gesti\u00f3n de flujos de trabajo utilizada para rastrear tareas o elementos de trabajo a trav\u00e9s de diferentes etapas de procesamiento (como Lista de pendientes, En progreso y Completado). Introducido como una caracter\u00edstica nativa en Mermaid.js, este enfoque basado en texto permite a los equipos de desarrollo y gerentes de proyectos crear r\u00e1pidamente paneles interactivos de tareas dentro de archivos de documentaci\u00f3n sin tener que gestionar aplicaciones de seguimiento manuales ni elementos de imagen de terceros.<\/p>\n<h2>Estructura b\u00e1sica de sintaxis<\/h2>\n<p>Cada tablero Kanban comienza con el <code>kanban<\/code> encabezado de declaraci\u00f3n. Las columnas se definen utilizando el <code>section<\/code>palabra clave, y las tarjetas individuales de tareas se enumeran secuencialmente debajo de cada columna utilizando bloques de sangr\u00eda.<\/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:eNpFjcEKwzAMQ++B\/IPonwx2ya3Q\/YDbeG22xim2y35\/zS47CaEn6U0yk8TgxXfGMFE9Lh21vXhxTIcW8SEGu1xpgkfLLQbgzlZWQSanmYxhy8aVfonS03EbE7SdzvbvJum7q7JZB1N\/qiwOOn1DLTnv\/CHlLzojMck=\" 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:eNpFjU0KgzAQhfeCdxi8SaEu3Ak9wWgeZdpkYpOR0mNJj+DFmuiim+Ex7+d7sk6sbWNiHtTdliRq5EBLih\/MFqvGA2HxsWubXF4SlUaoE6ghtw3RVTL2jRPBE\/JrReBa80wTZ1Tp2OIR7T1PMZWo50xptXLP5GUc\/vO9Vv49IcdaGgodoeBORBDnPN6cjmlerTgy8yz7V39YpEj6\" \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\">kanban\r\ntitle \"Sprint de proyecto de ejemplo\"\r\nsection Pendientes\r\n  Dise\u00f1ar el esquema de la base de datos\r\n  Elaborar las rutas de la API\r\nsection En progreso\r\n  Implementar el middleware de autenticaci\u00f3n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjU0KgzAQhfeCdxi8SaEu3Ak9wWgeZdpkYpOR0mNJj+DFmuiim+Ex7+d7sk6sbWNiHtTdliRq5EBLih\/MFqvGA2HxsWubXF4SlUaoE6ghtw3RVTL2jRPBE\/JrReBa80wTZ1Tp2OIR7T1PMZWo50xptXLP5GUc\/vO9Vv49IcdaGgodoeBORBDnPN6cjmlerTgy8yz7V39YpEj6\" \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:eNpFjcEKwzAMQ++B\/IPonwx2ya3Q\/YDbeG22xim2y35\/zS47CaEn6U0yk8TgxXfGMFE9Lh21vXhxTIcW8SEGu1xpgkfLLQbgzlZWQSanmYxhy8aVfonS03EbE7SdzvbvJum7q7JZB1N\/qiwOOn1DLTnv\/CHlLzojMck=\" 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=\"QXkbmmT\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-935\" decoding=\"async\" fetchpriority=\"high\" height=\"171\" sizes=\"(max-width: 630px) 100vw, 630px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png 630w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436-300x81.png 300w\" width=\"630\"\/><\/p>\n<h2>Referencia de sintaxis<\/h2>\n<p>La tabla a continuaci\u00f3n desglosa los componentes de datos fundamentales y par\u00e1metros utilizados para crear un mapa de tablero Kanban en Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente de sintaxis<\/th>\n<th>Requisito de tipo<\/th>\n<th>Descripci\u00f3n y reglas de uso<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaraci\u00f3n<\/strong><\/td>\n<td>Identificador de palabra clave<\/td>\n<td>Inicializa los par\u00e1metros de mapeo de bloques de flujo \u00e1gil. Debe usar exactamente el <code>kanban<\/code>bloque.<\/td>\n<\/tr>\n<tr>\n<td><strong>T\u00edtulo<\/strong><\/td>\n<td>Cadena entre comillas<\/td>\n<td>Un encabezado de espacio de trabajo global opcional, centrado correctamente en la parte superior del lienzo Kanban.<\/td>\n<\/tr>\n<tr>\n<td><strong>Columna de secci\u00f3n<\/strong><\/td>\n<td>Palabra clave + Nombre<\/td>\n<td>Define una columna de etapa independiente del flujo de trabajo. Use la <code>section<\/code>palabra clave seguida de la etiqueta de la columna.<\/td>\n<\/tr>\n<tr>\n<td><strong>Tarjeta de tarea est\u00e1ndar<\/strong><\/td>\n<td>Cadena con sangr\u00eda<\/td>\n<td>Una descripci\u00f3n en texto plano que representa una sola tarjeta. Debe estar tabulada o sangrada directamente debajo de su secci\u00f3n activa.<\/td>\n<\/tr>\n<tr>\n<td><strong>Tarjeta de identificaci\u00f3n de tarea<\/strong><\/td>\n<td>Identificador entre corchetes<\/td>\n<td>Un formato avanzado de seguimiento de tarjetas de tarea que utiliza un token de ID \u00fanico expl\u00edcito junto con su etiqueta de visualizaci\u00f3n: <code>id[Texto de la tarjeta]<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bloque de metadatos<\/strong><\/td>\n<td>Mapa de configuraci\u00f3n JSON<\/td>\n<td>Un bloque de propiedades opcional a\u00f1adido usando la regla de sintaxis <code>@{...}<\/code> regla de sintaxis para asignar atributos como la prioridad del ticket o los propietarios.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Atributos y metadatos de tarea avanzados<\/h2>\n<p>Para sprints de ingenier\u00eda detallados o flujos de trabajo de seguimiento de errores, puede asignar atributos de metadatos directamente a una tarjeta. Al emparejar un ID de nodo \u00fanico (como <code>task1[...]<\/code>) con un bloque declarativo de configuraci\u00f3n JSON al final (<code>@{}<\/code>), puede imprimir variables estructuradas como asignados de tareas, prioridades y tickets de seguimiento internos directamente en la cara del elemento de la tarjeta.<\/p>\n<h3>Variables de tarea admitidas<\/h3>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Clave del atributo<\/th>\n<th>Formato de valor<\/th>\n<th>Resultado visual<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>asignado<\/code><\/td>\n<td>Nombre de cadena entre comillas<\/td>\n<td>Muestra la etiqueta del propietario o desarrollador asignado directamente dentro de la matriz de detalles de la tarjeta.<\/td>\n<\/tr>\n<tr>\n<td><code>prioridad<\/code><\/td>\n<td>Cadena de escala entre comillas<\/td>\n<td>Muestra los benchmarks de gravedad de la tarea (por ejemplo, <code>'Alta'<\/code>, <code>'Medio'<\/code>, <code>'Bajo'<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>ticket<\/code><\/td>\n<td>Token entero o alfanum\u00e9rico<\/td>\n<td>Rastrea los n\u00fameros de tareas de desarrollo vinculadas o los c\u00f3digos de proyecto del sistema.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Plantilla del mundo real: Sprint de lanzamiento de desarrollo \u00e1gil<\/h2>\n<p>Esta plantilla completa rastrea un lanzamiento de despliegue de infraestructura. Define tres columnas distintas (Pendientes, En progreso y Listo para despliegue) y utiliza identificadores de tareas avanzados combinados con par\u00e1metros de metadatos estructurales para asignar desarrolladores espec\u00edficos y c\u00f3digos de ticket en funci\u00f3n de las caracter\u00edsticas.<\/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:eNqNkE1rwkAQhu+C\/2Hw4qUFjS20nqqm0lAFPyo9iIcxmSRDkt2wO2lNi\/\/dTUFswUNPC7Pz7j7Pm6Hao2q3hCUn6CwHMNGGYEoolTtXlBNagrFGE3XaLUuhsFYwxjDLddJuAQjarN\/rbyfGZQhGiwCeVVRqVgK+DquClGAT2j19A1rLiaJoCN01GkzhtXsDpWFtWGo3nFPEVdGF4+Vlb+tTE4IZqohVAgtMCN7ZUGywILu7UAUKFkYnhqw95z1HtqKYFYGPgvtGZlmRqWFdqzA1WvHXNbpRTgeY\/4V74SR1E+EwIxnCXa\/vXUA9BzrRKuak6W3mVmWvD7AJXKFFqZVrwf6ngZn+\/NE\/O60IoxpibcCnMtf1+b+BEwuKMqemX5hXufDtFENxixtLBkaVpO6Gw2t2Pn3AG2Hxy2bw+HAPxxM6XLED\" 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:eNqNUc1OG0EMvkfKO1hccuFAklainEiBAwKkoPaGODiz3sVkdjz1zEgoFQ\/DI1R9hLxYPYtCUE49rcdrf39eY1hhGI8y5+IFjn7iypMKNAQewwZ7ppCHZ1uCYwmUICpbGdFbfT8\/Go8SOcfbvwGWFJq6QGk8AsiY1tOT6cOFEio04kpv\/\/B91BBjMegELYcByjqL5fXj+W\/AxF3ARs5g8gMVn+BmclxZRbnBxrp31DBO4HXPMnu45ETbP0YUVbJkjjJAxu1bZwS1xEyqvMFnevyk+SrUjU4pyQ5uZqKXpG0dkWCQHiGZZ5Vg6x\/6nYRUvC3UxwoT1W+D5unAxMLTC9wdeFjYprUyuzXlM\/hyMp3tDc3M0IWElruixu+kjxZ9DbZysBXa4qbWJRU0VLjl7imv5OW\/8vuOz+\/xfaRwy8nOHG3aQFP01KHuxMwtjuveesP5FLBkK9jtk9iJ6C0ObtFl0QMdV7+KXWQIiBKqivfyyf382+lXeP0HN3DnOg==\" \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\">kanban\r\ntitulo \"Tablero de lanzamiento de funciones principales Q3\"\r\nsecci\u00f3n Pendientes\r\n  task101[Crear documentaci\u00f3n de puntos finales de API]@{ asignado: 'Sarah K', prioridad: 'Media' }\r\n  task102[Dise\u00f1ar prototipos de p\u00e1gina de aterrizaje]\r\nsecci\u00f3n En progreso\r\n  task201[Perfeccionar la sincronizaci\u00f3n de consultas de base de datos]@{ asignado: 'Alex M', prioridad: 'Alta', ticket: 4012 }\r\n  task202[Configurar componentes de interfaz de usuario Lightbox]@{ asignado: 'Sarah K', prioridad: 'Baja' }\r\nsecci\u00f3n Listo para desplegar\r\n  task301[Implementar autenticaci\u00f3n de usuario multifactor]@{ asignado: 'Equipo de desarrollo', ticket: 3985 }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUc1OG0EMvkfKO1hccuFAklainEiBAwKkoPaGODiz3sVkdjz1zEgoFQ\/DI1R9hLxYPYtCUE49rcdrf39eY1hhGI8y5+IFjn7iypMKNAQewwZ7ppCHZ1uCYwmUICpbGdFbfT8\/Go8SOcfbvwGWFJq6QGk8AsiY1tOT6cOFEio04kpv\/\/B91BBjMegELYcByjqL5fXj+W\/AxF3ARs5g8gMVn+BmclxZRbnBxrp31DBO4HXPMnu45ETbP0YUVbJkjjJAxu1bZwS1xEyqvMFnevyk+SrUjU4pyQ5uZqKXpG0dkWCQHiGZZ5Vg6x\/6nYRUvC3UxwoT1W+D5unAxMLTC9wdeFjYprUyuzXlM\/hyMp3tDc3M0IWElruixu+kjxZ9DbZysBXa4qbWJRU0VLjl7imv5OW\/8vuOz+\/xfaRwy8nOHG3aQFP01KHuxMwtjuveesP5FLBkK9jtk9iJ6C0ObtFl0QMdV7+KXWQIiBKqivfyyf382+lXeP0HN3DnOg==\" \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:eNqNkE1rwkAQhu+C\/2Hw4qUFjS20nqqm0lAFPyo9iIcxmSRDkt2wO2lNi\/\/dTUFswUNPC7Pz7j7Pm6Hao2q3hCUn6CwHMNGGYEoolTtXlBNagrFGE3XaLUuhsFYwxjDLddJuAQjarN\/rbyfGZQhGiwCeVVRqVgK+DquClGAT2j19A1rLiaJoCN01GkzhtXsDpWFtWGo3nFPEVdGF4+Vlb+tTE4IZqohVAgtMCN7ZUGywILu7UAUKFkYnhqw95z1HtqKYFYGPgvtGZlmRqWFdqzA1WvHXNbpRTgeY\/4V74SR1E+EwIxnCXa\/vXUA9BzrRKuak6W3mVmWvD7AJXKFFqZVrwf6ngZn+\/NE\/O60IoxpibcCnMtf1+b+BEwuKMqemX5hXufDtFENxixtLBkaVpO6Gw2t2Pn3AG2Hxy2bw+HAPxxM6XLED\" 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=\"OgGbjiu\"><img alt=\"\" class=\"alignnone size-full wp-image-936\" decoding=\"async\" height=\"243\" sizes=\"(max-width: 835px) 100vw, 835px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7.png 835w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7-300x87.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1d54bad7-768x224.png 768w\" width=\"835\"\/><\/p>\n<hr\/>\n<p><em><strong>Consejo de sintaxis:<\/strong>Mientras que las tareas simples se pueden escribir como l\u00edneas de texto plano sin comillas, las asignaciones complejas que incluyen par\u00e1metros de metadatos *deben* usar un prefijo de cadena de asignaci\u00f3n de ID \u00fanico (como <code>id1[...]@{...}<\/code>). Reutilizar el mismo ID de tarea exacto en diferentes partes del tablero sobrescribir\u00e1 propiedades o provocar\u00e1 errores de dise\u00f1o.<\/em><\/p>\n<hr\/>\n<h2>Errores comunes de sintaxis y limitaciones del sistema<\/h2>\n<p>Al dise\u00f1ar sistemas de dise\u00f1o altamente densos y de m\u00faltiples etapas, tenga en cuenta estos par\u00e1metros de soluci\u00f3n de problemas estructurales:<\/p>\n<ul>\n<li><strong>La regla de secci\u00f3n antes de las tarjetas:<\/strong>Todas las tarjetas de tareas deben residir debajo de un bloque de columna activo. Escribir una l\u00ednea de cadena de tarea inmediatamente debajo de su t\u00edtulo principal <code>kanban<\/code> sin declarar una <code>secci\u00f3n<\/code>encabezado de columna primero detendr\u00e1 la compilaci\u00f3n.<\/li>\n<li><strong>Espacios en blanco e indentaci\u00f3n:<\/strong>El motor de dise\u00f1o de seguimiento agrupa las tarjetas seg\u00fan las tabulaciones de indentaci\u00f3n de l\u00ednea. Aseg\u00farese de que todas las filas de tarjetas de tareas est\u00e9n indentadas de forma uniforme debajo de sus etiquetas de <code>secci\u00f3n<\/code>etiquetas para evitar interrupciones de alineaci\u00f3n.<\/li>\n<li><strong>Formato del delimitador de metadatos:<\/strong> Al crear atributos personalizados dentro de un <code>@{ }<\/code> bloque, las claves y los valores deben asignarse a argumentos v\u00e1lidos del sistema. Separe m\u00faltiples atributos con comas y use comillas limpias para encerrar sus asignaciones de cadenas.<\/li>\n<li><strong>Gesti\u00f3n de la densidad de tarjetas:<\/strong> Aunque el componente Kanban es completamente adaptable, saturar un tablero individual con m\u00e1s de 5 columnas o agregar docenas de filas densas de metadatos puede reducir la facilidad de escaneo en m\u00f3viles. Ajuste sus reglas de espaciado de dise\u00f1o de forma intencional.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un tablero Kanban es una herramienta visual de gesti\u00f3n de flujos de trabajo utilizada para rastrear tareas o elementos de trabajo a trav\u00e9s de diferentes etapas de procesamiento (como Lista de pendientes, En progreso y Completado). Introducido como una caracter\u00edstica&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":17,"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-2088","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 Kanban Board Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram 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-kanban-board-syntax-workflow-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Kanban Board Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-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_6a4cc1c40f436.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-kanban-board-syntax-workflow-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/\",\"name\":\"Mermaid Kanban Board Syntax | 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-kanban-board-syntax-workflow-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc1c40f436.png\",\"datePublished\":\"2026-07-07T09:05:47+00:00\",\"description\":\"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc1c40f436.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4cc1c40f436.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-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 del tablero Kanban de Mermaid.js y gu\u00eda de flujo de trabajo\"}]},{\"@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 Kanban Board Syntax | VPasCode Text to Diagram Guide","description":"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram 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-kanban-board-syntax-workflow-guide\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid Kanban Board Syntax | VPasCode Text to Diagram Guide","og_description":"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.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-kanban-board-syntax-workflow-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","name":"Mermaid Kanban Board Syntax | 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-kanban-board-syntax-workflow-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png","datePublished":"2026-07-07T09:05:47+00:00","description":"Build lightweight task workflow boards using Mermaid Kanban syntax inside VPasCode, your text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4cc1c40f436.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-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 del tablero Kanban de Mermaid.js y gu\u00eda de flujo de trabajo"}]},{"@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\/2088","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=2088"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}