Mermaid 简介

Mermaid 允许你使用文本和代码创建图表和可视化。

它是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。

教程链接

Mermaid 由三部分组成

• 部署
• 语法
• 配置

Mermaid 的使用方法

• 使用 Mermaid 实时编辑器
• 使用 Mermaid 图表编辑器
• 使用 Mermaid 插件和集成
• 调用 Mermaid JavaScript API
• 添加 Mermaid 作为依赖

复杂图表结构的技巧

管理 Mermaid 图中的复杂性涉及规划和采用最佳实践。

• 模块化设计

将复杂的图表分解为更小、更易于管理的组件。这种方法不仅使图表更易于理解，而且简化了创建和维护过程。

• 一致的风格

使用类在相似元素之间保持一致的样式。这不仅节省了时间，还确保了外观的凝聚力和专业性。

• 注释和文档

在 Mermaid 语法中使用带有 %% 的注释来记录图表各个部分的用途。这种做法对于保持清晰度非常宝贵，尤其是在团队工作或在一段时间后返回图表时。

通过这些故障排除提示和最佳实践，你可以有效管理和解决 Mermaid 框图中的常见问题。

饼图简介

饼图（或圆形图）是一种圆形统计图形，将其划分为多个切片以说明数字比例。

在饼图中，每个切片的弧长（及其中心角和面积）与其表示的数量成正比。

饼图渲染方式有多种变化。

教程链接

饼图语法

在 Mermaid 中绘制饼图非常简单。

• 以 pie 关键字开始绘制图表

  • showData 在图例文本之后渲染实际数据值。这是可选的

• 后面跟着 title 关键字及其字符串值，为饼图提供标题。这是可选的

• 接下来是数据集。饼图切片将按与标签相同的顺序顺时针排序。

  • label 表示饼图中 " " 引号内的部分。
  • 后跟 : 冒号作为分隔符
  • 后面跟着 positive numeric value（支持最多两位小数）

饼图示例

---
config:pie:textPosition: 0.5themeVariables:pieOuterStrokeWidth: "5px"
---
pie showDatatitle Key elements in Product X"Calcium" : 42.96"Potassium" : 50.05"Magnesium" : 10.01"Iron" :  5

雷达图简介

雷达图是一种以圆形格式绘制低维数据的简单方法。

它也被称为雷达图、蜘蛛图、星图、蛛网图、极坐标图或 Kiviat 图。

这种图表类型对于需要以清晰简洁的方式以圆形格式表示数据的开发者、数据科学家和工程师特别有用。

它通常用于以图形方式总结和比较多个实体在多个维度上的表现。

教程链接

雷达图语法

radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...

雷达图语法细节

标题

title：标题是一个可选字段，允许在雷达图顶部渲染标题。

radar-betatitle Title of the Radar Diagram...

轴

axis：axis 关键字用于定义雷达图的轴。

每个轴由一个 ID 和一个可选标签表示。

可以在一条线上定义多个轴。

radar-betaaxis id1["Label1"]axis id2["Label2"], id3["Label3"]...

曲线

curve：curve 关键字用于定义雷达图中曲线的数据点。

每条曲线由一个 ID、一个可选标签和一个值列表表示。

值可以通过数字列表或键值对列表定义。如果使用键值对，则键表示轴 ID，值表示数据点。否则，假定数据点按定义的轴的顺序排列。

可以在一条线上定义多条曲线。

radar-betaaxis axis1, axis2, axis3curve id1["Label1"]{1, 2, 3}curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}curve id4{ axis3: 30, axis1: 20, axis2: 10 }...

选项

• showLegend：showLegend 关键字用于显示或隐藏雷达图中的图例。默认显示图例。
• max：雷达图的最大值。这用于缩放雷达图。如果未提供，则从数据点计算出最大值。
• min：雷达图的最小值。这用于缩放雷达图。如果未提供，则最小值为 0。
• graticule：经纬线关键字用于定义要在雷达图中渲染的经纬线类型。经纬线可以是 circle 或 polygon。如果未提供，则默认格线为 circle。
• ticks：ticks 关键字用于定义经纬线上的刻度数。它是绘制的同心圆或多边形的数量，用于指示雷达图的比例。如果未提供，则默认刻度数为 5。

雷达图示例

---
title: "Grades"
---
radar-betaaxis m["Math"], s["Science"], e["English"]axis h["History"], g["Geography"], a["Art"]curve a["Alice"]{85, 90, 80, 70, 75, 90}curve b["Bob"]{70, 75, 85, 80, 90, 85}max 100min 0

时间线简介

