10分钟搞定 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 做数据可视化的核心能力。下面这篇指南带你从零掌握它的饼图与柱状图写法不用打开任何绘图软件。从一个周报场景说起上周我帮团队做季度复盘老大要三张图流量占比、各模块任务完成度、GMV 走势。按老办法我打开 Excel 建了三个工作表调颜色、挪图例、对齐标签前后折腾了大半天最后导出的图片还被要求再缩小一点放进 PPT。后来我换了个思路把数据直接写成文本交给 Mermaid.js 渲染。整个过程不到十分钟更关键的是——图和数据存在同一个文件里下季度改数字只需要动几行文本图表自动跟着变。如果你也在Markdown 写文档 截图贴图的流程里打转这套方式值得试试。先搞懂文本即图表是什么Mermaid.js 是一个基于 JavaScript 的开源图表库思路很直接图表不是被画出来的而是被写出来的。你用类 Markdown 的文本描述数据结构标题、分类、数值它在浏览器里解析并渲染成 SVG 图形。这种文本即图表的范式带来三个实际好处可版本化图表定义是纯文本进 Git 后每次改动都能 diff、回滚、评审可维护数据更新时只改文本不存在图改了、文档没改的脱节可嵌入Markdown 文档、技术博客、代码仓库 README 里都能直接内嵌。先看一张它生成的流程图感受下文字变图的效果本文聚焦两类最常用的数据图表饼图看占比和柱状图看对比。语法细节以官方文档 docs/syntax/pie.md 和 docs/syntax/xyChart.md 为准。饼图语法一行拆解占比类数据的最优解饼图适合回答各部分占整体的比例这类问题比如渠道构成、预算分配、技能分布。完整语法只有四个部件逐行拆解部件作用必填pie图表类型声明一切从这里开始是showData在图例后显示具体数值否title ...图表标题会渲染在顶部否标签 : 数值一条数据切片按书写顺序顺时针排列是两个容易踩的语法细节标签含空格要加引号。前端开发没问题但前端 开发不加引号会解析失败数值必须是正数支持最多两位小数如42.96负数会直接报错。想要更设计感一点可以把它变成环形图只需在 frontmatter 里加一个配置适用边界饼图只适合部分构成整体的场景分类超过 6 个就该换柱状图或表格了——切片太小时人眼已经分不清谁是谁。柱状的三种形态基础、横向、组合Mermaid 的柱状图属于 XY Chart 模块关键字xychartxychart-beta是它的旧名两者都可用。一个最简柱状图长这样四行各管一件事x-axis放分类标签y-axis声明数值轴范围0 -- 30bar [...]给数据。数组里的数必须和分类一一对应。形态一横向柱状图拯救超长标签分类名称很长时比如模块名、部门名竖着排标签会互相打架。这时在关键字后加一个horizontal坐标系自动转置注意此时x-axis变成了数值轴带范围y-axis变成了分类轴带标签数组两者角色互换。形态二柱 线组合一图讲两层故事bar和line可以在同一张图里叠加。给序列起个名字bar 名称 [...]图例会自动生成柱子看绝对量级折线看相对趋势——这种组合特别适合规模 效率双指标汇报。小提醒折线和柱子共用同一根 y 轴如果两个量级差太远比如营收千万级、利润率个位数建议拆成两张图别让其中一条贴地飞行。业务实战三个真实场景的图表重构案例 1流量构成汇报饼图问题老板想看 7 月流量从哪来判断是否过度依赖投放。一句话解读自然搜索占比约 42% 居首但付费投放占了四分之一SEO 投入产出比值得在下季度专项复盘。案例 2迭代任务看板横向柱状图问题五个模块名都很长竖版柱状图标签全糊在一起需要一张能直接贴进评审会的完成度图。一句话解读订单和支付接近收尾权限模块只有 41%是下个 Sprint 的首要风险项。案例 3经营月报柱 线组合问题月报要同时体现 GMV 的绝对增长和增速变化一张 Excel 截图装不下两层信息。一句话解读GMV 半年接近翻倍的量级增长但 6 月增速从 24% 回落到 20%放量后动能有衰减苗头需要盯 7 月是否企稳。样式定制让图表贴合品牌色默认的灰蓝配色放进公司 PPT 会显得外乡人。Mermaid 通过 frontmatter 配置区改主题不用动图表语法本身几个高频参数plotColorPalette逗号分隔的颜色串按声明顺序分配给每个bar/line序列titleColor、legendTextColor文字配色柱顶数值标签config: { xyChart: { showDataLabel: true } }配合showDataLabelOutsideBar: true可以把数字挪到柱外全局主题词可选default/forest/dark/neutral更多变量见 docs/config/theming.md。改主题时最省事的做法是先用一个主题词定基调再只覆盖plotColorPalette换成品牌色避免逐个变量硬调。接入指南网页嵌入与实时预览方式一写进网页。集成只需要两样东西——一个带classmermaid的容器加上加载库并初始化的脚本!doctype html html body pre classmermaid pie title 收入来源 产品销售 : 45 订阅服务 : 30 咨询服务 : 15 /pre script typemodule import mermaid from ./mermaid.esm.min.mjs; mermaid.initialize({ startOnLoad: true, theme: default }); /script /body /html页面加载后脚本会自动扫描所有.mermaid节点并渲染成 SVG一页多个图表、图表随容器缩放都没问题。库的获取方式npm 安装等参考 docs/config/usage.md。方式二不写代码直接预览。项目自带的演示页是最快的上手入口本地跑起来后打开 demos/pie.html 和 demos/xychart.html左边改文本、右边秒出图线上也有官方的 Live Editor 可用语法和这里完全一致入口说明见 docs/config/usage.md。避坑清单与下一步最后四条实战中真踩过的坑饼图数值全为正数且最多两位小数负数不是显示为 0是直接渲染报错带空格的文本一律加引号x-axis [Q1, 全年 预算]这种半引用场景尤其容易漏y 轴范围别玩心眼。y-axis 80 -- 100会让 85 和 95 的差距看起来巨大汇报图表请从 0 起步或明确标注截断一张图只讲一个故事。占比用饼图、对比用柱状图、量级 趋势才考虑柱线组合别为了炫技硬叠。下一步学什么掌握占比和对比这两块数据图表的 80% 场景就覆盖了。之后可以顺藤摸瓜甘特图排项目时间线docs/syntax/gantt.md流程图梳理业务路径docs/syntax/flowchart.md序列图描述系统交互docs/syntax/sequenceDiagram.md思维导图整理知识结构docs/syntax/mindmap.md现在就可以动手把你文档里最旧的那张截图式图表用一段 Mermaid 文本替换掉。数据一旦进了文本它就不再是一张图而是一段可以演进的资产。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 10分钟搞定 Mermaid.js 饼图与柱状图：文本数据可视化的完整实战指南
10分钟搞定 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 做数据可视化的核心能力。下面这篇指南带你从零掌握它的饼图与柱状图写法不用打开任何绘图软件。从一个周报场景说起上周我帮团队做季度复盘老大要三张图流量占比、各模块任务完成度、GMV 走势。按老办法我打开 Excel 建了三个工作表调颜色、挪图例、对齐标签前后折腾了大半天最后导出的图片还被要求再缩小一点放进 PPT。后来我换了个思路把数据直接写成文本交给 Mermaid.js 渲染。整个过程不到十分钟更关键的是——图和数据存在同一个文件里下季度改数字只需要动几行文本图表自动跟着变。如果你也在Markdown 写文档 截图贴图的流程里打转这套方式值得试试。先搞懂文本即图表是什么Mermaid.js 是一个基于 JavaScript 的开源图表库思路很直接图表不是被画出来的而是被写出来的。你用类 Markdown 的文本描述数据结构标题、分类、数值它在浏览器里解析并渲染成 SVG 图形。这种文本即图表的范式带来三个实际好处可版本化图表定义是纯文本进 Git 后每次改动都能 diff、回滚、评审可维护数据更新时只改文本不存在图改了、文档没改的脱节可嵌入Markdown 文档、技术博客、代码仓库 README 里都能直接内嵌。先看一张它生成的流程图感受下文字变图的效果本文聚焦两类最常用的数据图表饼图看占比和柱状图看对比。语法细节以官方文档 docs/syntax/pie.md 和 docs/syntax/xyChart.md 为准。饼图语法一行拆解占比类数据的最优解饼图适合回答各部分占整体的比例这类问题比如渠道构成、预算分配、技能分布。完整语法只有四个部件逐行拆解部件作用必填pie图表类型声明一切从这里开始是showData在图例后显示具体数值否title ...图表标题会渲染在顶部否标签 : 数值一条数据切片按书写顺序顺时针排列是两个容易踩的语法细节标签含空格要加引号。前端开发没问题但前端 开发不加引号会解析失败数值必须是正数支持最多两位小数如42.96负数会直接报错。想要更设计感一点可以把它变成环形图只需在 frontmatter 里加一个配置适用边界饼图只适合部分构成整体的场景分类超过 6 个就该换柱状图或表格了——切片太小时人眼已经分不清谁是谁。柱状的三种形态基础、横向、组合Mermaid 的柱状图属于 XY Chart 模块关键字xychartxychart-beta是它的旧名两者都可用。一个最简柱状图长这样四行各管一件事x-axis放分类标签y-axis声明数值轴范围0 -- 30bar [...]给数据。数组里的数必须和分类一一对应。形态一横向柱状图拯救超长标签分类名称很长时比如模块名、部门名竖着排标签会互相打架。这时在关键字后加一个horizontal坐标系自动转置注意此时x-axis变成了数值轴带范围y-axis变成了分类轴带标签数组两者角色互换。形态二柱 线组合一图讲两层故事bar和line可以在同一张图里叠加。给序列起个名字bar 名称 [...]图例会自动生成柱子看绝对量级折线看相对趋势——这种组合特别适合规模 效率双指标汇报。小提醒折线和柱子共用同一根 y 轴如果两个量级差太远比如营收千万级、利润率个位数建议拆成两张图别让其中一条贴地飞行。业务实战三个真实场景的图表重构案例 1流量构成汇报饼图问题老板想看 7 月流量从哪来判断是否过度依赖投放。一句话解读自然搜索占比约 42% 居首但付费投放占了四分之一SEO 投入产出比值得在下季度专项复盘。案例 2迭代任务看板横向柱状图问题五个模块名都很长竖版柱状图标签全糊在一起需要一张能直接贴进评审会的完成度图。一句话解读订单和支付接近收尾权限模块只有 41%是下个 Sprint 的首要风险项。案例 3经营月报柱 线组合问题月报要同时体现 GMV 的绝对增长和增速变化一张 Excel 截图装不下两层信息。一句话解读GMV 半年接近翻倍的量级增长但 6 月增速从 24% 回落到 20%放量后动能有衰减苗头需要盯 7 月是否企稳。样式定制让图表贴合品牌色默认的灰蓝配色放进公司 PPT 会显得外乡人。Mermaid 通过 frontmatter 配置区改主题不用动图表语法本身几个高频参数plotColorPalette逗号分隔的颜色串按声明顺序分配给每个bar/line序列titleColor、legendTextColor文字配色柱顶数值标签config: { xyChart: { showDataLabel: true } }配合showDataLabelOutsideBar: true可以把数字挪到柱外全局主题词可选default/forest/dark/neutral更多变量见 docs/config/theming.md。改主题时最省事的做法是先用一个主题词定基调再只覆盖plotColorPalette换成品牌色避免逐个变量硬调。接入指南网页嵌入与实时预览方式一写进网页。集成只需要两样东西——一个带classmermaid的容器加上加载库并初始化的脚本!doctype html html body pre classmermaid pie title 收入来源 产品销售 : 45 订阅服务 : 30 咨询服务 : 15 /pre script typemodule import mermaid from ./mermaid.esm.min.mjs; mermaid.initialize({ startOnLoad: true, theme: default }); /script /body /html页面加载后脚本会自动扫描所有.mermaid节点并渲染成 SVG一页多个图表、图表随容器缩放都没问题。库的获取方式npm 安装等参考 docs/config/usage.md。方式二不写代码直接预览。项目自带的演示页是最快的上手入口本地跑起来后打开 demos/pie.html 和 demos/xychart.html左边改文本、右边秒出图线上也有官方的 Live Editor 可用语法和这里完全一致入口说明见 docs/config/usage.md。避坑清单与下一步最后四条实战中真踩过的坑饼图数值全为正数且最多两位小数负数不是显示为 0是直接渲染报错带空格的文本一律加引号x-axis [Q1, 全年 预算]这种半引用场景尤其容易漏y 轴范围别玩心眼。y-axis 80 -- 100会让 85 和 95 的差距看起来巨大汇报图表请从 0 起步或明确标注截断一张图只讲一个故事。占比用饼图、对比用柱状图、量级 趋势才考虑柱线组合别为了炫技硬叠。下一步学什么掌握占比和对比这两块数据图表的 80% 场景就覆盖了。之后可以顺藤摸瓜甘特图排项目时间线docs/syntax/gantt.md流程图梳理业务路径docs/syntax/flowchart.md序列图描述系统交互docs/syntax/sequenceDiagram.md思维导图整理知识结构docs/syntax/mindmap.md现在就可以动手把你文档里最旧的那张截图式图表用一段 Mermaid 文本替换掉。数据一旦进了文本它就不再是一张图而是一段可以演进的资产。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考