图表绘制

Mermaid 是一个基于 JavaScript 的图表绘制工具，可以方便的实现文档的图表展示。

Docusaurus

Docusaurus 提供了丰富的插件，可以方便的实现文档的部署！

安装 Mermaid

打开终端命令行运行 yarn add @docusaurus/theme-mermaid 命令安装 Mermaid 插件。

yarn add @docusaurus/theme-mermaid

配置 Mermaid

打开 docusaurus.config.ts 文件，添加下面的内容到 presets 中。

  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],

使用 Mermaid

代码块添加 mermaid 字符可以实现图表展示。

参考资料

Mermaid 官网：Mermaid

图表方向

Mermaid 支持多种图表方向：

• LR：从左到右
• RL：从右到左
• TB：从上到下
• BT：从下到上

LR

```mermaid
graph LR;
    A-->B;
    A-->C;
```

LR 预览

RL

```mermaid
graph RL;
    A-->B;
    A-->C;
```

RL 预览

TB

```mermaid
graph TB;
    A-->B;
    A-->C;
```

TB 预览

BT

```mermaid
graph BT;
    A-->B;
    A-->C;
```

BT 预览

图表形状

Mermaid 支持多种图表形状。

TB

```mermaid
flowchart LR
    A@{ shape: rect, label: "Shape A" } --> B@{ shape: rounded, label: "Shape B" }
    C@{ shape: stadium, label: "Shape C" } --> D@{ shape: subproc, label: "Shape D" }
    E@{ shape: cyl, label: "Shape E" } --> F@{ shape: lin-cyl, label: "Shape F" }
```

TB 预览