4 行文本出饼图，6 行出柱状图：Mermaid.js 轻量级数据可视化实战

4 行文本出饼图，6 行出柱状图：Mermaid.js 轻量级数据可视化实战

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

Mermaid.js 是"文本即图表"的轻量级图表库：写几行文字，就渲染出图表。本文用饼图和柱状图做例子，教你把占比与趋势直接画进 Markdown 或 HTML 页面，读完就能把代码粘进自己的文档。

项目一图流：文本进，图表出

• 轻量：一行 CDN 引入，不用搭构建工具。
• 文本即图表：图表就是纯文本，能进版本库、能 diff，改一个数字图就变。
• 易嵌入：Markdown、HTML、文档平台通吃，贴在博客和文档里不突兀。

🥧 饼图：4 行文本画出一张占比图

汇报里要展示预算怎么分、渠道各占几成时，饼图最直观。Mermaid 里能跑通的最小饼图只有几行：

pie开头，后面每行"标签" : 数值，就是一个扇区。官方饼图语法在 docs/syntax/pie.md。

可选开关速查

开关	作用	说明
showData	图例后显示数值	加在第一行即可
title	图表标题	可选
textPosition	标签位置	0=圆心 → 1=边缘，默认 0.75
donutHole	挖成环形图	0~0.9，0 为实心饼
legendPosition	图例位置	top / bottom / left / right / center
highlightSlice	高亮某个扇区	也可悬停触发

textPosition这些属于配置项，写在代码顶部的 config 块里。比如把标签往内挪、再给外圈加个描边：

效果上，textPosition: 0.5把标签从靠近边缘拉到扇区中间，小扇区不再被切字；颜色、描边这类细节归themeVariables管，更多变量可查 docs/config/theming.md。

来个实战：月报里要贴项目预算占比——

想自己拨着玩，交互页面在 demos/pie.html。

📈 柱状图：xychart-beta 坐标轴玩法

饼图讲不了趋势，柱状图（xychart 模块）就该出场了：周报里贴月度销售、复盘时两年数据并排比，都是它的活。最小可运行版本：

坐标轴规则很直白：x-axis给类别数组（或数值区间），y-axis写最小值 --> 最大值，数据在bar数组里照抄。官方语法见 docs/syntax/xyChart.md。

想同图对比两组数据，加一行line就是组合图；给系列起名字，图例自动出现：

类别名太长、竖条挤不下时，在第一行后加一个horizontal，整图就横过来。多系列对比的实战场景——复盘时把两年季度并排：

交互演示同样在 demos/xychart.html 能试。

⚖️ 饼图 vs 柱状图：一张表选对图表

拿不准用哪个时，先看这张表：

判断维度	饼图	柱状图
核心目的	看"占整体多少"	比"具体数值大小"
类别数量	6 个以内舒服	几十个也无妨
精确比较	难（角度靠眼估）	直观
时间趋势	不合适	合适
负值	不允许（只能为正）	支持
多个数据系列	只能一组	多系列

再带上三条让图表可读性过关的习惯：

1. 简洁：一张图只讲一个重点，别颜色和装饰叠着上。
2. 标注齐全：标题、轴标签、系列名写清楚，读者不翻正文也能读懂。
3. 比例诚实：y 轴尽量从 0 起，截断就注明；饼图占比加起来应是 100%。

🚀 5 分钟接入：一行脚本 + 一个 pre

落到 HTML 页面只有三步：引脚本、初始化、把代码写进<pre class="mermaid">：

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <script> mermaid.initialize({ startOnLoad: true, theme: "default" }); </script> <pre class="mermaid"> pie showData title 预算分配 "人力" : 45 "硬件" : 25 "其他" : 30 </pre>

在原生支持 mermaid 的平台（GitHub README、Notion、Typora 等）则连脚本都不用引，把同样的代码放进 mermaid 围栏里直接渲染。

现在就把 demos/pie.html 打开改着玩一遍，然后把开头那 4 行饼图代码粘进你的下一篇文档——图表本可以这么便宜。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid