mermaid-note

Mermaid Hexo Markdown
program
发布日期:   2023-04-10
更新日期:   2024-07-04
文章字数:   1.5k
阅读时长:   8 分
阅读次数:  

mermaid入门(基于hexo)

〇、基于Hexo-matery搭建mermaid插件

参考metary配置文件

# 图表绘制插件
# 建议更换更换hexo-renderer-markdown-it引擎。参考下面链接
# https://github.com/hexojs/hexo-renderer-markdown-it
# https://github.com/hexojs/hexo-renderer-markdown-it/wiki/Advanced-Configuration
# 使用教程： https://blog.17lai.site/posts/cf0f47fd/#Mermaid
# 安装配置方法
# npm un hexo-renderer-marked --save
# npm i hexo-renderer-markdown-it --save
# npm install --save hexo-tag-mermaid
# 注意：hexo-renderer-markdown-it 比默认引擎更快，可选择插件较多，请认真看上面两个链接教程。
# mermaid语法教程 https://mermaid-js.github.io/mermaid/#/

由于主题中的使用方式需要在代码中添加 {% mermaid %} {% endmermaid %}, 在 Typora 中编写不能即使显示, 因此采用其他方式对其进行优化

参考 Markdown的时序图、流程图、和甘特图+Hexo的相关配置 以及 GitHub - webappdevelp/hexo-filter-mermaid-diagrams

安装插件

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
# 安装插件
npm i hexo-tag-mermaid --save 
npm i hexo-filter-mermaid-diagrams --save

配置插件

首先配置 Hexo 的 _config.yml

需要在配置文件的文末添加

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  
  # default true
  version: "7.1.2"
  # default v7.1.2
  options:  
  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
  #startOnload: true  // default true

渲染文件

由于 metary 内包含 mermaid 配置文件, 因此找到 hexo-theme-matery/layout/layout.ejs

搜索 theme.mermaid.enable

将配置代码更改至 Github/hexo-filter-mermaid-diagrams 中配置

<% if (theme.mermaid.enable) { %>
<script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
<script>
    if (window.mermaid) {
        mermaid.initialize({theme: 'forest'});
    }
</script>
<% } %>

配置文件

激活 mermaid 配置

mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default false
  version: "latest" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

一、流程图(graph)

graph TD
A --> B
A --> C
style B fill:#f9f,stroke:#333,stroke-width:4px
style C fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
graph TD
    A --> B
    A --> C
    style B fill:#f9f,stroke:#333,stroke-width:4px %% 样式
    style C fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5 %% 样式

方向

  • TB/TD - top bottom/down
  • BT - bottom/top
  • LR - left right
  • RL - right left

节点

graph LR;
	B[直角]
	C(圆角)
	D((圆形))
	E>不对称]
	F{菱形}
	G([椭圆形])
	H[(圆柱)]
	I[[双杠]]
	K[\平行1\]
	L[/平行2/]
	M[\梯形1/]
	N[/梯形2\]
	B --> C --> D --> E
	F --> G --> H --> I
	K --> L --> M --> N
