Markdown和Mermaid常用语法，如何快速掌握？

Markdown常用语法 目录 一、核心语法 1.1 标题 1.2 代码块 1.3 粗体，斜体等 1.4 图片和链接 1.5 表格 二、其他常用语法 2.1 删除线 2.2 任务列表 2.3 添加脚注 2.4 表格格式和格内换行 2.5 目录生成 & 锚点链接 2.6 一些常用图标 2.7 latex公式 2.8 高级引用和提示框 三、mermaid图 3.1 简介 3.2 基础用法 3.2.1 流程图 3.2.2 序列图 3.2.3 饼图 3.2.4 甘特图 3.2.5 类图 3.2.6 状态图 总结 一、核心语法 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等。