mermaid 标签

mermaid标签
1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark
1
2
3
4
5
6

{% 画图 %}
图类型
   内容
{% end画图 %}

饼图

  1. 示例源码
1
2
3
4
5
6
7
{% 画图 %}
pie title CDN占比
    "cdn.bootcdn.net" : 3
    "npm.onmicrosoft.cn" : 4
    "npm.elemecdn.com" : 20
    "unpkg.com" :  4
{% end画图 %}

流程图

  1. 这声明流程图是从上到下（或）定向的。TDTB
1
2
3
4
5
6
7
8
9
10
{% 画图 %}
flowchart TD
    A[如果] --> B{是否等于}
    B -->|Yes| C[是]
    C --> D[等于]
    D --> B
    B --->|NO| E[否]
    E --> F[不等于]
    B ----> G[未知]
{% end画图 %}
  1. 这声明流程图是从左到右定向的（）。LR
1
2
3
4
5
6
7
8
9
10
11
{% 画图 %}
flowchart LR
    A[如果] --> B{是否等于}
    B -->|Yes| C[是]
    C --> D[等于]
    D --> B
    B --->|NO| E[否]
    E --> F[不等于]
    B --> G[未知]
    F <--> G[未知]
{% end画图%}

时序图

1
2
3
4
5
6
7
{% 画图 %}
sequenceDiagram
    actor 爱丽丝
    actor 鲍勃
    爱丽丝->>鲍勃: 嗨，鲍勃
    鲍勃->>爱丽丝: 嗨，爱丽丝
{% end画图 %}

思维导图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% 画图 %}
mindmap
  root((Hexo博客搭建))
    框架
      Hexo
      ::icon(fa-brands fa-phoenix-framework)
        基础配置
          _config.yml
      环境
        Git
        ::icon(fab fa-git)
        Node.js 12.0<br/>及以上版本
        ::icon(fab fa-node)
    主题
      🦋Butterfly
        基础配置
          _config.butterfly.yml
        魔改
          Akilarの糖果屋<br/>Akilar.top
    工具
      电脑
      ::icon(fas fa-laptop-code)
{% end画图 %}

XY 图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1. 默认  vertical （垂直）
{% 画图 %}
xychart-beta
    title "销售收入"
    x-axis ["一月"," 二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
    y-axis "收入（元）" 4000 --> 11000
    bar [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]
{% end画图 %}

2. horizontal （水平）

{% 画图 %}
xychart-beta horizontal
    title "销售收入"
    x-axis ["一月"," 二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
    y-axis "收入（元）" 4000 --> 11000
    bar [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]
{% end画图 %}