{"id":904,"date":"2026-07-02T09:35:52","date_gmt":"2026-07-02T09:35:52","guid":{"rendered":"https:\/\/www.vpascode.com\/cn\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/"},"modified":"2026-07-29T08:34:42","modified_gmt":"2026-07-29T08:34:42","slug":"mermaid-js-pie-chart-syntax-data-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/","title":{"rendered":"Mermaid.js Pie Chart Syntax &#038; Data Guide"},"content":{"rendered":"<p>Pie charts are circular statistical graphics used to display numerical proportions by dividing data into slices. In Mermaid.js, you can build clean, responsive data breakdowns automatically without messing with complex charting libraries or vector design tools. The rendering engine handles all color assignments and percentage calculations dynamically.<\/p>\n<h2>Basic Syntax Structure<\/h2>\n<p>Every pie chart starts with the <code>pie<\/code> declaration. You can optionally include a title, followed by data entries where category labels are wrapped in quotation marks and paired with positive numerical values.<\/p>\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\/#mermaid:eNoryEzl5SrJLMlJVQhOzC0AUgGZqQrOGYlFJbxcSs6JJanp+UWVCo5KClYKJqbIQk4gIWMDZCFnkJCRKQA7Oxfc\" \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 data-language=\"mermaid\" class=\"language-mermaid\">pie\r\ntitle Sample Pie Chart\r\n\"Category A\" : 45\r\n\"Category B\" : 30\r\n\"Category C\" : 25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNoryEzl5SrJLMlJVQhOzC0AUgGZqQrOGYlFJbxcSs6JJanp+UWVCo5KClYKJqbIQk4gIWMDZCFnkJCRKQA7Oxfc\" \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 id=\"tMloqNP\"><img fetchpriority=\"high\" decoding=\"async\" width=\"595\" height=\"450\" class=\"alignnone size-full wp-image-906 \" src=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png 595w, https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838-300x227.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/p>\n<h2>Syntax Reference<\/h2>\n<p>The table below breaks down the core structural options used to construct a pie chart map in Mermaid.js.<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">\n<thead>\n<tr>\n<th>Component<\/th>\n<th>Description<\/th>\n<th>Syntax Example<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaration<\/strong><\/td>\n<td>Initializes the pie chart rendering engine.<\/td>\n<td><code>pie<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Show Data Flag<\/strong><\/td>\n<td>An optional modifier added immediately after <code>pie<\/code> to display actual numbers alongside calculated percentages.<\/td>\n<td><code>pie showData<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Title<\/strong><\/td>\n<td>An optional heading printed clearly above the center of the diagram layout.<\/td>\n<td><code>title Q3 Revenue Sources<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Data Entry Label<\/strong><\/td>\n<td>The category name, which must always be enclosed in double quotation marks.<\/td>\n<td><code>\"Organic Search\"<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Data Separator<\/strong><\/td>\n<td>A colon character separating your label string from its mathematical value.<\/td>\n<td><code>:<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Data Value<\/strong><\/td>\n<td>A positive number. Supports absolute counts or direct decimal weights up to two decimal spaces.<\/td>\n<td><code>54.25<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Real-World Blueprint: Website Traffic Sources<\/h2>\n<p>This blueprint showcases a classic marketing and analytics dashboard breakdown. It uses the <code>showData<\/code> parameter to explicitly display the raw traffic metrics directly inside the legend while the chart presents the layout proportions.<\/p>\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\/#mermaid:eNo1y0EKwjAQQNG94B2GnqCtrVS3rUsRjBcY4qQZSJMyCXh9M4Lb\/\/g7E2SfPgsWhMIlEMxJCF6CzrGF2WOMFPLx0DxkxViTIRTrG7jCaRzaCgsL2fJfFPqhUzDJMga405tRczeNmp\/kSKSC4UJZ4dJrv23IAWbcduQ1\/uA8tV81oDA3\" \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 data-language=\"mermaid\" class=\"language-mermaid\">pie showData title Core Traffic Channels\r\n\"Organic Search\" : 3540\r\n\"Direct Traffic\" : 2410\r\n\"Social Media\" : 1850\r\n\"Referral Sites\" : 920\r\n\"Email Campaigns\" : 680<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNo1y0EKwjAQQNG94B2GnqCtrVS3rUsRjBcY4qQZSJMyCXh9M4Lb\/\/g7E2SfPgsWhMIlEMxJCF6CzrGF2WOMFPLx0DxkxViTIRTrG7jCaRzaCgsL2fJfFPqhUzDJMga405tRczeNmp\/kSKSC4UJZ4dJrv23IAWbcduQ1\/uA8tV81oDA3\" \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 id=\"zCZZawO\"><img decoding=\"async\" width=\"684\" height=\"450\" class=\"alignnone size-full wp-image-907 \" src=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46314896f59.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46314896f59.png 684w, https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46314896f59-300x197.png 300w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/><\/p>\n<hr \/>\n<p><em><strong>Syntax Tip:<\/strong> By default, Mermaid displays only the relative calculated percentages (e.g., 35%) over each chart section. Adding the <code>showData<\/code> keyword immediately after <code>pie<\/code> changes the labels to show both the percentage on the chart and the exact raw values inside the accompanying legend list.<\/em><\/p>\n<hr \/>\n<h2>Advanced Concept: Directives &amp; Formatting<\/h2>\n<p>For high-density documentation pages, you can apply an inline configuration directive at the top of your code snippet to customize styling behaviors, change text placement offsets, or modify structural line styles.<\/p>\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\/#mermaid:eNpFjsGKwkAMhu+FvkPoYW8t1VUPvbkKnkRhwT2PnWwbnE5KJq0+\/s4UYU+B\/\/vzJWVZ5lnL\/pe6Js8ARsJlAii+9MqBlNg3UFe7FGuPA96MkLk7DO9m3LlMivKtwg\/8Iat9A8Xn+CryrEz+WAAldQiXEcUko3HwNdkOFfbOcbtkeVZche3UKhxxRsfjgF4LaGBTV9tIz0YeqOQ7+ICT8FP7BNfbap3oYQrKA8r\/kbDguqoj3duBPAVNZI6PzCg9Gpsaq00U\/AGp9VED\" \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 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 Operational Budget Allocation\r\n\"Product Development\" : 40.5\r\n\"Marketing &amp; Growth\" : 25.25\r\n\"Customer Operations\" : 20.0\r\n\"Administrative Overhead\" : 14.25<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpFjsGKwkAMhu+FvkPoYW8t1VUPvbkKnkRhwT2PnWwbnE5KJq0+\/s4UYU+B\/\/vzJWVZ5lnL\/pe6Js8ARsJlAii+9MqBlNg3UFe7FGuPA96MkLk7DO9m3LlMivKtwg\/8Iat9A8Xn+CryrEz+WAAldQiXEcUko3HwNdkOFfbOcbtkeVZche3UKhxxRsfjgF4LaGBTV9tIz0YeqOQ7+ICT8FP7BNfbap3oYQrKA8r\/kbDguqoj3duBPAVNZI6PzCg9Gpsaq00U\/AGp9VED\" \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 id=\"cNQyAwW\"><img decoding=\"async\" width=\"700\" height=\"450\" class=\"alignnone size-full wp-image-908 \" src=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a463155bf5dd.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a463155bf5dd.png 700w, https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a463155bf5dd-300x193.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Common Syntax Pitfalls<\/h2>\n<p>While pie charts have one of the simplest syntaxes in Mermaid, a few formatting mistakes will cause layout parsing failures. Avoid these common errors:<\/p>\n<ul>\n<li><strong>Negative Numbers:<\/strong> The rendering engine only accepts positive numeric values. Passing a negative value or zero will break the math processing boundaries.<\/li>\n<li><strong>Quotation Requirements:<\/strong> Data category labels must always use double quotation marks. Single quotes or missing quotes will fail to build properly.<\/li>\n<li><strong>Decimal Precision Limits:<\/strong> While Mermaid handles precise floating-point decimals smoothly, it natively tracks parameters up to two decimal places. Rounding values beforehand maintains strict consistency.<\/li>\n<li><strong>Slice Densities:<\/strong> For clean visual communication, it is best practice to limit your charts to 6\u20138 slices. If your datasets have more elements, group smaller nodes together under an &#8220;Others&#8221; category to keep your design scannable.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Pie charts are circular statistical grap&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":48,"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-904","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\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\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\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:34:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\",\"name\":\"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"datePublished\":\"2026-07-02T09:35:52+00:00\",\"dateModified\":\"2026-07-29T08:34:42+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\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/07\\\/img_6a46313c62838.png\",\"width\":595,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-pie-chart-syntax-data-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mermaid.js Pie Chart Syntax &#038; Data Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/cn\\\/#\\\/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\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/","og_locale":"zh_CN","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\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:34:42+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/","url":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/","name":"Mermaid Pie Chart Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/cn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png","datePublished":"2026-07-02T09:35:52+00:00","dateModified":"2026-07-29T08:34:42+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\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png","contentUrl":"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/07\/img_6a46313c62838.png","width":595,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-pie-chart-syntax-data-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/cn\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/cn\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Playbook","item":"https:\/\/www.vpascode.com\/cn\/docs\/vpascode-docs\/mermaid-js-playbook\/"},{"@type":"ListItem","position":4,"name":"Mermaid.js Pie Chart Syntax &#038; Data Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/cn\/#website","url":"https:\/\/www.vpascode.com\/cn\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/cn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/cn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/cn\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/cn\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.vpascode.com\/cn\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/cn\/wp-content\/uploads\/sites\/3\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/cn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/ld_docs\/904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/ld_docs\/48"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/media?parent=904"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/cn\/wp-json\/wp\/v2\/ld_collection?post=904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}