多媒体功能演示

这篇文章演示了 Hexo 博客中的三种多媒体功能：视频播放、Mermaid 图表和 Graphviz 图表。

1. 视频播放功能

使用 DPlayer 插件可以嵌入视频：

2. Mermaid 流程图

graph TD    A[开始] --> B{是否登录?}    B -->|是| C[显示主页]    B -->|否| D[跳转登录页]    D --> E[用户输入账号密码]    E --> F{验证成功?}    F -->|是| C    F -->|否| G[显示错误信息]    G --> E    C --> H[结束]

3. Mermaid 时序图

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

4. Graphviz 图表

"用户请求" -> "负载均衡器";"负载均衡器" -> "Web服务器1";"负载均衡器" -> "Web服务器2";"Web服务器1" -> "数据库";"Web服务器2" -> "数据库";"数据库" -> "缓存";

5. 复杂的 Graphviz 架构图

subgraph cluster_frontend {    label="前端层";    style=filled;    color=lightgrey;    React [fillcolor=lightblue];    Vue [fillcolor=lightblue];}subgraph cluster_backend {    label="后端层";    style=filled;    color=lightgreen;    API [fillcolor=yellow];    Auth [fillcolor=yellow];}subgraph cluster_data {    label="数据层";    style=filled;    color=lightcoral;    MySQL [fillcolor=orange];    Redis [fillcolor=orange];}React -> API;Vue -> API;API -> Auth;API -> MySQL;API -> Redis;

使用说明

视频使用方法

{% dplayer "url=视频地址" "pic=封面图片" "loop=false" %}

Mermaid 使用方法

<pre class="mermaid">graph TD    A --> B`</pre>### Graphviz 使用方法