高级扩展图表（XY 图、四象限图与思维导图）
Mermaid 的最新版本中持续推出了一系列高级扩展图表。这些图表包括用于基础数值可视化的 XY 坐标图（XY Chart）、用于战略优先级决策的四象限图（Quadrant Chart），以及快速梳理结构和头脑风暴的思维导图（Mindmap）。
一、XY 坐标图表：轻量级曲线与柱状
在不依赖重型图表库的情况下，Mermaid 支持在 Markdown 文档中直接编写简单的二维曲线图和柱状图。
xychart-beta
title "服务器 QPS 压力与响应时间走势"
x-axis ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"]
y-axis "QPS (K/s)" 0 --> 15
bar [3.2, 5.8, 12.4, 9.1, 14.2, 8.5]
XY 图表坐标轴与数值定义解析：
在这段代码中，xychart-beta 声明该图表处于 Beta 版本规范。title 给出图表标题。x-axis 通过中括号数组定义了 X 轴的各个分类节点（如时间点）。y-axis 则配置了 Y 轴的单位说明以及坐标范围（从0到15）。最关键的在于，我们使用 bar [数值列表] 定义了对应的柱状高度。除此之外，该图表还全面支持 line [数值列表] 绘制连续的折线图。它能在轻量级的静态技术博客和 PRD 需求文档中，无缝呈现核心指标走势。
二、四象限图：战略分析与优先级判定
四象限图（Quadrant Chart）是进行产品功能优先级评定、战略决策定位的黄金工具：
quadrantChart
title 2026 核心需求优先级分析
x-axis 低开发成本 --> 高开发成本
y-axis 低商业价值 --> 高商业价值
quadrant-1 战略性必做功能
quadrant-2 长远战略规划
quadrant-3 建议暂缓安排
quadrant-4 快捷增益功能
功能 A: [0.3, 0.8]
功能 B: [0.75, 0.4]
四象限图设定与象限标签深度解析：
四象限图由 quadrantChart 声明。通过 x-axis 和 y-axis 定义两个交叉轴线的极端意义，轴线会自动将整个画布划分为四个区域，并依此从右上、左上、左下、右下分别分配 quadrant-1 到 quadrant-4 四个自定义标题。而具体的数据项，如 功能 A: [0.3, 0.8]，其数值坐标在 0 到 1 之间（0.5 为几何中轴点）。该功能会精准地把“功能 A”打在右上角（开发成本较低且商业价值极高）的“黄金象限”，帮助研发团队做出最科学的产品排期决定。
三、思维导图：头脑风暴结构化
思维导图（Mindmap）是快速捕捉思维火花、梳理功能树及知识点体系的最佳工具：
mindmap
root((Carbon Note 内核))
Markdown 渲染
多级标题
GFM 扩展表格
Mermaid 引擎
流程图
时序图
思维导图根节点与层级展开规则：
思维导图使用 mindmap 作为开头。通过缩进来声明知识节点的隶属层级关系。在上方语法中，root((Carbon Note 内核)) 声明了带有双层圆圈样式的根节点。之后的子代分支随着缩进层层铺展。Mermaid 会自动根据分支的多少，分配优雅、和谐的分支曲线和文字防重叠定位。思维导图极其适合写在技术文章的导读、复杂系统架构的组件大纲，让读者能用一秒钟梳理出整篇文章的信息树。
四、常见问题与避坑指南（FAQ）
- 问题：XY 图表的折线
line和柱状bar里面的数组元素个数与x-axis不匹配导致显示异常？- 解决方法：X 轴有多少个分类，您的柱状或折线数组内就必须有完全对应数量的数值。例如
x-axis有6个时间点，数值列表就必须包含6个元素。
- 解决方法：X 轴有多少个分类，您的柱状或折线数组内就必须有完全对应数量的数值。例如
- 问题：四象限图的数据点无法精确打到目标区域，数值定义超标？
- 解决方法：请注意，四象限图的数据点坐标取值范围必须介于
0.0与1.0之间。超过 1.0 的数字会导致象限位置溢出或语法报错。
- 解决方法：请注意，四象限图的数据点坐标取值范围必须介于
Advanced Charts: XY Chart, Quadrant, and Mindmap
Mermaid supports advanced data and decision visualization tools directly in Markdown, including XY Charts, Quadrant strategic matrices, and structured Mindmaps.
1. XY Charts: Lightweight Curves and Bars
Create instant numerical visual bars and trend curves inside your technical documents:
xychart-beta
title "Server QPS and Latency Metric 2026"
x-axis ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"]
y-axis "QPS (K/s)" 0 --> 15
bar [3.2, 5.8, 12.4, 9.1, 14.2, 8.5]
XY Slicing Axis and Parameters:
The layout initialized via xychart-beta processes arrays directly. x-axis maps discrete timeline slots, while y-axis sets coordinate heights. You can overlay bar data streams via bar or line charts via line. This is ideal for light, zero-dependency analytics dashboards.
2. Quadrant Charts: Strategic Prioritization
Quadrant Charts map features or investments based on intersecting metric thresholds:
quadrantChart
title Feature Priority Map 2026
x-axis Low Effort --> High Effort
y-axis Low Value --> High Value
quadrant-1 Quick Wins
quadrant-2 Strategic Plans
quadrant-3 Backlog Ideas
quadrant-4 Low Returns
Feature A: [0.3, 0.8]
Feature B: [0.75, 0.4]
Quadrant Layout Mapping Rules:
Initiated via quadrantChart, the coordinate grid divides the area into four equal boxes. Data entries are formatted as Label: [X, Y], with values bounded strictly between 0.0 and 1.0.
3. Mindmaps: Structural Brainstorming
Mindmaps allow you to outline and categorize knowledge hierarchies:
mindmap
root((Carbon Note Core))
Markdown Parser
Headings
GFM Tables
Mermaid Engine
Flowcharts
Sequence Charts
Mindmap Nodes and Hierarchy Formatting:
Initiated by mindmap, parent-child links are established using spaces and tab indentations. Node shapes can be stylized using unique brackets (e.g. root((Double Circle)) or root[Rectangle]).
4. FAQ
- Why is my XY Chart rendering incorrect numbers or breaking?
- Solution: Ensure your
barorlinearrays have exactly the same length as yourx-axiscategory array.
- Solution: Ensure your
- What happens if a Quadrant Chart data point has a value greater than 1.0?
- Solution: Bounded coordinates must be between
0.0and1.0(e.g.[0.5, 0.5]is the center intersection point).
- Solution: Bounded coordinates must be between