{"id":2093,"date":"2026-07-02T09:35:52","date_gmt":"2026-07-02T09:35:52","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","title":{"rendered":"Sintaxis de gr\u00e1fico de pastel de Mermaid.js y gu\u00eda de datos"},"content":{"rendered":"<p>Los gr\u00e1ficos de pastel son gr\u00e1ficos estad\u00edsticos circulares utilizados para mostrar proporciones num\u00e9ricas dividiendo los datos en sectores. En Mermaid.js, puedes crear desgloses de datos limpios y responsivos autom\u00e1ticamente sin tener que lidiar con bibliotecas de gr\u00e1ficos complejas ni herramientas de dise\u00f1o vectorial. El motor de renderizado maneja todas las asignaciones de colores y los c\u00e1lculos de porcentajes de forma din\u00e1mica.<\/p>\n<h2>Estructura b\u00e1sica de sintaxis<\/h2>\n<p>Cada gr\u00e1fico de pastel comienza con el <code>pastel<\/code> declaraci\u00f3n. Puedes incluir opcionalmente un t\u00edtulo, seguido de entradas de datos donde las etiquetas de categor\u00eda van entre comillas y se emparejan con 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>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:eNorSCwuSc3h5So5vLakNCdfwb3o8MK0zOR8hZRUhQKwHIiVmpWaW5CTz8ul5JxYkpqeX3R4baKCo5KClYKJKaqgE0jQ2ABV0BkkaGQKAFEvJEg=\" \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\">pastel\r\nt\u00edtulo Gr\u00e1fico de pastel de ejemplo\r\n\"Categor\u00eda A\" : 45\r\n\"Categor\u00eda B\" : 30\r\n\"Categor\u00eda C\" : 25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorSCwuSc3h5So5vLakNCdfwb3o8MK0zOR8hZRUhQKwHIiVmpWaW5CTz8ul5JxYkpqeX3R4baKCo5KClYKJKaqgE0jQ2ABV0BkkaGQKAFEvJEg=\" \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>Editar Mermaid en 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>Referencia de sintaxis<\/h2>\n<p>La tabla a continuaci\u00f3n desglosa las opciones estructurales principales utilizadas para construir un mapa de gr\u00e1fico de pastel en Mermaid.js.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Componente<\/th>\n<th>Descripci\u00f3n<\/th>\n<th>Ejemplo de sintaxis<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaraci\u00f3n<\/strong><\/td>\n<td>Inicializa el motor de renderizado del gr\u00e1fico de pastel.<\/td>\n<td><code>pastel<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Bandera para mostrar datos<\/strong><\/td>\n<td>Un modificador opcional a\u00f1adido inmediatamente despu\u00e9s de <code>pastel<\/code>para mostrar n\u00fameros reales junto con los porcentajes calculados.<\/td>\n<td><code>pastel mostrarDatos<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>T\u00edtulo<\/strong><\/td>\n<td>Un encabezado opcional impreso claramente por encima del centro del dise\u00f1o del diagrama.<\/td>\n<td><code>t\u00edtulo Fuentes de ingresos del Q3<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Etiqueta de entrada de datos<\/strong><\/td>\n<td>El nombre de la categor\u00eda, que siempre debe ir entre comillas dobles.<\/td>\n<td><code>\"B\u00fasqueda org\u00e1nica\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Separador de datos<\/strong><\/td>\n<td>Un car\u00e1cter dos puntos que separa su cadena de etiqueta de su valor matem\u00e1tico.<\/td>\n<td><code>:<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Valor de datos<\/strong><\/td>\n<td>Un n\u00famero positivo. Admite conteos absolutos o pesos decimales directos hasta dos espacios decimales.<\/td>\n<td><code>54.25<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Plantilla del mundo real: fuentes de tr\u00e1fico del sitio web<\/h2>\n<p>Esta plantilla muestra una divisi\u00f3n cl\u00e1sica de paneles de marketing y an\u00e1lisis. Utiliza el par\u00e1metro <code>showData<\/code> para mostrar expl\u00edcitamente las m\u00e9tricas de tr\u00e1fico crudas directamente dentro de la leyenda, mientras que el gr\u00e1fico presenta las proporciones de dise\u00f1o.<\/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>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:eNotjsENwjAMRe9I7GB1ghZaVDhSJgAWsBIXLJU6OKmYpyMgblyzGEnFzdL7es+OCfxdXicMCIHDNAh0OOJAHpzyaNgttyUIGueejaxXxTF+\/XMiiyB6i\/PIBgs4wLapy0Sv\/yFYVjJBMtrUVUZnsknmxXC2ZlC1TQYXDixLRqknpRRelPtNph0+HMY3pp9EwYgqCdCQ5Bo\/qb4kdm35AzWyRiI=\" \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 titulo Canales principales de tr\u00e1fico\r\n\"B\u00fasqueda org\u00e1nica\" : 3540\r\n\"Tr\u00e1fico directo\" : 2410\r\n\"Redes sociales\" : 1850\r\n\"Sitios de referencia\" : 920\r\n\"Campa\u00f1as por correo electr\u00f3nico\" : 680<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotjsENwjAMRe9I7GB1ghZaVDhSJgAWsBIXLJU6OKmYpyMgblyzGEnFzdL7es+OCfxdXicMCIHDNAh0OOJAHpzyaNgttyUIGueejaxXxTF+\/XMiiyB6i\/PIBgs4wLapy0Sv\/yFYVjJBMtrUVUZnsknmxXC2ZlC1TQYXDixLRqknpRRelPtNph0+HMY3pp9EwYgqCdCQ5Bo\/qb4kdm35AzWyRiI=\" \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>Editar Mermaid en 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>Consejo de sintaxis:<\/strong> Por defecto, Mermaid muestra \u00fanicamente los porcentajes calculados relativos (por ejemplo, 35%) sobre cada secci\u00f3n del gr\u00e1fico. Al agregar la palabra clave <code>showData<\/code> inmediatamente despu\u00e9s de <code>pie<\/code> cambia las etiquetas para mostrar tanto el porcentaje en el gr\u00e1fico como los valores exactos en la lista de leyenda adjunta.<\/em><\/p>\n<hr\/>\n<h2>Concepto avanzado: directivas y formato<\/h2>\n<p>Para p\u00e1ginas de documentaci\u00f3n de alta densidad, puede aplicar una directiva de configuraci\u00f3n en l\u00ednea en la parte superior de su fragmento de c\u00f3digo para personalizar los comportamientos de estilo, cambiar los desplazamientos de colocaci\u00f3n de texto o modificar los estilos de l\u00ednea estructurales.<\/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>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:eNotzsFqwzAMgOF7IO8gck\/IsnaH3AaDnUYHg+7s2Voq6ljGkkf7XH2EvtjsbCeD+PTLfd+3jeXwTcvcNgCRcHsBFC\/6zkJKHGYYh6c61hOueDSJzJdH+Zdl55AV04cmPuMnOT3N0D3GS9c2fe0XAEqaPcOz0BKMpfstgEMPMaHkmFGUgSMmo\/TDbdO9oJiU2JcVh0Wxy1ZZOphhNw77It5MOqNSWOAKNqGllTAoVzHth6mSQw3a8n+UWrG+Ctwi0ziMRbyacljAuJUCif6d38DDrjR+ATCfWq4=\" \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 titulo Asignaci\u00f3n del presupuesto operativo\r\n\"Desarrollo de productos\" : 40.5\r\n\"Marketing y crecimiento\" : 25.25\r\n\"Operaciones de clientes\" : 20.0\r\n\"Gastos administrativos\" : 14.25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotzsFqwzAMgOF7IO8gck\/IsnaH3AaDnUYHg+7s2Voq6ljGkkf7XH2EvtjsbCeD+PTLfd+3jeXwTcvcNgCRcHsBFC\/6zkJKHGYYh6c61hOueDSJzJdH+Zdl55AV04cmPuMnOT3N0D3GS9c2fe0XAEqaPcOz0BKMpfstgEMPMaHkmFGUgSMmo\/TDbdO9oJiU2JcVh0Wxy1ZZOphhNw77It5MOqNSWOAKNqGllTAoVzHth6mSQw3a8n+UWrG+Ctwi0ziMRbyacljAuJUCif6d38DDrjR+ATCfWq4=\" \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>Editar Mermaid en 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>Errores comunes de sintaxis<\/h2>\n<p>Aunque los gr\u00e1ficos de pastel tienen una de las sintaxis m\u00e1s simples en Mermaid, algunos errores de formato provocar\u00e1n fallos en el an\u00e1lisis de dise\u00f1o. Evite estos errores comunes:<\/p>\n<ul>\n<li><strong>N\u00fameros negativos:<\/strong> El motor de renderizado solo acepta valores num\u00e9ricos positivos. Pasar un valor negativo o cero romper\u00e1 los l\u00edmites del procesamiento matem\u00e1tico.<\/li>\n<li><strong>Requisitos de comillas:<\/strong> Las etiquetas de categor\u00eda de datos deben usar siempre comillas dobles. Las comillas simples o las comillas faltantes no permitir\u00e1n una compilaci\u00f3n correcta.<\/li>\n<li><strong>L\u00edmites de precisi\u00f3n decimal:<\/strong> Aunque Mermaid maneja con facilidad los decimales de punto flotante con precisi\u00f3n, rastrea de forma nativa los par\u00e1metros hasta dos decimales. Redondear los valores antes de usarlos mantiene una consistencia estricta.<\/li>\n<li><strong>Densidades de porciones:<\/strong> Para una comunicaci\u00f3n visual clara, lo mejor es limitar tus gr\u00e1ficos a 6\u20138 porciones. Si tus conjuntos de datos tienen m\u00e1s elementos, agrupa los nodos m\u00e1s peque\u00f1os bajo una categor\u00eda de \u00abOtros\u00bb para mantener tu dise\u00f1o f\u00e1cil de escanear.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Los gr\u00e1ficos de pastel son gr\u00e1ficos estad\u00edsticos circulares utilizados para mostrar proporciones num\u00e9ricas dividiendo los datos en sectores. En Mermaid.js, puedes crear desgloses de datos limpios y responsivos autom\u00e1ticamente sin tener que lidiar con bibliotecas de gr\u00e1ficos complejas ni herramientas&#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-2093","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\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"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-pie-chart-syntax-data-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/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\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-pie-chart-syntax-data-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 de gr\u00e1fico de pastel de Mermaid.js y gu\u00eda de datos\"}]},{\"@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 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\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/","url":"https:\/\/www.vpascode.com\/es\/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\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/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\/es\/docs\/vpascode-docs\/mermaid-js-pie-chart-syntax-data-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 de gr\u00e1fico de pastel de Mermaid.js y gu\u00eda de datos"}]},{"@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\/2093","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=2093"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}