图表

概述

Quarto 原生支持嵌入 Mermaid 和 Graphviz 图表。这使您能够使用受 Markdown 启发的纯文本语法创建流程图、序列图、状态图、甘特图等。

例如，这里我们嵌入了一个使用 Mermaid 创建的流程图：

```{mermaid}
flowchart LR
  A[硬边] --> B(圆边)
  B --> C{决策}
  C --> D[结果一]
  C --> E[结果二]
```

flowchart LR
  A[硬边] --> B(圆边)
  B --> C{决策}
  C --> D[结果一]
  C --> E[结果二]

如上所示，Mermaid 图表使用 {mermaid} 可执行单元格嵌入。Graphviz 图表使用 {dot} 可执行单元格嵌入。请注意，单元格选项的添加语法略有不同：%%| 用于 {mermaid}，//| 用于 {dot}。

Note

对于 pdf 或 docx 等打印输出格式，图表渲染利用 Chrome 或 Edge 网页浏览器来创建高质量的 PNG 图像。Quarto 可以自动使用系统上现有的 Chrome 或 Edge 版本，或者如果您没有安装这两个浏览器，也可以使用轻量级的 Chrome 库版本（有关详细信息，请参见下面的 Chrome 安装）。

Mermaid

Mermaid 是一个基于 Javascript 的图表和绘图工具，它使用受 Markdown 启发的文本定义和一个渲染器来创建和修改复杂的图表。

Mermaid 图表使用 %% 作为其注释语法，因此单元格选项使用 %%| 声明。单元格选项必须直接包含在图表代码块的开始下方。

上面我们展示了一个使用 Mermaid 创建的流程图，这里是一个序列图（同样使用 {mermaid} 可执行单元格嵌入）：

```{mermaid}
sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: 你好约翰，你好吗？
  loop 健康检查
    John->>John: 与疑病症作斗争
  end
  Note right of John: 理性的想法<br/>占上风！
  John-->>Alice: 很好！
  John->>Bob: 你呢？
  Bob-->>John: 非常好！
```

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: 你好约翰，你好吗？
  loop 健康检查
    John->>John: 与疑病症作斗争
  end
  Note right of John: 理性的想法<br/>占上风！
  John-->>Alice: 很好！
  John->>Bob: 你呢？
  Bob-->>John: 非常好！

请注意，Mermaid 输出因目标格式（例如 HTML 与打印格式）而异。有关更多详细信息，请参见下面的 Mermaid 格式部分。

要了解更多关于使用 Mermaid 的信息，请参见 Mermaid 网站或 Mermaid 书籍（由 Mermaid 的创建者编写）。

Graphviz

Graphviz 布局程序采用简单的文本语言描述图表，并生成有用的格式图表。Graphviz 有许多对具体图表有用的功能，例如颜色、字体、表格节点布局、线条样式、超链接和自定义形状的选项。

Graphviz 图表使用 // 作为其注释语法，因此单元格选项使用 //| 声明。单元格选项必须直接包含在图表代码块的开始下方。

例如，这里是一个使用 graphviz 创建的简单无向图：

```{dot}
graph G {
  layout=neato
  run -- intr;
  intr -- runbl;
  runbl -- run;
  run -- kernel;
  kernel -- zombie;
  kernel -- sleep;
  kernel -- runmem;
  sleep -- swap;
  swap -- runswap;
  runswap -- new;
  runswap -- runmem;
  new -- runmem;
  sleep -- runmem;
}
```

要了解更多关于 Graphviz 的信息，请参见 Graphviz 网站、简单的 Graphviz 示例列表或 Graphviz 图库。

创作

有许多工具可以提高您创作图表的生产力：

Mermaid 实时编辑器是一个在线工具，用于实时编辑和预览 Mermaid 图表。
Graphviz Online 提供了类似的工具，用于编辑 Graphviz 图表。
RStudio 包括对编辑和预览 .mmd 和 .dot 文件的支持（借助 DiagrammeR 包的帮助）。
Quarto 的 VS Code 扩展支持对嵌入在 .qmd 文件和 .mmd 及 .dot 文件中的图表进行实时预览：

请注意，您应该确保已安装最新版本的 Quarto VS Code 扩展以尝试此功能。

交叉引用

图表可以像图像和绘图输出一样被视为图形。例如，如果我们在上面的图表中添加以下图形选项：

