mermaid

hexo标签外挂mermaid

使用mermaid插件可以绘制Flowchart（流程图）、Sequence diagram（时序图）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（饼图）。

• mermaid 1
• mermaid 2
• mermaid 3

Pie Chart

{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}

Syntax #语法
Drawing a pie chart is really simple in mermaid. #饼图在mermaid中非常简单

Start with keyword to begin the diagrampie #以图表作为关键字开始
Followed by keyword and its value in string to give a title to the pie-chart. This is OPTIONALtitle #title后就是pie的标题
Followed by dataSet #其次是数据集
label for a section in the pie diagram within quotes." " #引号内的标签自定义代表饼图元素
Followed by colon as separator:  #冒号后定义其元素的值
Followed by (supported upto two decimal places)positive numeric value  #数值最多支持两位小数
[pie] [title] [titlevalue] (OPTIONAL) "[datakey1]" : [dataValue1] "[datakey2]" : [dataValue2] "[datakey3]" : [dataValue3] . .

Flowchart

This is Tab 3.

ok，接下来就是实践环节啦

本站访客数据图

数据来源百度统计