Markdown 与 Mermaid 常用语法
Markdown常用语法
目录
一、核心语法
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等。
浙公网安备 33010602011771号