“时间线是一种图表，用于说明事件、日期或时间段的年表。它通常以图形方式渲染以指示时间的流逝，并且通常按时间顺序组织。

基本时间线按时间顺序渲染事件列表，通常使用日期作为标记。

教程链接

时间线语法

创建时间线图的语法很简单。你始终以 timeline 关键字开头，让 mermaid 知道你想要创建时间线图。

之后，可以向时间线添加标题。这是通过添加一行带有关键字 title 后跟标题文本来完成的。

然后添加时间线数据，其中始终以时间段开头，后跟冒号，然后是事件的文本。你可以选择添加第二个冒号，然后添加事件的文本。因此，你可以在每个时间段内拥有一个或多个事件。

默认情况下，如果时间段和事件的文本太长，则会换行。这样做是为了避免文本绘制在图表之外。你还可以使用 <br> 强制换行。

时间线示例

timelinetitle Timeline of Industrial Revolutionsection 17th-20th centuryIndustry 1.0 : Machinery, Water power, Steam <br>powerIndustry 2.0 : Electricity, Internal combustion engine, Mass productionIndustry 3.0 : Electronics, Computers, Automationsection 21st centuryIndustry 4.0 : Internet, Robotics, Internet of ThingsIndustry 5.0 : Artificial intelligence, Big data, 3D printing

树形图简介

树状图将层次结构数据显示为一组嵌套的矩形。树的每个分支都用一个矩形表示，然后用代表子分支的小矩形平铺。
树状图是可视化分层数据和显示类别与子类别之间比例的有效方法。每个矩形的大小与其所代表的值成比例，便于比较层级结构中的不同部分。

树状图尤其适用于：

• 可视化分层数据结构。
• 比较类别之间的比例。
• 在有限空间内显示大量层级数据。
• 识别层级结构数据中的模式和异常值。

教程链接

树形图语法

树状图中的节点使用以下语法定义：

• 部分/父节点：使用引号 “Section Name” 定义
• 带有值的叶节点：使用引号后跟冒号和值 “Leaf Name”: value 定义
• 层级结构：使用缩进（空格或制表符）创建
• 样式：节点可以使用 :::class 语法设置样式

树形图示例

---
config:treemap:showValues: false
---treemap-beta
"Section 1""Leaf 1.1": 12"Section 1.2":::class1"Leaf 1.2.1": 12
"Section 2""Leaf 2.1": 20:::class1"Leaf 2.2": 25"Leaf 2.3": 12classDef class1 fill:red,color:blue,stroke:#FFD600;

数据包图简介

数据包图是用于说明网络数据包的结构和内容的可视化表示。网络数据包是通过网络传输的数据的基本单位。

教程链接

数据包图语法1：

packet
start: "Block name" %% Single-bit block
start-end: "Block name" %% Multi-bit blocks
... More Fields ...

数据包图语法2

packet
+1: "Block name" %% Single-bit block
+8: "Block name" %% 8-bit block
9-15: "Manually set start and end, it's fine to mix and match"
... More Fields ...

数据包图语法细节

• 范围：标题后面的每一行代表数据包中的不同字段。范围（例如 0-15）指示数据包中的位位置。

• 字段说明：该字段所代表内容的简短描述，用引号引起来。

部分mermaid语法支持：

• packet-beta
• packet【部分组件可能不支持】
• mermaid开头与前述文字增加换行，避免部分浏览器无法解析

数据包图示例

---
config:packet:bitWidth: 32
------
title: "TCP Packet"
---packet-beta0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"

象限图简介

象限图是分为四个象限的数据的直观表示。它用于在二维网格上绘制数据点，其中一个变量表示在 x 轴上，另一个变量表示在 y 轴上。

象限是通过根据一组特定于所分析数据的标准将图表分为四个相等部分来确定的。

象限图通常用于识别数据的模式和趋势，并根据图表中数据点的位置确定操作的优先级。它们通常用于商业、营销和风险管理等字段。

教程链接

象限图语法

• x 轴决定 x 轴上显示的文本。在 x 轴上有左右两个部分，你可以同时通过两个部分，也可以仅通过左侧。该语句应以 x-axis 开头，然后是 left axis text，后跟分隔符 -->，然后是 right axis text。

• y 轴确定在 y 轴上显示的文本。在 y 轴上有顶部和底部两部分，你可以通过两者，也可以仅通过底部。该语句应以 y-axis 开头，然后是 bottom axis text，后跟分隔符 -->，然后是 top axis text。

• quadrant-[1,2,3,4] 确定象限内显示哪些文本。

• 点用于在象限图内绘制一个圆。语法为 : [x, y]，此处 x 和 y 值在 0-1.

象限图示例1

