Markdown 结合 Mermaid 图表语法来绘制类似的时序图

333 阅读1分钟
```mermaid
sequenceDiagram
    autonumber
    participant Process1 as 进程一
    participant Process2 as 进程二
    participant Cloud as 阿里云

    Process1 ->> Process1: 准备开始推流
    loop 循环
        Process1 ->> Process1: 截屏<br>写 MemoryFile
        Process1 ->> Process2: AIDL 调用,通知有新的视频帧
        Process1 ->> Process1: 画面裁剪
        Process1 ->> Process1: 推第一路流 A
    end
    Process1 ->> Process2: bindService,启动进程二

    Process2 ->> Process2: 读取 MemoryFile,加入待处理帧队列
    Process2 ->> Process2: 画面裁剪<br>推第一路流 B<br>推第二路流 A
    Process1 ->> Process1: unbindService,结束进程一
    Process1 ->> Process1: 准备结束推流
sequenceDiagram
    autonumber
    participant Process1 as 进程一
    participant Process2 as 进程二
    participant Cloud as 阿里云

    Process1 ->> Process1: 准备开始推流
    loop 循环
        Process1 ->> Process1: 截屏<br>写 MemoryFile
        Process1 ->> Process2: AIDL 调用,通知有新的视频帧
        Process1 ->> Process1: 画面裁剪
        Process1 ->> Process1: 推第一路流 A
    end
    Process1 ->> Process2: bindService,启动进程二

    Process2 ->> Process2: 读取 MemoryFile,加入待处理帧队列
    Process2 ->> Process2: 画面裁剪<br>推第一路流 B<br>推第二路流 A
    Process1 ->> Process1: unbindService,结束进程一
    Process1 ->> Process1: 准备结束推流

%% 更改参与者背景颜色
style Process1 fill:#C3DAF9,stroke:#000,stroke-width:1px
style Process2 fill:#DAF9C3,stroke:#000,stroke-width:1px
style Cloud fill:#F9E6C3,stroke:#000,stroke-width:1px

%% 更改箭头颜色
linkStyle default stroke:#FF7F0E,stroke-width:2px

解释

  • style 指令可以用来设置参与者(participant)的填充颜色(fill)、边框颜色(stroke)和边框宽度(stroke-width)。
  • linkStyle default 可以设置默认的箭头颜色(stroke)和箭头宽度(stroke-width)。
  • autonumber 会自动为每个步骤编号,方便查看。

你可以根据需要替换颜色代码来达到不同的效果,例如 #C3DAF9 是浅蓝色,可以调整为你想要的颜色。