{"id":2089,"date":"2026-07-02T09:35:52","date_gmt":"2026-07-02T09:35:52","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-pie-chart-syntax-data-guide\/"},"modified":"2026-07-02T09:35:52","modified_gmt":"2026-07-02T09:35:52","slug":"mermaid-js-pie-chart-syntax-data-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","title":{"rendered":"Guia de Sintaxe e Dados do Gr\u00e1fico de Pizza do Mermaid.js"},"content":{"rendered":"<p>Os gr\u00e1ficos de pizza s\u00e3o gr\u00e1ficos estat\u00edsticos circulares usados para exibir propor\u00e7\u00f5es num\u00e9ricas dividindo os dados em fatias. No Mermaid.js, voc\u00ea pode criar quebras de dados limpas e responsivas automaticamente, sem precisar lidar com bibliotecas de gr\u00e1ficos complexas ou ferramentas de design vetorial. O motor de renderiza\u00e7\u00e3o trata todas as atribui\u00e7\u00f5es de cores e c\u00e1lculos de porcentagem dinamicamente.<\/p>\n<h2>Estrutura B\u00e1sica de Sintaxe<\/h2>\n<p>Todo gr\u00e1fico de pizza come\u00e7a com o <code>pie<\/code> declara\u00e7\u00e3o. Voc\u00ea pode incluir opcionalmente um t\u00edtulo, seguido por entradas de dados onde os r\u00f3tulos das categorias s\u00e3o envolvidos por aspas e associados a valores num\u00e9ricos positivos.<\/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:eNoryEzl5SrJLMlJVQhOzC0AUgGZqQrOGYlFJbxcSs6JJanp+UWVCo5KClYKJqbIQk4gIWMDZCFnkJCRKQA7Oxfc\" 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:eNoryEzl5SrJLCnNyVdwLzq8MC0zOV8hJVUhILOqKlHBMTe\/uKQokZdLyTmxJDU9vygTKKakYKVgYooi5gQSMzZAEXMGiRmZAgAjkB1o\" \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\">pie\r\ntitulo Gr\u00e1fico de Pizza Amostra\r\n\"Categoria A\" : 45\r\n\"Categoria B\" : 30\r\n\"Categoria C\" : 25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoryEzl5SrJLCnNyVdwLzq8MC0zOV8hJVUhILOqKlHBMTe\/uKQokZdLyTmxJDU9vygTKKakYKVgYooi5gQSMzZAEXMGiRmZAgAjkB1o\" \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:eNoryEzl5SrJLMlJVQhOzC0AUgGZqQrOGYlFJbxcSs6JJanp+UWVCo5KClYKJqbIQk4gIWMDZCFnkJCRKQA7Oxfc\" 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=\"tMloqNP\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-906\" decoding=\"async\" fetchpriority=\"high\" height=\"450\" sizes=\"(max-width: 595px) 100vw, 595px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png 595w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838-300x227.png 300w\" width=\"595\"\/><\/p>\n<h2>Refer\u00eancia de Sintaxe<\/h2>\n<p>A tabela abaixo detalha as op\u00e7\u00f5es estruturais principais usadas para construir um mapa de gr\u00e1fico de pizza no Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente<\/th>\n<th>Descri\u00e7\u00e3o<\/th>\n<th>Exemplo de Sintaxe<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declara\u00e7\u00e3o<\/strong><\/td>\n<td>Inicializa o motor de renderiza\u00e7\u00e3o do gr\u00e1fico de pizza.<\/td>\n<td><code>pie<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Sinalizador de Exibi\u00e7\u00e3o de Dados<\/strong><\/td>\n<td>Um modificador opcional adicionado imediatamente ap\u00f3s <code>pie<\/code>para exibir n\u00fameros reais juntamente com as porcentagens calculadas.<\/td>\n<td><code>pie showData<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>T\u00edtulo<\/strong><\/td>\n<td>Um t\u00edtulo opcional impresso claramente acima do centro do layout do diagrama.<\/td>\n<td><code>titulo Fontes de Receita do Q3<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>R\u00f3tulo da Entrada de Dados<\/strong><\/td>\n<td>O nome da categoria, que deve sempre estar entre aspas duplas.<\/td>\n<td><code>\"Pesquisa Org\u00e2nica\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Separador de Dados<\/strong><\/td>\n<td>Um caractere dois-pontos que separa sua string de r\u00f3tulo do seu valor matem\u00e1tico.<\/td>\n<td><code>:<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Valor de Dados<\/strong><\/td>\n<td>Um n\u00famero positivo. Suporta contagens absolutas ou pesos decimais diretos com at\u00e9 duas casas decimais.<\/td>\n<td><code>54.25<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Modelo do Mundo Real: Fontes de Tr\u00e1fego do Site<\/h2>\n<p>Este modelo demonstra uma an\u00e1lise cl\u00e1ssica de painel de marketing e an\u00e1lise. Ele usa o par\u00e2metro <code>showData<\/code> para exibir explicitamente as m\u00e9tricas brutas de tr\u00e1fego diretamente na legenda, enquanto o gr\u00e1fico apresenta as propor\u00e7\u00f5es de layout.<\/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:eNo1y0EKwjAQQNG94B2GnqCtrVS3rUsRjBcY4qQZSJMyCXh9M4Lb\/\/g7E2SfPgsWhMIlEMxJCF6CzrGF2WOMFPLx0DxkxViTIRTrG7jCaRzaCgsL2fJfFPqhUzDJMga405tRczeNmp\/kSKSC4UJZ4dJrv23IAWbcduQ1\/uA8tV81oDA3\" 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:eNo1zUEKwjAQBdC94B2G7oW2tlJd2roUxXqBIZ22A20Skojn0aXgKXIxk4K7gTf\/f80EdlTPBh2CYzcR1CiRLVwNS8E6nh3B3fhXT4Nar5LjwwqEixn8W7LABA6wLYs0yP8JGjbkVJS8yKKc\/bdjtNAqwaExSlaVUVp2tCzcqCfjP2FzqdznUWucNcoxJLUycNrMyFPUXZX+ABRQPCQ=\" \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\">pie showData title Canais Principais de Tr\u00e1fego\r\n\"Busca Org\u00e2nica\" : 3540\r\n\"Tr\u00e1fego Direto\" : 2410\r\n\"M\u00eddias Sociais\" : 1850\r\n\"Sites de Refer\u00eancia\" : 920\r\n\"Campanhas por E-mail\" : 680<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo1zUEKwjAQBdC94B2G7oW2tlJd2roUxXqBIZ22A20Skojn0aXgKXIxk4K7gTf\/f80EdlTPBh2CYzcR1CiRLVwNS8E6nh3B3fhXT4Nar5LjwwqEixn8W7LABA6wLYs0yP8JGjbkVJS8yKKc\/bdjtNAqwaExSlaVUVp2tCzcqCfjP2FzqdznUWucNcoxJLUycNrMyFPUXZX+ABRQPCQ=\" \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:eNo1y0EKwjAQQNG94B2GnqCtrVS3rUsRjBcY4qQZSJMyCXh9M4Lb\/\/g7E2SfPgsWhMIlEMxJCF6CzrGF2WOMFPLx0DxkxViTIRTrG7jCaRzaCgsL2fJfFPqhUzDJMga405tRczeNmp\/kSKSC4UJZ4dJrv23IAWbcduQ1\/uA8tV81oDA3\" 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=\"zCZZawO\"><img alt=\"\" class=\"alignnone size-full wp-image-907\" decoding=\"async\" height=\"450\" sizes=\"(max-width: 684px) 100vw, 684px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46314896f59.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46314896f59.png 684w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46314896f59-300x197.png 300w\" width=\"684\"\/><\/p>\n<hr\/>\n<p><em><strong>Dica de Sintaxe:<\/strong> Por padr\u00e3o, o Mermaid exibe apenas os percentuais calculados relativos (por exemplo, 35%) sobre cada se\u00e7\u00e3o do gr\u00e1fico. Adicionar a palavra-chave <code>showData<\/code> imediatamente ap\u00f3s <code>pie<\/code> altera as etiquetas para exibir tanto o percentual no gr\u00e1fico quanto os valores brutos exatos na lista de legenda associada.<\/em><\/p>\n<hr\/>\n<h2>Conceito Avan\u00e7ado: Diretivas e Formata\u00e7\u00e3o<\/h2>\n<p>Para p\u00e1ginas de documenta\u00e7\u00e3o de alta densidade, voc\u00ea pode aplicar uma diretiva de configura\u00e7\u00e3o embutida no topo de seu trecho de c\u00f3digo para personalizar comportamentos de estilo, alterar deslocamentos de posicionamento de texto ou modificar estilos de linhas estruturais.<\/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:eNpFjsGKwkAMhu+FvkPoYW8t1VUPvbkKnkRhwT2PnWwbnE5KJq0+\/s4UYU+B\/\/vzJWVZ5lnL\/pe6Js8ARsJlAii+9MqBlNg3UFe7FGuPA96MkLk7DO9m3LlMivKtwg\/8Iat9A8Xn+CryrEz+WAAldQiXEcUko3HwNdkOFfbOcbtkeVZche3UKhxxRsfjgF4LaGBTV9tIz0YeqOQ7+ICT8FP7BNfbap3oYQrKA8r\/kbDguqoj3duBPAVNZI6PzCg9Gpsaq00U\/AGp9VED\" 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:eNotzcFqg0AQxvG74Dt8eFdsmvTgLdhrMVBoz1udJkPWHdkdJa9TesgT9Al8se7angaG3\/ynLMs868V98rnJM2Bi2iagdNOTBFYW16CuntJaLzTSm\/FsPiyFfxlvulnJv6qXK73zoJcGxeN0K\/KsTP0IoKyWcLTSm\/W+fgs6v97NSE7Xr5hDN5E3ffxlbJ4VzxTILWIXTkIwEE5ehlmlQIN9XR0iejH+SsruDELrKfR\/OIndodolslXjvx8K6GVEazkSCpupqzqSdg4qAcdhZMdBvVFeZAMP+xj5BXU1XiU=\" \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\">---\r\nconfig:\r\n  pie:\r\n    textPosition: 0.6\r\n  themeVariables:\r\n    pieOuterStrokeWidth: \"3px\"\r\n---\r\npie title Aloca\u00e7\u00e3o Or\u00e7ament\u00e1ria Operacional\r\n\"Desenvolvimento de Produto\" : 40.5\r\n\"Marketing e Crescimento\" : 25.25\r\n\"Opera\u00e7\u00f5es com Clientes\" : 20.0\r\n\"Custos Administrativos\" : 14.25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotzcFqg0AQxvG74Dt8eFdsmvTgLdhrMVBoz1udJkPWHdkdJa9TesgT9Al8se7angaG3\/ynLMs868V98rnJM2Bi2iagdNOTBFYW16CuntJaLzTSm\/FsPiyFfxlvulnJv6qXK73zoJcGxeN0K\/KsTP0IoKyWcLTSm\/W+fgs6v97NSE7Xr5hDN5E3ffxlbJ4VzxTILWIXTkIwEE5ehlmlQIN9XR0iejH+SsruDELrKfR\/OIndodolslXjvx8K6GVEazkSCpupqzqSdg4qAcdhZMdBvVFeZAMP+xj5BXU1XiU=\" \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:eNpFjsGKwkAMhu+FvkPoYW8t1VUPvbkKnkRhwT2PnWwbnE5KJq0+\/s4UYU+B\/\/vzJWVZ5lnL\/pe6Js8ARsJlAii+9MqBlNg3UFe7FGuPA96MkLk7DO9m3LlMivKtwg\/8Iat9A8Xn+CryrEz+WAAldQiXEcUko3HwNdkOFfbOcbtkeVZche3UKhxxRsfjgF4LaGBTV9tIz0YeqOQ7+ICT8FP7BNfbap3oYQrKA8r\/kbDguqoj3duBPAVNZI6PzCg9Gpsaq00U\/AGp9VED\" 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=\"cNQyAwW\"><img alt=\"\" class=\"alignnone size-full wp-image-908\" decoding=\"async\" height=\"450\" sizes=\"(max-width: 700px) 100vw, 700px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a463155bf5dd.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a463155bf5dd.png 700w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a463155bf5dd-300x193.png 300w\" width=\"700\"\/><\/p>\n<h2>Armadilhas Comuns de Sintaxe<\/h2>\n<p>Embora os gr\u00e1ficos de pizza tenham uma das sintaxes mais simples no Mermaid, alguns erros de formata\u00e7\u00e3o causar\u00e3o falhas na an\u00e1lise de layout. Evite esses erros comuns:<\/p>\n<ul>\n<li><strong>N\u00fameros Negativos:<\/strong> O motor de renderiza\u00e7\u00e3o aceita apenas valores num\u00e9ricos positivos. Passar um valor negativo ou zero quebrar\u00e1 os limites de processamento matem\u00e1tico.<\/li>\n<li><strong>Requisitos de Aspas:<\/strong> As etiquetas de categoria de dados devem sempre usar aspas duplas. Aspas simples ou aspas ausentes far\u00e3o com que a constru\u00e7\u00e3o falhe.<\/li>\n<li><strong>Limites de Precis\u00e3o Decimal:<\/strong> Embora o Mermaid manipule decimais de ponto flutuante com precis\u00e3o de forma suave, ele rastreia nativamente par\u00e2metros at\u00e9 duas casas decimais. Arredondar os valores antes mant\u00e9m uma consist\u00eancia estrita.<\/li>\n<li><strong>Densidades de Fatias:<\/strong> Para uma comunica\u00e7\u00e3o visual clara, \u00e9 melhor pr\u00e1tica limitar seus gr\u00e1ficos a 6 a 8 fatias. Se seus conjuntos de dados tiverem mais elementos, agrupe os n\u00f3s menores juntos sob uma categoria &#8216;Outros&#8217; para manter seu design facilmente leg\u00edvel.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Os gr\u00e1ficos de pizza s\u00e3o gr\u00e1ficos estat\u00edsticos circulares usados para exibir propor\u00e7\u00f5es num\u00e9ricas dividindo os dados em fatias. No Mermaid.js, voc\u00ea pode criar quebras de dados limpas e responsivas automaticamente, sem precisar lidar com bibliotecas de gr\u00e1ficos complexas ou ferramentas&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":12,"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-2089","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 Pie Chart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a 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-pie-chart-syntax-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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_6a46313c62838.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-pie-chart-syntax-data-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"name\":\"Mermaid Pie Chart 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-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"datePublished\":\"2026-07-02T09:35:52+00:00\",\"description\":\"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a46313c62838.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/pt\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-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\":\"Guia de Sintaxe e Dados do Gr\u00e1fico de Pizza do Mermaid.js\"}]},{\"@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 Pie Chart Syntax | VPasCode Text to Diagram Guide","description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a 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-pie-chart-syntax-data-guide\/","og_locale":"pt_PT","og_type":"article","og_title":"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide","og_description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.","og_url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.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-pie-chart-syntax-data-guide\/","url":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","name":"Mermaid Pie Chart 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-pie-chart-syntax-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","datePublished":"2026-07-02T09:35:52+00:00","description":"Render quick percentage distribution breakdown charts using Mermaid pie syntax in VPasCode, a text to diagram tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a46313c62838.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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":"Guia de Sintaxe e Dados do Gr\u00e1fico de Pizza do Mermaid.js"}]},{"@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\/2089","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=2089"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/pt\/wp-json\/wp\/v2\/ld_collection?post=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}