Hexo

使用 hexo + bufferfly + hexo-filter-mermaid-diagrams 渲染时需要在 markdown 文本中加入下面的两行内容. 注意是放在代码块外面, 不是代码块里面. 目前不知道是什么原因, 但是只有这样才能正常渲染成功.

概述

  • 什么是Mermaid？
    Mermaid 是一种基于 Javascript 的绘图工具, 使用类似于 Markdown 的语法, 使用户可以方便快捷地通过代码创建图表.

  • Mermaid能绘制哪些图？

    • 饼状图：使用pie关键字
    • 流程图：使用graph关键字
    • 序列图：使用sequenceDiagram关键字
    • 甘特图：使用gantt关键字
    • 类图：使用classDiagram关键字
    • 状态图：使用stateDiagram关键字
    • 用户旅程图：使用journey关键字

流程图

graph LR
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];

方向

用于开头, 声明流程图的整体方向

  • graph or graph TB or graph TD: Top -> Bottom/Down
  • graph BT: Bottom -> Top
  • graph LR: Left -> Right
  • graph RL: Right -> Left

结点

graph
    id1["[矩形default]"]
    id2("(圆边矩形)")
    id3(["([体育场形])"])
    id4[["[[子程序形]]"]]
    id5[("[(圆柱形)]")]
    id6(("((圆形))"))
graph
  id1{"{菱形}"}
  id2{{六角形}}
  id3[/"[/平行四边形/]"/]
  id4[\"[\反向平行四边形\]"\]
  id5[/"[/梯形\]"\]
  id6[\"[\反向梯形/]"/]

连线

  • 实线箭头
1
2
graph LR
n1((a))-->n2((b))--"text1"-->n3((c))-->|"text2"|n4((d))
graph LR
n1((a))-->n2((b))--"text1"-->n3((c))-->|"text2"|n4((d))
  • 粗实线箭头: 分为无文本箭头和有文本箭头
1
2
graph LR
n1((a))==>n2((b))=="text1"==>n3((c))==>|"text2"|n4((d))
graph LR
n1((a))==>n2((b))=="text1"==>n3((c))==>|"text2"|n4((d))
  • 虚线箭头
1
2
graph LR
n1((a))-.->n2((b))-."text1".->n3((c))-.->|"text2"|n4((d))
graph LR
n1((a))-.->n2((b))-."text1".->n3((c))-.->|"text2"|n4((d))
  • 无箭头线：即以上三种连线去掉箭头后的形式
1
2
3
4
graph LR
n1((a))---n2((b))===n3((c))-.-n4((d))
n1((a))--"text"---n2((b))=="text"===n3((c))-."text".-n4((d))
n1((a))---|"text"|n2((b))===|"text"|n3((c))-.-|"text"|n4((d))
graph LR
n1((a))---n2((b))===n3((c))-.-n4((d))
n1((a))--"text"---n2((b))=="text"===n3((c))-."text".-n4((d))
n1((a))---|"text"|n2((b))===|"text"|n3((c))-.-|"text"|n4((d))
  • 其他连线
1
2
3
4
graph LR
    A((A)) o---o B((B))
    B <----> C((C))
    A x-----x C
graph LR
    A((A)) o---o B((B))
    B <----> C((C))
    A x-----x C

小技巧

  • 文本中可以借助 HTML 中的 <br/> 标签来实现换行
1
2
graph LR
   A[Line1<br/>Line2]
graph LR
   A[Line1
Line2]
  • 可以借助 & 符号来简化多重链的绘制
1
2
graph LR
  a --> b & c--> d & e & f
graph LR
  a --> b & c--> d & e & f

  • 使用 %% 添加注释

  • 通过增加 - 字符的数量可以延长连线

子图

  • 子图: 在代码段的开始加入subgraph, 尾部加入end
graph TB
  c1-->a2
  subgraph one
  a1-->a2
  end
  subgraph two
  b1-->b2
  end
  subgraph three
  c1-->c2
  end
  one --> two
  three --> two
  two --> c2

主题

Theme Configuration | Mermaid

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffffffff',
      'primaryTextColor': '#000000ff',
      'primaryBorderColor': '#000000ff',
      'lineColor': '#000000ff',
      'secondaryColor': '#00000000',
      'tertiaryColor': '#00000000'
    }
  }
}%%
graph TB
command["命令模式
Command"]
insert["插入模式
Insert"]
replace(["取代模式
Replace"])
visual(["可视模式
Visual"])
lastline["底线命令模式
Last Line"]
command--"i,a,o"--> insert
insert --"Esc"--> command
command--"r,R"--> replace
replace --"Esc"--> command
command --"v"--> visual
visual --"Esc"--> command
command --":"--> lastline
lastline --"Esc"--> command

Mermaid 的主题引擎只能识别 16 进制的颜色值, 不能识别诸如 red/bule 的颜色名字. 通常 16 进制的颜色值具有如下格式

1
2
3
4
#RGB
#RGBT
#RRGGBB
#RRGGBBTT

颜色值可以为 3/4/6/8 位的 16 进制数

  • 当为 3 位时, 3 位数分别对应 RGB 的值, 例如红色 #f00, 绿色 #0f0, 蓝色 #00f, 白色 #fff, 黑色 #000;
  • 当为 4 位时, 4 位数分别对应 RGBT 的值, 其中 T 表示不透明度, 例如 #fff0 表示白色+完全透明, #000f 表示黑色+完全不透明
  • 当为 6 位时, 6 位数分别对应 RRGGBB 的值
  • 当为 8 位时, 8 位数分别对应 RRGGBBTT 的值
1
2
3
4
5
6
7
8
9
10
11
12
13
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffffffff',
      'primaryTextColor': '#000000ff',
      'primaryBorderColor': '#000000ff',
      'lineColor': '#000000ff',
      'secondaryColor': '#00000000',
      'tertiaryColor': '#00000000'
    }
  }
}%%