---
config:quadrantChart:chartWidth: 400chartHeight: 400themeVariables:quadrant1TextFill: "ff0000"
---
quadrantChartx-axis Urgent --> Not Urgenty-axis Not Important --> "Important ❤"quadrant-1 Planquadrant-2 Doquadrant-3 Delegatequadrant-4 Delete

象限图示例2

quadrantCharttitle Reach and engagement of campaignsx-axis Low Reach --> High Reachy-axis Low Engagement --> High Engagementquadrant-1 We should expandquadrant-2 Need to promotequadrant-3 Re-evaluatequadrant-4 May be improvedCampaign A: [0.9, 0.0] radius: 12Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0Campaign E:::class2: [0.5, 0.4]Campaign F:::class3: [0.4, 0.5] color: #0000ffclassDef class1 color: #109060classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10pxclassDef class3 color: #f00fff, radius : 10

GIT图

Git 图表是各个分支上 git 提交和 git 操作（命令）的图形表示。

此类图表对于开发者和 DevOps 团队分享他们的 Git 分支策略特别有帮助。例如，它可以更轻松地可视化 git flow 的工作原理。

教程链接

XY图简介

在 mermaid-js 的上下文中，XY 图是一个综合图表模块，包含利用 x 轴和 y 轴进行数据表示的各种类型的图表。

目前，它包括两种基本图表类型：柱状图和折线图。

这些图表旨在直观地显示和分析涉及两个数值变量的数据。

值得注意的是，虽然 mermaid-js 当前的实现包含这两种图表类型，但该框架被设计为动态且适应性强的。

因此，它具有将来扩展和包含其他图表类型的能力。

这意味着用户可以在 XY 图模块中期待一套不断发展的图表选项，以满足随着时间的推移引入新图表类型的各种数据可视化需求。

教程链接

XY图语法

• x 轴主要用作分类值，但在需要时也可以用作数值范围值。
• y 轴用于表示数值范围值，它不能有分类值。

XY图使用说明

部分mermaid语法支持：

• xychart-beta
• xychart【部分组件可能不支持】
• mermaid开头与前述文字增加换行，避免部分浏览器无法解析

XY图示例1

xychart-betatitle "Sales Revenue"x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]y-axis "Revenue (in $)" 4000 --> 11000bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

XY图示例2

---
config:xyChart:width: 900height: 600showDataLabel: truethemeVariables:xyChart:titleColor: "#ff0000"
---
xychart-betatitle "Sales Revenue"x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]y-axis "Revenue (in $)" 4000 --> 11000bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

方框图简介

框图是一种直观、有效的方式来直观地表示复杂的系统、流程或架构。它们由块和连接器组成，其中块代表基本组件或功能，连接器显示这些组件之间的关系或流程。这种图表方法在工程、软件开发和流程管理等各个字段都至关重要。

框图的主要目的是提供系统的高级视图，以便轻松理解和分析，而无需深入研究每个组件的复杂细节。这使得它们对于简化复杂系统以及解释系统内组件的整体结构和交互特别有用。

许多人使用 Mermaid 流程图来达到此目的。这样做的副作用是自动布局有时会将形状移动到图表制作者不想要的位置。框图使用不同的方法。在此图中，我们让作者完全控制形状的放置位置。

框图在各个行业和学科中都有广泛的应用。一些关键用例包括：

• 软件架构：在软件开发中，框图可用于说明软件应用的体系结构。这包括显示不同模块或服务如何交互、数据流和高级组件交互。

• 网络图：框图非常适合表示 IT 和电信中的网络架构。它们可以描述不同的网络设备和服务如何互连，包括路由、交换机、防火墙以及网络上的数据流。

• 工艺流程图：在商业和制造中，可以使用框图来创建流程图。这些流程图代表业务或制造流程的各个阶段，有助于可视化步骤顺序、决策点和控制流程。

• 电气系统：工程师使用框图来表示电气系统和电路。它们可以说明电气系统的高级结构、不同电气组件之间的相互作用以及电流的流动。

• 教育目的：框图也广泛用于教育材料中，以简化的方式解释复杂的概念和系统。它们有助于分解和可视化科学理论、工程原理和技术系统。

教程链接

方框图示例1

block-betacolumns 3a:3block:group1:2columns 2h i j kendgblock:group2:3%% columns auto (default)l m n o p q rend

方框图示例2

block-betacolumns 3Start(("Start")) space:2down<[" "]>(down) space:2Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]downAgain<["No"]>(down) space r3<["Done"]>(down)Process2["Process B"] r2<["Done"]>(right) End(("End"))style Start fill:#969;style End fill:#696;