博客园支持|博客园支持 mermaid
博客园支持 mermaid
Mermaid 简介
Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表
平时写博客时可以使用Markdown编写，嵌入Mermaid能让阅读体验更佳
在 Markdown 中使用 Mermaid
```mermaid
绘图类型
Mermaid语句
```
支持绘图类型
- 流程图：使用
graph关键字 - 序列图：使用
sequenceDiagram关键字 - 类图：使用
classDiagram关键字 - 状态图：使用
stateDiagram关键字 - 实体关系图：使用
erDiagram关键字 - 用户旅程图：使用
journey关键字 - 甘特图：使用
gantt关键字 - 饼状图：使用
pie关键字 - 需求图：使用
requirementDiagram关键字
实例展示：
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in" 类图
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label 流程图 简视
【博客园支持|博客园支持 mermaid】流程图是使用
flowchart LR- 设置节点
flowchart LR节点名称[节点内容]
如果没有设置[节点内容]，默认为节点名称例子：
```mermaid
flowchart LRid
```
flowchart LR id
```mermaid
flowchart LRid[This is the text in the box]
```
flowchart LR id[This is the text in the box]
- 流程控制
不同的流程控制会有不同的效果
- TD - 自上而下/与TB相同
- TB - 从上到下
- BT - 从下而上
- RL - 从右到左
- LR - 从左到右
flowchart 流程控制节点名称[节点内容] --> 节点名称[节点内容]
例子：
```mermaid
flowchart TDStart --> Stop
```
flowchart TD Start --> Stop
```mermaid
flowchart LRid1[box1] --> id2[box2]
```
flowchart LR id1[box1] --> id2[box2]
- 节点形状
```mermaid
flowchart LR
id1(This is the text in the box)
```
flowchart LR id1(This is the text in the box)
```mermaid
flowchart LR
id1((This is the text in the circle))
```
flowchart LR id1((This is the text in the circle)) 对于括号可以使用
() [] {} / \进行组合，/ \ 只能内层不可单独使用比如：
[/文本\]```mermaid
flowchart LR
id[/文本\]
```
flowchart LR id[/文本\] 总之Mermaid的内容很多在此不在继续介绍 拒绝伸手党，下面自助
建议自行探索mermaid官网资料
推荐阅读
- input输入框仅支持输入数字及两位小数点解决
- Zabbix|Zabbix 5.0（服务端进程总结）
- 深度学习校招面试总结|人工智能面试总结-支持向量机SVM
- 编译vim支持python3
- Kubernetes（更新与回滚）
- 墨天轮国产数据库沙龙 | 张玮绚（TDengine，高性能、分布式、支持SQL的时序数据库）
- python|python api测试框架 github_GitHub - tilics/jiekou-python3: 接口自动化测试框架——python版，支持HTTP，dubbo协议接口...
- 如何让自己的组件库支持按需引入
- Linux|Linux 时间操作及其同步
- Java不支持协程（那是你不知道Quasar！）