Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。
本章，我们将主要介绍「饼图」。
饼图（Pie chart）是将一个圆形，分成面积相同或不同的若干区域，用来表示不同内容占比的图形。
2. 语法详解饼图的定义包含「标题」、「内容名称」和「内容权重」三项，其中「内容权重」会在渲染时，自动转换为百分比并显示在饼图上。
实例 1：
#mermaid-svg-cHAzsEzSzF0H1S8l {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cHAzsEzSzF0H1S8l .error-icon{fill:#552222;}#mermaid-svg-cHAzsEzSzF0H1S8l .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-cHAzsEzSzF0H1S8l .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-cHAzsEzSzF0H1S8l .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-cHAzsEzSzF0H1S8l .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-cHAzsEzSzF0H1S8l .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-cHAzsEzSzF0H1S8l .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-cHAzsEzSzF0H1S8l .marker{fill:#333333;stroke:#333333;}#mermaid-svg-cHAzsEzSzF0H1S8l .marker.cross{stroke:#333333;}#mermaid-svg-cHAzsEzSzF0H1S8l svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-cHAzsEzSzF0H1S8l .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-cHAzsEzSzF0H1S8l .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-cHAzsEzSzF0H1S8l .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-cHAzsEzSzF0H1S8l .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-cHAzsEzSzF0H1S8l :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
79%
17%
3%
宠物的选择
狗
猫
兔子
3. 使用场景及实例
饼图的作用是展示每份样本占据总数的百分比。
实例 2：
#mermaid-svg-sbkRQuJfFdh8tdOp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-sbkRQuJfFdh8tdOp .error-icon{fill:#552222;}#mermaid-svg-sbkRQuJfFdh8tdOp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sbkRQuJfFdh8tdOp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-sbkRQuJfFdh8tdOp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sbkRQuJfFdh8tdOp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sbkRQuJfFdh8tdOp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sbkRQuJfFdh8tdOp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sbkRQuJfFdh8tdOp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sbkRQuJfFdh8tdOp .marker.cross{stroke:#333333;}#mermaid-svg-sbkRQuJfFdh8tdOp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sbkRQuJfFdh8tdOp .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-sbkRQuJfFdh8tdOp .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-sbkRQuJfFdh8tdOp .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-sbkRQuJfFdh8tdOp .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-sbkRQuJfFdh8tdOp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
30%
40%
30%
城市生存训练能力占比
独立自理
情商
人际交往
4. 小结
- Mermaid 为 Markdown 扩展了使用普通文本生成饼图的语法及渲染支持；
- Mermaid 可以用文本描述饼图中的「标题」、「内容名称」、「内容权重」三个部分。
- Mermaid 的饼图渲染后内容项颜色对应于内容项在声明时的次序。
