Um quadro Kanban é uma ferramenta visual de gestão de fluxo de trabalho usada para rastrear tarefas ou itens de trabalho em diferentes estágios de processamento (como Backlog, Em Andamento e Concluído). Introduzido como um recurso nativo no Mermaid.js, este método baseado em texto permite que equipes de desenvolvimento e gestores de projetos criem rapidamente painéis interativos de tarefas dentro de arquivos de documentação, sem precisar gerenciar aplicativos de rastreamento manuais ou elementos de imagem de terceiros.
Estrutura Básica da Sintaxe
Todo quadro Kanban começa com o kanban cabeçalho de declaração. As colunas são definidas usando o sectionpalavra-chave, e os cartões individuais de tarefas são listados sequencialmente abaixo de cada coluna utilizando blocos de espaçamento por indentação.
kanban
title "Sprint do Projeto de Exemplo"
section Todo
Designar o esquema do banco de dados
Elaborar as rotas da API
section Em Andamento
Implementar o middleware de autenticação
Referência de Sintaxe
A tabela abaixo detalha os componentes de dados fundamentais e parâmetros usados para criar um mapa de quadro Kanban no Mermaid.js.
| Componente de Sintaxe | Requisito de Tipo | Descrição e Regras de Uso |
|---|---|---|
| Declaração | Identificador de Palavra-Chave | Inicializa os parâmetros de mapeamento do bloco de fluxo ágil. Deve usar exatamente o kanbanbloco. |
| Título | String entre aspas | Um título opcional do espaço de trabalho global centralizado elegantemente no topo da área do quadro Kanban. |
| Coluna de Seção | Palavra-chave + Nome | Define uma coluna de estágio independente do fluxo de trabalho. Use a sectionpalavra-chave seguida pela etiqueta da coluna. |
| Cartão Padrão de Tarefa | String com Recuo | Uma descrição em texto simples que representa um único cartão. Deve ser recuada ou indentada diretamente abaixo de sua seção ativa. |
| Cartão de ID de Tarefa | Identificador entre Colchetes | Um formato avançado de rastreamento de cartões de tarefa que utiliza um token de ID exclusivo explícito junto com sua etiqueta de exibição: id[Texto do Cartão]. |
| Bloco de Metadados | Mapa de Configuração JSON | Um bloco opcional de propriedades anexado usando a regra de sintaxe @{...} regra de sintaxe para atribuir atributos como prioridade de bilhete ou proprietários. |
Atributos e Metadados Avançados de Tarefa
Para sprints de engenharia detalhados ou fluxos de trabalho de rastreamento de bugs, você pode atribuir atributos de metadados diretamente em um cartão. Ao associar um ID de nó exclusivo (como task1[...]) com um bloco de declaração de configuração JSON ao final (@{}), você pode imprimir variáveis estruturadas como responsáveis pela tarefa, prioridades e bilhetes de rastreamento internos diretamente na face do elemento do cartão.
Variáveis de Tarefa Suportadas
| Chave do Atributo | Formatação do Valor | Resultado Visual |
|---|---|---|
atribuído |
Nome em String entre Aspas | Renderiza a etiqueta do proprietário ou desenvolvedor atribuído diretamente dentro da matriz de detalhes do cartão. |
prioridade |
String de Escala entre Aspas | Exibe benchmarks de gravidade da tarefa (por exemplo, 'Alta', 'Médio', 'Baixo'). |
bilhete |
Token inteiro ou alfa | Rastreia números de tarefas de desenvolvimento vinculadas ou códigos de projetos do sistema. |
Plano Prático do Mundo Real: Sprint de Lançamento de Desenvolvimento Ágil
Este plano abrangente rastreia um lançamento de implantação de infraestrutura. Ele define três colunas distintas (Backlog, Em Andamento e Pronto para Implantação) e utiliza IDs de tarefas avançadas combinadas com parâmetros de metadados estruturais para atribuir desenvolvedores específicos e códigos de bilhetes em funcionalidades.
kanban
titulo "Quadro de Lançamento de Recursos Principais do Q3"
seção Backlog
task101[Criar Documentação da API Endpoint]@{ atribuído: 'Sarah K', prioridade: 'Médio' }
task102[Designar Wireframes da Página de Aterrissagem]
seção Em Andamento
task201[Refinar Sincronização de Consultas do Banco de Dados]@{ atribuído: 'Alex M', prioridade: 'Alta', bilhete: 4012 }
task202[Configurar Componentes da UI Lightbox]@{ atribuído: 'Sarah K', prioridade: 'Baixo' }
seção Pronto para Implantação
task301[Implementar Autenticação de Usuário Multifator]@{ atribuído: 'Equipe Dev', bilhete: 3985 }
Dica de Sintaxe: Embora tarefas simples possam ser digitadas como linhas de texto simples sem aspas, atribuições complexas que carregam parâmetros de metadados *devem* usar um prefixo de string de mapeamento de ID exclusivo (como id1[...]@{...}). Reutilizar exatamente o mesmo ID de tarefa em diferentes partes do quadro sobrescreverá propriedades ou causará erros de layout.
Armadilhas Comuns de Sintaxe e Restrições do Sistema
Ao projetar sistemas de layout altamente densos e de múltiplas etapas, tenha em mente esses parâmetros estruturais de solução de problemas:
- A Regra da Seção Antes das Cartas: Todas as cartas de tarefas devem residir abaixo de um bloco de coluna ativo. Escrever uma linha de string de tarefa imediatamente abaixo do seu título principal
kanbansem declarar umaseçãocabeçalho de coluna primeiro interromperá a compilação. - Espaçamento e Recuo: O motor de layout de rastreamento agrupa cartas com base em guias de recuo de linha. Certifique-se de que todas as linhas de cartas de tarefas estejam uniformemente recuadas abaixo de seus rótulos ativos
seçãopara evitar quebras de alinhamento. - Formato de Delimitador de Metadados: Ao criar atributos personalizados dentro de um
@{ }bloco, chaves e valores devem corresponder a argumentos válidos do sistema. Separe múltiplos atributos por vírgulas e use aspas limpas para envolver suas atribuições de string. - Gerenciamento da Densidade de Cartões: Embora o componente Kanban seja totalmente responsivo, sobrecarregar uma única tabela com mais de 5 colunas ou adicionar dezenas de linhas densas de metadados pode reduzir a legibilidade em dispositivos móveis. Equilibre intencionalmente as regras de espaçamento do layout.