markdown 画图 实例

vscode mermaid 插件
Markdown Preview Mermaid Support

添加按键

<kbd>Software</kbd> 

Software

方向

字母表示	含义
TB	从上到下
BT	从下到上
LR	从左到右
RL	从右到左

图形

表述	说明	含义
id[文字]	矩形节点	表示过程
id(文字)	圆角矩形节点	表示开始与结束
id((文字))	圆形节点	表示连接。为避免流程过长或有交叉，可将流程切开成对
id{文字}	菱形节点	表示判断、决策
id>文字 ]	右向旗帜节点

```mermaid
	graph TB;
	a(方形)-->b((圆形))-->c>箭头]-->d{判断}
	
	subgraph Memory Services
	NVMRAM_Mannger
	end
```

线条

```mermaid
	graph LR;
	A(实线箭头)-->B
	A1(实线)---B1
	A2(实线箭头加字)---->B2
	A3(实线加字)-----B3
	A4(虚线)-.-B4
	A5(虚线箭头)-.->B5
```

时序图

```mermaid
sequenceDiagram
Title: 时序图模式
participant director as director 
participant builder  as builder 
participant building as building
opt 认证
director->>builder: A
end
Note over director,builder: Lesson 1
loop 不停地说
builder->>+building: B
Note right of building: Lesson 2
end
building-->>-director: C
```

UML类图

```mermaid
classDiagram
class classA{
int	id
-List<String> msg
getId(int id) List~int~
}
classA : setMessages(List~string~ messages)
```

示例

```mermaid
graph TB;
subgraph Memory Services
NVMRAM_Mannger(NVMRAM Mannger)
end
Memif_Read[Memif_Read]
Memif_Write[Memif_Write]
subgraph Memory Hardware Abstraction 
Memory_Abstraction_interface(Memory Abstraction interface)
EEPROM_Abstraction(EEPROM Abstraction)
Extermal_EEPROM_Driver(Extermal EEPROM Driver)
Flash_EEPROM_Emulation(Flash EEPROM Emulation)
end
subgraph MCAL
SPIHandlerDeiver(SPIHandlerDeiver)
InternalFlashDeiver(Internal Flash Deiver)
end
subgraph UC
SPI(SPI)
Flash(Flash)
end

NVMRAM_Mannger-->Memif_Read-->Memif_Write-->Memory_Abstraction_interface-->EEPROM_Abstraction-->Extermal_EEPROM_Driver-->Spi_ReadlB(Spi_ReadlB)-->Spi_WritelB(Spi_WritelB)-->SPIHandlerDeiver-->SPI
Memory_Abstraction_interface-->Flash_EEPROM_Emulation-->Fls_Read(Fls_Read)-->Fls_Write(Fls_Write)-->InternalFlashDeiver-->Flash

```

实现图如下