{"id":2084,"date":"2026-07-07T09:05:47","date_gmt":"2026-07-07T09:05:47","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","title":{"rendered":"Sintaxe do Quadro Kanban do Mermaid.js e Guia de Fluxo de Trabalho"},"content":{"rendered":"<p>Um quadro Kanban \u00e9 uma ferramenta visual de gest\u00e3o de fluxo de trabalho usada para rastrear tarefas ou itens de trabalho em diferentes est\u00e1gios de processamento (como Backlog, Em Andamento e Conclu\u00eddo). Introduzido como um recurso nativo no Mermaid.js, este m\u00e9todo baseado em texto permite que equipes de desenvolvimento e gestores de projetos criem rapidamente pain\u00e9is interativos de tarefas dentro de arquivos de documenta\u00e7\u00e3o, sem precisar gerenciar aplicativos de rastreamento manuais ou elementos de imagem de terceiros.<\/p>\n<h2>Estrutura B\u00e1sica da Sintaxe<\/h2>\n<p>Todo quadro Kanban come\u00e7a com o <code>kanban<\/code> cabe\u00e7alho de declara\u00e7\u00e3o. As colunas s\u00e3o definidas usando o <code>section<\/code>palavra-chave, e os cart\u00f5es individuais de tarefas s\u00e3o listados sequencialmente abaixo de cada coluna utilizando blocos de espa\u00e7amento por indenta\u00e7\u00e3o.<\/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>Edite o Mermaid no 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:eNpFzTEKwzAMBdA94DuI3CTQDNkC7QUUSxS3tpTaCs19OvQguVjtLF0EQv8\/PVEWFNdZsMjQX9ccxIAU5qwPNgViGHdOa9TedYW9BRW4KanrAC5cwl0wgwKX18YJW7WC\/iwSkpaWGyMummsOC2S1OglhmKe\/OCYYhDCx2ClP9SO37cRTIIr8xsyNxc3qIXg8vsdHf9YUQ0o=\" \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 do Projeto de Exemplo\"\r\nsection Todo\r\n  Designar o esquema do banco de dados\r\n  Elaborar as rotas da API\r\nsection Em Andamento\r\n  Implementar o middleware de autentica\u00e7\u00e3o<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFzTEKwzAMBdA94DuI3CTQDNkC7QUUSxS3tpTaCs19OvQguVjtLF0EQv8\/PVEWFNdZsMjQX9ccxIAU5qwPNgViGHdOa9TedYW9BRW4KanrAC5cwl0wgwKX18YJW7WC\/iwSkpaWGyMummsOC2S1OglhmKe\/OCYYhDCx2ClP9SO37cRTIIr8xsyNxc3qIXg8vsdHf9YUQ0o=\" \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>Edite o Mermaid no 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>Refer\u00eancia de Sintaxe<\/h2>\n<p>A tabela abaixo detalha os componentes de dados fundamentais e par\u00e2metros usados para criar um mapa de quadro Kanban no Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente de Sintaxe<\/th>\n<th>Requisito de Tipo<\/th>\n<th>Descri\u00e7\u00e3o e Regras de Uso<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declara\u00e7\u00e3o<\/strong><\/td>\n<td>Identificador de Palavra-Chave<\/td>\n<td>Inicializa os par\u00e2metros de mapeamento do bloco de fluxo \u00e1gil. Deve usar exatamente o <code>kanban<\/code>bloco.<\/td>\n<\/tr>\n<tr>\n<td><strong>T\u00edtulo<\/strong><\/td>\n<td>String entre aspas<\/td>\n<td>Um t\u00edtulo opcional do espa\u00e7o de trabalho global centralizado elegantemente no topo da \u00e1rea do quadro Kanban.<\/td>\n<\/tr>\n<tr>\n<td><strong>Coluna de Se\u00e7\u00e3o<\/strong><\/td>\n<td>Palavra-chave + Nome<\/td>\n<td>Define uma coluna de est\u00e1gio independente do fluxo de trabalho. Use a <code>section<\/code>palavra-chave seguida pela etiqueta da coluna.<\/td>\n<\/tr>\n<tr>\n<td><strong>Cart\u00e3o Padr\u00e3o de Tarefa<\/strong><\/td>\n<td>String com Recuo<\/td>\n<td>Uma descri\u00e7\u00e3o em texto simples que representa um \u00fanico cart\u00e3o. Deve ser recuada ou indentada diretamente abaixo de sua se\u00e7\u00e3o ativa.<\/td>\n<\/tr>\n<tr>\n<td><strong>Cart\u00e3o de ID de Tarefa<\/strong><\/td>\n<td>Identificador entre Colchetes<\/td>\n<td>Um formato avan\u00e7ado de rastreamento de cart\u00f5es de tarefa que utiliza um token de ID exclusivo expl\u00edcito junto com sua etiqueta de exibi\u00e7\u00e3o: <code>id[Texto do Cart\u00e3o]<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bloco de Metadados<\/strong><\/td>\n<td>Mapa de Configura\u00e7\u00e3o JSON<\/td>\n<td>Um bloco opcional de propriedades anexado usando a regra de sintaxe <code>@{...}<\/code> regra de sintaxe para atribuir atributos como prioridade de bilhete ou propriet\u00e1rios.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Atributos e Metadados Avan\u00e7ados de Tarefa<\/h2>\n<p>Para sprints de engenharia detalhados ou fluxos de trabalho de rastreamento de bugs, voc\u00ea pode atribuir atributos de metadados diretamente em um cart\u00e3o. Ao associar um ID de n\u00f3 exclusivo (como <code>task1[...]<\/code>) com um bloco de declara\u00e7\u00e3o de configura\u00e7\u00e3o JSON ao final (<code>@{}<\/code>), voc\u00ea pode imprimir vari\u00e1veis estruturadas como respons\u00e1veis pela tarefa, prioridades e bilhetes de rastreamento internos diretamente na face do elemento do cart\u00e3o.<\/p>\n<h3>Vari\u00e1veis de Tarefa Suportadas<\/h3>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Chave do Atributo<\/th>\n<th>Formata\u00e7\u00e3o do Valor<\/th>\n<th>Resultado Visual<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>atribu\u00eddo<\/code><\/td>\n<td>Nome em String entre Aspas<\/td>\n<td>Renderiza a etiqueta do propriet\u00e1rio ou desenvolvedor atribu\u00eddo diretamente dentro da matriz de detalhes do cart\u00e3o.<\/td>\n<\/tr>\n<tr>\n<td><code>prioridade<\/code><\/td>\n<td>String de Escala entre Aspas<\/td>\n<td>Exibe benchmarks de gravidade da tarefa (por exemplo, <code>'Alta'<\/code>, <code>'M\u00e9dio'<\/code>, <code>'Baixo'<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><code>bilhete<\/code><\/td>\n<td>Token inteiro ou alfa<\/td>\n<td>Rastreia n\u00fameros de tarefas de desenvolvimento vinculadas ou c\u00f3digos de projetos do sistema.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Plano Pr\u00e1tico do Mundo Real: Sprint de Lan\u00e7amento de Desenvolvimento \u00c1gil<\/h2>\n<p>Este plano abrangente rastreia um lan\u00e7amento de implanta\u00e7\u00e3o de infraestrutura. Ele define tr\u00eas colunas distintas (Backlog, Em Andamento e Pronto para Implanta\u00e7\u00e3o) e utiliza IDs de tarefas avan\u00e7adas combinadas com par\u00e2metros de metadados estruturais para atribuir desenvolvedores espec\u00edficos e c\u00f3digos de bilhetes em funcionalidades.<\/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>Edite o Mermaid no 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:eNqNkb9Ow0AMh\/dKfQeLpQsDbUECJtI\/QwWVCggxVAxu7ppaTc7Bd4cqEA+DGBADT5EXw2kVFcHCljiO\/X0\/r9Et0LVbgULMGQ6uIxphMBau0FUfWFgXtq83No3i2cNMyKVUInkwDNf9g3bL2+qjemcYYLrOOWu3AAL6dfeoOx8KocCI01hPwl2fQUhmExg7UzK58HDxAhiEFrH6MnwOnVsUXMFl5xBKIRYyaKyWp9WnIe7A635Bbz6ynjKnO+5J7FIU2NfzZ9VbRg5r8iRYEfIeM1s87GHHBSTO7ASbgT0lvrFLqufdqqawo+cG2sKQnY+5NtbmA3TptjpCw\/6PQ5LbDUx\/KyT6t9YWlK9s0MLxUbe39+mpj+5YUhZFCYZclOyUb6d0N4ErylZhwZv\/JjZA2uwCa6xnqqQHLbUfJkWZY3OUhqGvEdQf7PZeAkkM+kDpPoU7H6s33QJTzYKWGFj+8IwfI5UajX36ads\/Oz2B12\/lh+NN\" \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 \"Quadro de Lan\u00e7amento de Recursos Principais do Q3\"\r\nse\u00e7\u00e3o Backlog\r\n  task101[Criar Documenta\u00e7\u00e3o da API Endpoint]@{ atribu\u00eddo: 'Sarah K', prioridade: 'M\u00e9dio' }\r\n  task102[Designar Wireframes da P\u00e1gina de Aterrissagem]\r\nse\u00e7\u00e3o Em Andamento\r\n  task201[Refinar Sincroniza\u00e7\u00e3o de Consultas do Banco de Dados]@{ atribu\u00eddo: 'Alex M', prioridade: 'Alta', bilhete: 4012 }\r\n  task202[Configurar Componentes da UI Lightbox]@{ atribu\u00eddo: 'Sarah K', prioridade: 'Baixo' }\r\nse\u00e7\u00e3o Pronto para Implanta\u00e7\u00e3o\r\n  task301[Implementar Autentica\u00e7\u00e3o de Usu\u00e1rio Multifator]@{ atribu\u00eddo: 'Equipe Dev', bilhete: 3985 }<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkb9Ow0AMh\/dKfQeLpQsDbUECJtI\/QwWVCggxVAxu7ppaTc7Bd4cqEA+DGBADT5EXw2kVFcHCljiO\/X0\/r9Et0LVbgULMGQ6uIxphMBau0FUfWFgXtq83No3i2cNMyKVUInkwDNf9g3bL2+qjemcYYLrOOWu3AAL6dfeoOx8KocCI01hPwl2fQUhmExg7UzK58HDxAhiEFrH6MnwOnVsUXMFl5xBKIRYyaKyWp9WnIe7A635Bbz6ynjKnO+5J7FIU2NfzZ9VbRg5r8iRYEfIeM1s87GHHBSTO7ASbgT0lvrFLqufdqqawo+cG2sKQnY+5NtbmA3TptjpCw\/6PQ5LbDUx\/KyT6t9YWlK9s0MLxUbe39+mpj+5YUhZFCYZclOyUb6d0N4ErylZhwZv\/JjZA2uwCa6xnqqQHLbUfJkWZY3OUhqGvEdQf7PZeAkkM+kDpPoU7H6s33QJTzYKWGFj+8IwfI5UajX36ads\/Oz2B12\/lh+NN\" \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>Edite o Mermaid no 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>Dica de Sintaxe:<\/strong> Embora tarefas simples possam ser digitadas como linhas de texto simples sem aspas, atribui\u00e7\u00f5es complexas que carregam par\u00e2metros de metadados *devem* usar um prefixo de string de mapeamento de ID exclusivo (como <code>id1[...]@{...}<\/code>). Reutilizar exatamente o mesmo ID de tarefa em diferentes partes do quadro sobrescrever\u00e1 propriedades ou causar\u00e1 erros de layout.<\/em><\/p>\n<hr\/>\n<h2>Armadilhas Comuns de Sintaxe e Restri\u00e7\u00f5es do Sistema<\/h2>\n<p>Ao projetar sistemas de layout altamente densos e de m\u00faltiplas etapas, tenha em mente esses par\u00e2metros estruturais de solu\u00e7\u00e3o de problemas:<\/p>\n<ul>\n<li><strong>A Regra da Se\u00e7\u00e3o Antes das Cartas:<\/strong> 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\u00edtulo principal <code>kanban<\/code> sem declarar uma <code>se\u00e7\u00e3o<\/code> cabe\u00e7alho de coluna primeiro interromper\u00e1 a compila\u00e7\u00e3o.<\/li>\n<li><strong>Espa\u00e7amento e Recuo:<\/strong> 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\u00f3tulos ativos <code>se\u00e7\u00e3o<\/code> para evitar quebras de alinhamento.<\/li>\n<li><strong>Formato de Delimitador de Metadados:<\/strong> Ao criar atributos personalizados dentro de um <code>@{ }<\/code> bloco, chaves e valores devem corresponder a argumentos v\u00e1lidos do sistema. Separe m\u00faltiplos atributos por v\u00edrgulas e use aspas limpas para envolver suas atribui\u00e7\u00f5es de string.<\/li>\n<li><strong>Gerenciamento da Densidade de Cart\u00f5es:<\/strong> Embora o componente Kanban seja totalmente responsivo, sobrecarregar uma \u00fanica tabela com mais de 5 colunas ou adicionar dezenas de linhas densas de metadados pode reduzir a legibilidade em dispositivos m\u00f3veis. Equilibre intencionalmente as regras de espa\u00e7amento do layout.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Um quadro Kanban \u00e9 uma ferramenta visual de gest\u00e3o de fluxo de trabalho usada para rastrear tarefas ou itens de trabalho em diferentes est\u00e1gios de processamento (como Backlog, Em Andamento e Conclu\u00eddo). Introduzido como um recurso nativo no Mermaid.js, este&#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-2084","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\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\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\/pt\/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=\"Tempo estimado de leitura\" \/>\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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/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\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-kanban-board-syntax-workflow-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sintaxe do Quadro Kanban do Mermaid.js e Guia de Fluxo de Trabalho\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/wp-content\\\/uploads\\\/sites\\\/10\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/#\\\/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\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","og_locale":"pt_PT","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\/pt\/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":{"Tempo estimado de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/","url":"https:\/\/www.vpascode.com\/pt\/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\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/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\/pt\/docs\/vpascode-docs\/mermaid-js-kanban-board-syntax-workflow-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/pt\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Sintaxe do Quadro Kanban do Mermaid.js e Guia de Fluxo de Trabalho"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/pt\/#website","url":"https:\/\/www.vpascode.com\/pt\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/pt\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/pt\/wp-content\/uploads\/sites\/10\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs\/2084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/media?parent=2084"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}