Markdown 与 Mermaid 常用语法

一、核心语法

1.1 标题

# 一级标题
## 二级标题
### 三级标题
...

1.2 代码块

```c
#include <stdio.h>

int main() {
    return 0;
}
```

1.3 粗体，斜体等

**粗体**
*斜体*
- 节点
行内代码`printf()`

1.4 图片和链接

1. [百度](www.baidu.com)
2. ![图片文字](图片路径)
3. 带图注的图片和设置图片居中
    <figure align="center">
        <img src = "路径" width = "0-1000">
        <figcaption> 图1：xxx示意图
    <\figure>

1.5 表格

| 内容 | 内容 | 内容 |
|-----|-----|------|
| xxx | xxx | xxx |
...

二、其他常用语法

2.1 删除线

~~要被划线的文字~~

2.2 任务列表

- [x] 已经完成的任务
- [ ] 未完成的任务

2.3 添加脚注

带脚注的句子[^1]
[^1]: 脚注内容

2.4 表格格式和格内换行

|     左对齐    | 居中 |右对齐|
|:-------------|:---:|----:|
|line1<br>line2|单元格|单元格|

注：表格格式示例：

左对齐	居中	右对齐
line1 line2	单元格	单元格

2.5 目录生成 & 锚点链接

## 目录
- [简介](#1简介)
- [安装](#2安装)
- [使用指南](#3使用指南)
  - [基础用法](#31基础用法)
  - [高级功能](#32高级功能)
- [API 参考](#4api-参考)

#### 基础用法 {31基础用法}

跨文件链接：[首页](../../README.md)

底部导航栏
---
**导航**: 
[上一章: 安装指南](./installation.md) │ 
[目录](../README.md) │ 
[下一章: 配置说明](./configuration.md)
---底部导航栏
底部导航栏

2.6 一些常用图标

✨ 新功能	???? 修复	???? 优化	???? 文档
???? 提示	  ⚠️ 警告	  ❌ 错误	 ✅ 成功
✅ 完成 	⏳ 进行中  ???? 维护中 ❌ 取消
???? 文档 	 ???? 工具    ???? Bug修复  ???? 新功能
???? 高优先级 ???? 中等优先级 ???? 低优先级

2.7 latex公式

行内公式：$E = mc^2$
公式块：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

2.8 高级引用和提示框

> **???? 提示**
> 这是一个提示信息，用于提供有用的建议。

多级嵌套引用
> 主要观点
> 
> > 支持论据 1
> > 
> > > 详细解释和例子
> >
> > 支持论据 2
> 
> 总结结论

三、mermaid图

3.1 简介

mermaid是一个基于JavaScript的图表绘制工具，可以使用纯文本的方式创建各种图表。

3.2 基础用法

```mermaid
图表类型
   图表内容...
```

3.2.1 流程图

```mermaid
graph LR
	A((开始)) --> B{判断}
	B --> |是| C[执行操作]
	B --> |否| D((结束))
	C --> D
```
方向：
graph TD    # 从上到下 Top-Down
graph LR    # 从左到右 Left-Right
graph RL    # 从右到左 Right-Left  
graph BT    # 从下到上 Bottom-Top

节点形状：
```mermaid
graph LR
    A[矩形] --> B(圆角矩形)
    B --> C{菱形}
    C --> D((圆形))
    C --> E>非对称]
    E --> F{{六边形}}
```

注：示例

graph LR A((开始)) --> B{判断} B --> |是| C[执行操作] B --> |否| D((结束)) C --> D

3.2.2 序列图

基础序列图
```mermaid
sequenceDiagram
	participant 用户
	participant 前端
	participant 后端
	participant 数据库
	
	用户 ->> 前端: 点击登录
    前端->>后端: 发送登录请求
    后端->>数据库: 查询用户信息
    数据库-->>后端: 返回用户数据
    后端-->>前端: 返回登录结果
    前端-->>用户: 显示登录状态
```

高级用法：循环和条件
```mermaid
sequenceDiagram
    participant 用户
    participant 系统
    
    用户->>系统: 提交订单
    loop 库存检查
        系统->>系统: 检查商品库存
    end
    
    alt 库存充足
        系统->>系统: 扣减库存
        系统-->>用户: 订单创建成功
    else 库存不足
        系统-->>用户: 库存不足提示
    end
```

注：序列示例图

基础序列图：

sequenceDiagram participant 用户 participant 前端 participant 后端 participant 数据库用户 ->> 前端: 点击登录前端->>后端: 发送登录请求后端->>数据库: 查询用户信息数据库-->>后端: 返回用户数据后端-->>前端: 返回登录结果前端-->>用户: 显示登录状态

循环loop和条件alt：

sequenceDiagram participant 用户 participant 系统用户->>系统: 提交订单 loop 库存检查系统->>系统: 检查商品库存 end alt 库存充足系统->>系统: 扣减库存系统-->>用户: 订单创建成功 else 库存不足系统-->>用户: 库存不足提示 end

3.2.3 饼图

```mermaid
pie title 项目时间分配
    "需求分析" : 20
    "开发" : 40
    "测试" : 25
    "部署" : 10
    "文档" : 5
```

注：饼图示例

pie title 项目时间分配 "需求分析" : 20 "开发" : 40 "测试" : 25 "部署" : 10 "文档" : 5

3.2.4 甘特图

甘特图的核心是任务和时间，语法围绕这两点展开，主要包含：

基础配置（标题、日期格式）
阶段划分（section）
具体任务（每个任务的名称、状态、ID、时间）
- 具体的格式是---任务名称 : [状态] , 任务ID , 开始时间 , 持续时间/结束时间
- 状态不写的话默认是未开始。任务ID是自定义的唯一标识

```mermaid
gantt
	title 网站开发项目计划
	dateFormat YYYY-MM-DD
	section 设计阶段
	需求分析 :done, des1, 2025-01-01, 7d
	原型设计 :active, des2, after des1, 5d
	UI设计 :des3, after des2, 10d
	
	section 开发阶段
	前端开发 :dev1, after des3, 15d
	后端开发 :dev2, after des3, 20d
	测试 :test1, after dev1, 10d
```

注：示例

gantt title 网站开发项目计划 dateFormat YYYY-MM-DD section 设计阶段需求分析 :done, des1, 2025-01-01, 7d 原型设计 :active, des2, after des1, 5d UI设计 :des3, after des2, 10d section 开发阶段前端开发 :dev1, after des3, 15d 后端开发 :dev2,after des3, 20d 测试 :test1, after dev1, 10d

3.2.5 类图

classDiagram
%% 创建一个简单的类
class Dog {
	+string name
	+int age
	+bark()
	-eat()
}

成员前的符号+-#分别表示，public, private, protected。

mermaid支持类之间的多种关系箭头。

继承关系 子类 --|> 父类
关联 -->
依赖 ..>
组合 *-- 强依赖（部分随整体消亡）
聚合 o-- 弱依赖（部分可独立存在）

注：类图示例：

classDiagram class Animal { +eat() +sleep() } class Dog { +bark() } class Cat { +meow() } Dog --|> Animal Cat --|> Animal

3.2.6 状态图

简单的基本状态
stateDiagram-v2
    [*] --> Idle
    Idle --> Running
    Running --> [*]

[*] 表示起始或者结束点。

带标签的状态图
stateDiagram-v2
    [*] --> Idle
    Idle --> Running : start button pressed
    Running --> Paused : pause button pressed
    Paused --> Running : resume
    Running --> [*] : stop

状态分支
stateDiagram-v2
    [*] --> Check
    Check --> [H]
    [H] --> Approved : ok
    [H] --> Rejected : fail
    
复合状态图
stateDiagram-v2
    [*] --> Active
    state Active {
        [*] --> Working
        Working --> Waiting : task done
        Waiting --> Working : new task
    }
    Active --> Inactive : power off
    Inactive --> Active : power on
    
给某个节点添加文字描述
stateDiagram-v2
    state "Waiting\n(等待中)" as W
    [*] --> W
    W --> Running : start
    Running --> [*]

注：示例：

stateDiagram-v2 [*] --> Idle Idle --> Running : start Running --> Paused : pause Paused --> Running : resume Running --> Error : failure Error --> [*] state Running { [*] --> Init Init --> Process : ready Process --> Done : finish Done --> [*] }

本文为markdown常用语法的总结，不能说完整，只是我平时最常用的一些功能，后续会持续补充。文中一些示例来源于ChatGPT, DeepSeek等。