graph LR;
	直角[] ---> 圆角(()) ---> 圆形D(()) ---> 不对称>]
	菱形{} ---> 椭圆形([]) ---> 圆柱[()] ---> 双杠[[]] ---> 六边形{{}}
	平行1[\\] ---> 平行2[//] ---> 梯形1[\/] ---> 梯形2[/\]

连线

  • 实线
graph LR
	A --> B --- C -- 文字 --- D -- 文字 --> E
%% A(有箭头,无文字) -> B(无箭头，无文字) -> C(有箭头，文字) -> D(有箭头,文字)
graph LR
	A --> B --- C -- 文字 --- D -- 文字 --> E
  • 虚线
graph LR;
	A -.-> B -.文字.-> C
%% A(有箭头,无文字) -> B(有箭头，无有文字) 
graph LR
	A -.-> B -.文字.-> C
  • 大箭头
graph LR
	A ==> B == 文字 ==> C
%% A(大箭头,无文字) -> B(大箭头,有文字)
graph LR
	A ==> B == 文字 ==> C

子图

graph TB
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    c1-->a2
graph TB
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    c1-->a2

二、时序图(sequenceDiagram)

参与者(participant)

sequenceDiagram
	dee ->> xian: I'm hungry
	xian -->> dee: Me too
sequenceDiagram
	dee ->> xian: I'm hungry
	xian -->> dee: Me too

注: 如果希望自定义参与者顺序, 使用participant关键字

sequenceDiagram
	participant xian
	participant dee
	dee ->> xian: I'm hungry
	xian -->> dee: Me too
sequenceDiagram
	participant xian
	participant dee
	dee ->> xian: I'm hungry
	xian -->> dee: Me too

别名(as)

sequenceDiagram
	participant A as xian
	participant D as dee
	A ->> D: How are you
	D -->> A: Fine
sequenceDiagram
	participant A as xian
	participant D as dee
	A --> D: How are you
	D -->> A: Fine

连线

sequenceDiagram
	A -> B: 无箭头实线
	A --> B: 无箭头虚线
	A ->> B: 有箭头实线
	A -->> B: 有箭头虚线
	A -X B: 有箭头x实线
	A --X B: 有箭头x虚线
sequenceDiagram
	A -> B: 无箭头实线
	A --> B: 无箭头虚线
	A ->> B: 有箭头实线
	A -->> B: 有箭头虚线
	A -X B: 有箭头x实线
	A --X B: 有箭头x虚线

控制焦点(±)

sequenceDiagram
	dee ->>+ xian: Let's Fighting!
	%% +表示激活角色
	xian -->>- dee: Grate!
sequenceDiagram
	dee ->>+ xian: Let's Fighting!
	%% +表示激活角色
	xian -->>- dee: Grate!

焦点嵌套

sequenceDiagram
	xian ->>+ dee: Let's Shopping!
    xian ->>+ dee: Can you hear me?
    dee -->>- xian: I can hear you.
    dee -->>- xian: But I'm tired.
sequenceDiagram
	xian ->>+ dee: Let's Shopping!
    xian ->>+ dee: Can you hear me?
    dee -->>- xian: I can hear you.
    dee -->>- xian: But I'm tired.

备注(Note)

Note [ right of | left of | over ] [Actor]

sequenceDiagram
	participant A
	Note right of A: I'm note
sequenceDiagram
	participant A
	Note right of A: I'm note

over用法

sequenceDiagram
	participant A as dee
	participant B as xian
	A ->> B: Let 's shopping
	Note over B: I don't want to
	Note over A,B: Just 20 min
sequenceDiagram
	participant A as dee
	participant B as xian
	A ->> B: Let 's shopping
	Note over B: I don't want to
	Note over A,B: Just 20 min

循环(loop)

sequenceDiagram
	xian ->> dee: let's shopping
	%% loop 后
	loop 20 min
		dee --> xian: let me see see
	end
	dee -->> xian: ok
sequenceDiagram
	xian ->> dee: let's shopping
	%% loop 后
	loop 20 min
		dee --> xian: let me see see
	end
	dee -->> xian: ok

选择

sequenceDiagram
	dee ->> xian: What do you want to drink
	alt summer
		xian -->> dee: ice cream
	else winter
		xian -->> dee: tea
	end
	opt all the time
		xian -->> dee: milk tea is ok
	end
sequenceDiagram
	dee ->> xian: What do you want to drink
	alt summer
		xian -->> dee: ice cream
	else winter
		xian -->> dee: tea
	end
	opt all the time
		xian -->> dee: milk tea is ok
	end

色块

sequenceDiagram
	actor a as client
	participant b as server
	rect rgb(213, 235, 225)
        a ->> +b: quest
        b -->> -a: response
	end
	rect rgb(192, 214, 149)
		a ->> +b: quest
		b ->> -a: response
	end
sequenceDiagram
	actor a as client
	participant b as server
	rect rgb(213, 235, 225)
        a ->> +b: quest
        b -->> -a: response
	end
	rect rgb(192, 214, 149)
		a ->> +b: quest
		b ->> -a: response
	end

三、类图(classDiagram)

classDiagram
class Person {
	+String name // public
	-int age // private
	+save() void
	+eat(food) void
	+breathe(air) void
}
class Student~Primary~ {
	-String studentNo
	+doHomework(pen) Homework
}
class Tool {
	+String function
	+use() void
}
class Pen {
	+use() void
}
class Air {
	+String O2
}
class Eye {
	+String eyes
}
class Grade {
	+Student students
}
Air <.. Person: 依赖(一个需要另一个的协助)
Person <|-- Student: 继承
Tool <|.. Pen: 实现
Pen <.. Student: 依赖
Person *-- Eye: 组合(整体与部分的关系, 部分不能离开整体单独存在)
Grade o-- Student: 聚合(整体与部分的关系, 部分可以离开整体单独存在)
classDiagram
class Person {
	+String name // public
	-int age // private
	+save() void
	+eat(food) void
	+breathe(air) void
}
class Student~Primary~ {
	-String studentNo
	+doHomework(pen) Homework
}
class Tool {
	+String function
	+use() void
}
class Pen {
	+use() void
}
class Air {
	+String O2
}
class Eye {
	+String eyes
}
class Grade {
	+Student students
}
Air <.. Person: 依赖(一个需要另一个的协助)
Person <|-- Student: 继承
Tool <|.. Pen: 实现
Pen <.. Student: 依赖
Person *-- Eye: 组合(整体与部分的关系, 部分不能离开整体单独存在)
Grade o-- Student: 聚合(整体与部分的关系, 部分可以离开整体单独存在)
文章作者: 👑Dee👑
文章链接: https://www.saddyfire.cn/2023/04/10/mermaid-note/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明来源 👑Dee👑 !
Mermaid Hexo Markdown
  目录