Un tablero Kanban es una herramienta visual de gestión de flujos de trabajo utilizada para rastrear tareas o elementos de trabajo a través de diferentes etapas de procesamiento (como Lista de pendientes, En progreso y Completado). Introducido como una característica nativa en Mermaid.js, este enfoque basado en texto permite a los equipos de desarrollo y gerentes de proyectos crear rápidamente paneles interactivos de tareas dentro de archivos de documentación sin tener que gestionar aplicaciones de seguimiento manuales ni elementos de imagen de terceros.
Estructura básica de sintaxis
Cada tablero Kanban comienza con el kanban encabezado de declaración. Las columnas se definen utilizando el sectionpalabra clave, y las tarjetas individuales de tareas se enumeran secuencialmente debajo de cada columna utilizando bloques de sangría.
kanban
title "Sprint de proyecto de ejemplo"
section Pendientes
Diseñar el esquema de la base de datos
Elaborar las rutas de la API
section En progreso
Implementar el middleware de autenticación
Referencia de sintaxis
La tabla a continuación desglosa los componentes de datos fundamentales y parámetros utilizados para crear un mapa de tablero Kanban en Mermaid.js.
| Componente de sintaxis | Requisito de tipo | Descripción y reglas de uso |
|---|---|---|
| Declaración | Identificador de palabra clave | Inicializa los parámetros de mapeo de bloques de flujo ágil. Debe usar exactamente el kanbanbloque. |
| Título | Cadena entre comillas | Un encabezado de espacio de trabajo global opcional, centrado correctamente en la parte superior del lienzo Kanban. |
| Columna de sección | Palabra clave + Nombre | Define una columna de etapa independiente del flujo de trabajo. Use la sectionpalabra clave seguida de la etiqueta de la columna. |
| Tarjeta de tarea estándar | Cadena con sangría | Una descripción en texto plano que representa una sola tarjeta. Debe estar tabulada o sangrada directamente debajo de su sección activa. |
| Tarjeta de identificación de tarea | Identificador entre corchetes | Un formato avanzado de seguimiento de tarjetas de tarea que utiliza un token de ID único explícito junto con su etiqueta de visualización: id[Texto de la tarjeta]. |
| Bloque de metadatos | Mapa de configuración JSON | Un bloque de propiedades opcional añadido usando la regla de sintaxis @{...} regla de sintaxis para asignar atributos como la prioridad del ticket o los propietarios. |
Atributos y metadatos de tarea avanzados
Para sprints de ingeniería detallados o flujos de trabajo de seguimiento de errores, puede asignar atributos de metadatos directamente a una tarjeta. Al emparejar un ID de nodo único (como task1[...]) con un bloque declarativo de configuración JSON al final (@{}), puede imprimir variables estructuradas como asignados de tareas, prioridades y tickets de seguimiento internos directamente en la cara del elemento de la tarjeta.
Variables de tarea admitidas
| Clave del atributo | Formato de valor | Resultado visual |
|---|---|---|
asignado |
Nombre de cadena entre comillas | Muestra la etiqueta del propietario o desarrollador asignado directamente dentro de la matriz de detalles de la tarjeta. |
prioridad |
Cadena de escala entre comillas | Muestra los benchmarks de gravedad de la tarea (por ejemplo, 'Alta', 'Medio', 'Bajo'). |
ticket |
Token entero o alfanumérico | Rastrea los números de tareas de desarrollo vinculadas o los códigos de proyecto del sistema. |
Plantilla del mundo real: Sprint de lanzamiento de desarrollo ágil
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ámetros de metadatos estructurales para asignar desarrolladores específicos y códigos de ticket en función de las características.
kanban
titulo "Tablero de lanzamiento de funciones principales Q3"
sección Pendientes
task101[Crear documentación de puntos finales de API]@{ asignado: 'Sarah K', prioridad: 'Media' }
task102[Diseñar prototipos de página de aterrizaje]
sección En progreso
task201[Perfeccionar la sincronización de consultas de base de datos]@{ asignado: 'Alex M', prioridad: 'Alta', ticket: 4012 }
task202[Configurar componentes de interfaz de usuario Lightbox]@{ asignado: 'Sarah K', prioridad: 'Baja' }
sección Listo para desplegar
task301[Implementar autenticación de usuario multifactor]@{ asignado: 'Equipo de desarrollo', ticket: 3985 }
Consejo de sintaxis:Mientras que las tareas simples se pueden escribir como líneas de texto plano sin comillas, las asignaciones complejas que incluyen parámetros de metadatos *deben* usar un prefijo de cadena de asignación de ID único (como id1[...]@{...}). Reutilizar el mismo ID de tarea exacto en diferentes partes del tablero sobrescribirá propiedades o provocará errores de diseño.
Errores comunes de sintaxis y limitaciones del sistema
Al diseñar sistemas de diseño altamente densos y de múltiples etapas, tenga en cuenta estos parámetros de solución de problemas estructurales:
- La regla de sección antes de las tarjetas:Todas las tarjetas de tareas deben residir debajo de un bloque de columna activo. Escribir una línea de cadena de tarea inmediatamente debajo de su título principal
kanbansin declarar unasecciónencabezado de columna primero detendrá la compilación. - Espacios en blanco e indentación:El motor de diseño de seguimiento agrupa las tarjetas según las tabulaciones de indentación de línea. Asegúrese de que todas las filas de tarjetas de tareas estén indentadas de forma uniforme debajo de sus etiquetas de
secciónetiquetas para evitar interrupciones de alineación. - Formato del delimitador de metadatos: Al crear atributos personalizados dentro de un
@{ }bloque, las claves y los valores deben asignarse a argumentos válidos del sistema. Separe múltiples atributos con comas y use comillas limpias para encerrar sus asignaciones de cadenas. - Gestión de la densidad de tarjetas: Aunque el componente Kanban es completamente adaptable, saturar un tablero individual con más de 5 columnas o agregar docenas de filas densas de metadatos puede reducir la facilidad de escaneo en móviles. Ajuste sus reglas de espaciado de diseño de forma intencional.