各种图

# 思维导图、脑图、mindmap
## 绘制思维导图
在文档中绘制思维导图需要使用到三引号+mindmap关键字，同时可以在mindmap后加>指定脑图的高度，默认最小高度为150px
### 思维导图（Markdown标题形式）
```
```mindmap
# MrDoc
## 文集
### 文档
### 模板
## 用户
### 登录
### 注册
## 图片
## 附件```
```
渲染为：
```mindmap
# MrDoc
## 文集
### 文档
### 模板
## 用户
### 登录
### 注册
## 图片
## 附件
```
### 思维导图（层级列表形式）
```
```mindmap
# 州的先生博客
- 基础编程
- 数据应用
    - 数据采集
    - 数据分析
        - 数据清洗
        - 数据可视化
        - 数据挖掘
- Web开发
- 图形界面开发
- 渗透测试```
```
渲染为：
```mindmap
# 州的先生博客
- 基础编程
- 数据应用
    - 数据采集
    - 数据分析
        - 数据清洗
        - 数据可视化
        - 数据挖掘
- Web开发
- 图形界面开发
- 渗透测试
```
### 思维导图（指定高度）
设置思维导图的高度
```
```mindmap>300
# Python生态
## 数据采集
## 数据分析
### 数据挖掘
### 机器学习
### 自然语言处理
## Web开发
### Django
### Flask
## 图形界面开发
## 渗透测试```
```
示例:
```mindmap>300
# Python生态
## 数据采集
## 数据分析
### 数据挖掘
### 机器学习
### 自然语言处理
## Web开发
### Django
### Flask
## 图形界面开发
## 渗透测试
```

# Echarts图形图表
文档支持 在 Markdown 编辑器中插入 Echarts 图表图形，然后在文档页面中显示。
语法
```
```echart
echart的配置选项```
```
你还可以直接点击工具栏中的 :fa-bar-chart: 快速在文档中生成 echarts 代码块。
![](/media/202404/2024-04-19_155824_1995440.25219696300728667.png)

示例：
```
```echart
{
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
    }```
```

```echart
{
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
    }
```
## 图表配置项
具体的 Echarts 配置项可以参考 [官网示例](https://echarts.apache.org/examples/zh/index.html "官网示例")。

![](/media/202404/2024-04-19_160114_1453820.19249726293769986.png)
切记两点：

务必按照 Echarts 官方实例的配置项文件进行修改。
配置项末尾一定不要包含;分号。

```echart
{
  title: [
    {
      text: 'Tangential Polar Bar Label Position (middle)'
    }
  ],
  polar: {
    radius: [30, '80%']
  },
  angleAxis: {
    max: 4,
    startAngle: 75
  },
  radiusAxis: {
    type: 'category',
    data: ['a', 'b', 'c', 'd']
  },
  tooltip: {},
  series: {
    type: 'bar',
    data: [2, 1.2, 2.4, 3.6],
    coordinateSystem: 'polar',
    label: {
      show: true,
      position: 'middle',
      formatter: '{b}: {c}'
    }
  }
}
```

```echart
{
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
  grid: { containLabel: true },
  xAxis: { name: 'amount' },
  yAxis: { type: 'category' },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 10,
    max: 100,
    text: ['High Score', 'Low Score'],
    // Map the score column to color
    dimension: 0,
    inRange: {
      color: ['#65B581', '#FFCE34', '#FD665F']
    }
  },
  series: [
    {
      type: 'bar',
      encode: {
        // Map the "amount" column to X axis.
        x: 'amount',
        // Map the "product" column to Y axis
        y: 'product'
      }
    }
  ]
}
```

```echart
 {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
```
# 时间线
语法：
```
```timeline
# 标题
内容
====```
```

```timeline
# 标题
内容
====
````

# 流程图 Flowchart 的绘制方法
## 使用方法
### 流程节点的定义
在流程图中，通常有以下节点：
- 开始
- 处理
- 判断
- 输入/输出
- 子程序
- 条件
- 结束
我们可以通过如下语法来定义节点。
具体语法详见：

<https://github.com/adrai/flowchart.js>

在文档中绘制流程图，需要使用三引号代码块+flow关键字，代码示例如下：
```
```flow
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
```
上述代码将会渲染为下面的流程图：
```flow
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
```

# 绘制序列图 Sequence Diagram
具体的语法详见：
<https://bramp.github.io/js-sequence-diagrams/>
在文档中绘制序列图需要使用到三引号代码块+ seq关键字，示例如下：
```
```seq
州的先生->小明: 干嘛？
Note right of 小明: 据说MrDoc好用 
小明-->州的先生: MrDoc好用吗? 
州的先生->>小明: 感觉还不错！
```

```seq
州的先生->小明: 干嘛？
Note right of 小明: 据说MrDoc好用 
小明-->州的先生: MrDoc好用吗? 
州的先生->>小明: 感觉还不错！
```