```{dot}
//| label: fig-simple
//| fig-cap: "这是一个简单的graphviz图。"
```

我们将得到以下输出：

Figure 1: 这是一个简单的 graphviz 图。

然后我们可以通过以下方式创建对该图的交叉引用：

@fig-simple

要使用 div 语法创建指向图表的交叉引用，可以将其视为一个图形。例如，Figure 2 是通过以下方式创建的：

::: {#fig-simple}

```{dot}
graph {
  A -- B
}
```

这是一个简单的 graphviz 图表
:::

Figure 2: 这是一个简单的 graphviz 图表

如果你更倾向于为图表分配一个与图形不同的标签和计数器，可以考虑定义自定义交叉引用类型。

文件包含

您可能会发现，在独立的 .dot 或 .mmd 文件中编辑图表，然后从您的 .qmd 文档中引用它，会更加方便。您可以通过在 Mermaid 或 Graphviz 单元格中添加 file 选项来实现这一点。

例如，在这里我们包含了一个非常复杂的图表，其定义过于繁琐，无法内联提供：

```{dot}
//| label: fig-linux-kernel
//| fig-cap: "Linux 内核的图表。"
//| file: linux-kernel-diagram.dot
```

Figure 3: Linux 内核的图表。

请注意，label 和 fig-cap 属性在包含 file 时仍然按预期工作。

尺寸调整

默认情况下，图表以其自然尺寸呈现（即它们不会被拉伸以适应当前文档的默认图形尺寸）。在 HTML 输出格式中，图表也会变得响应式，因此它们的宽度不会溢出当前页面列。这与处理图像和动态 JavaScript 小部件的方式类似。

您可以通过指定 fig-responsive: false 选项来禁用响应式尺寸调整。您还可以通过 fig-width 和 fig-height 指定明确的尺寸。例如，在这里我们希望使一个 Mermaid 图表稍大一些，因为它只包含几个元素：

```{mermaid}
%%| fig-width: 6.5
flowchart LR
  A[硬边缘] --> B(圆角边缘)
  B --> C{决策}
```

flowchart LR
  A[硬边缘] --> B(圆角边缘)
  B --> C{决策}

Mermaid 格式

当您在文档中包含一个 Mermaid 图表时，图表格式会根据输出格式自动选择：

格式	输出
HTML (`html`, `revealjs`, 等)	Mermaid 原生 (JavaScript)
GitHub 风格 Markdown (`gfm`)	Mermaid 代码块
其他格式 (`pdf`, `docx`, 等)	PNG 图像

默认情况下，只要底层输出格式支持 JavaScript，就会使用 Mermaid 原生格式。

当使用 format: gfm 时，图表将以纯 mermaid 代码块的形式输出。这是因为 GitHub 和 GitLab 都原生支持从代码渲染 Mermaid 图表。

对于不特殊处理 Mermaid 或缺少 JavaScript 运行时的格式（例如 pdf, docx, epub 等），会使用 Chrome 创建 PNG 图像。

您可以使用 mermaid-format 选项更改默认行为。例如：

---
format:
  gfm:
    mermaid-format: png
---

mermaid-format 的有效值包括 js, png, 和 svg。

Mermaid 主题

人工智能与机器学习

概述

人工智能（AI）和机器学习（ML）是当今科技领域最热门的话题之一。AI是指计算机系统能够执行通常需要人类智能的任务，如视觉识别、语音识别和决策制定。ML是AI的一个子集，专注于开发能够从数据中学习的算法。

关键技术

深度学习

深度学习是ML的一个分支，使用多层神经网络来模拟人脑的工作方式。它在图像和语音识别等领域取得了显著的成功。

强化学习

强化学习是一种通过试错来学习的ML方法。它通常用于游戏和机器人控制等领域。

应用

医疗保健

AI和ML在医疗保健领域有广泛的应用，包括疾病诊断、药物发现和个性化治疗。

金融

在金融领域，AI和ML用于风险管理、欺诈检测和投资策略优化。

挑战

数据隐私

随着AI和ML的发展，数据隐私成为一个重要问题。如何在利用数据的同时保护个人隐私是一个亟待解决的挑战。

伦理问题

AI和ML的决策过程往往不透明，这引发了关于算法偏见和伦理责任的讨论。

未来展望

AI和ML的未来充满希望，但也伴随着挑战。随着技术的进步，我们有望看到更多创新应用的出现，但同时也需要解决随之而来的伦理和社会问题。

以下各节描述了控制Mermaid图表颜色主题的方法：

使用当前文档主题。
通过YAML选项使用Mermaid自己的颜色主题之一。
使用SCSS和CSS变量。

Mermaid图表的默认颜色

如果你使用Quarto的bootswatch内置主题，包括默认主题，或使用相同SCSS变量的自定义主题，你的Mermaid图表将自动跟随你的主题。

以下示例展示了Quarto的一些内置bootswatch主题的效果。

使用bootswatch的Darkly主题的文档中Mermaid流程图的截图。

使用bootswatch的Sandstone主题的文档中Mermaid流程图的截图。

使用bootswatch的Vapor主题的文档中Mermaid流程图的截图。

你可以在下面的自定义Mermaid主题部分中阅读更多关于Bootstrap的SCSS变量与Quarto的Mermaid SCSS变量的对应关系，以及如何更改它们的内容。

使用Mermaid的内置主题

如果你想使用Mermaid自己的主题，可以通过配置YAML前言中的mermaid选项来实现：

format:
  html:
    mermaid:
      theme: forest

Mermaid可用的主题有：default、dark、forest和neutral。

使用Mermaid默认主题的Mermaid流程图截图。

使用Mermaid暗色主题的Mermaid流程图截图。

使用Mermaid森林主题的Mermaid流程图截图。

使用Mermaid中性主题的Mermaid流程图截图。

自定义Mermaid主题

Quarto提供了自己的Mermaid SCSS和CSS变量，可以覆盖这些变量以允许对图表主题进行一些自定义。SCSS变量及其默认值如下：

$mermaid-bg-color: $body-bg;
$mermaid-edge-color: $secondary;
$mermaid-node-fg-color: $body-color;
$mermaid-fg-color: $body-color;
$mermaid-fg-color--lighter: lighten($body-color, 10%);
$mermaid-fg-color--lightest: lighten($body-color, 20%);
$mermaid-font-family: $font-family-sans-serif;
$mermaid-label-bg-color: $body-bg;
$mermaid-label-fg-color: $primary;
$mermaid-node-bg-color: rgba($primary, 0.1);
$mermaid-node-fg-color: $primary;

它们的CSS变量对应物是：

:root {
  --mermaid-bg-color: #{$mermaid-bg-color};
  --mermaid-edge-color: #{$mermaid-edge-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
  --mermaid-fg-color: #{$mermaid-fg-color};
  --mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
  --mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
  --mermaid-font-family: #{$mermaid-font-family};
  --mermaid-label-bg-color: #{$mermaid-label-bg-color};
  --mermaid-label-fg-color: #{$mermaid-label-fg-color};
  --mermaid-node-bg-color: #{$mermaid-node-bg-color};
  --mermaid-node-fg-color: #{$mermaid-node-fg-color};
}

例如，要为节点的背景提供自定义颜色，你可以在添加自定义CSS样式表中包含以下内容：

:root {
  --mermaid-node-bg-color: #375a7f;
}

你可以在Quarto源代码的文件embed-mermaid.css中找到Quarto变量与Mermaid原生CSS类的对应关系。

代码回显

请注意，与其他可执行单元格处理程序（例如 {python}）不同，带有图表的单元格默认情况下不会在渲染的文档中显示其代码。您可以通过在单元格顶部添加 echo: true 选项来显示代码。

要包含 {mermaid} 的代码，请在单元格顶部添加 %%| echo: true。例如：

```{mermaid}
%%| echo: true
```

要包含 {dot} 的代码，请在单元格顶部添加 //| echo: true。例如：

```{dot}
//| echo: true
```

Chrome 安装

对于打印到 pdf 或 docx 等输出格式，图表渲染使用 Chrome 或 Edge 网络浏览器创建高质量的 PNG。

Quarto 可以自动使用您系统上现有的 Chrome 或 Edge 版本来进行渲染。或者，如果您没有安装这两者中的任何一个，您可以使用以下命令为 Quarto 安装一个最小版本的 Chrome：

终端

quarto install chromium

Note

Quarto 通过 Puppeteer 安装无头 Chromium。Puppeteer 安装的捆绑 Chromium 可能无法在 Docker 容器中工作；如果您尝试在 Windows Subsystem for Linux (WSL) 中安装，请检查 Puppeteer 文档以及这篇文章。