mermaid 美人鱼【本质：开源的 JS 库】

mermaid（已经是 MarkDown 生态的一部分了）

Github：https://github.com/mermaid-js/mermaid
教程：https://mermaid.js.org/intro/

实时编辑器

时序图

结合教程来实际操作即可：

sequenceDiagram
    %% Alice->>+John: Hello John, how are you?
    %% Alice->>+John: John, can you hear me?
    %% John-->>-Alice: Hi Alice, I can hear you!
    %% John-->>-Alice: I feel great!
    actor User
    participant display
    participant container
    participant pipeline
    participant popup组件
    User->>+container: 正常态进入页面
    container->>-display: 注册 FoldStatusChange 监听
    container->>+pipeline: 初始化
    pipeline->>+popup组件: 创建
    popup组件->>-pipeline: OnAttachToFrameNode中注册监听
    User->>+display: 折叠手机
    display->>container: 回调监听
    container->>+pipeline: 回调监听
    pipeline->>-pipeline: 等待 300ms
    pipeline->>popup组件: 回调监听
    pipeline->>-display: 获取折叠状态
    display->>-pipeline: 获取折叠状态
    pipeline->>pipeline: 等待 300ms
    %% User->>+display: 正常态进入页面
    %% User->>+display: 正常态进入页面
    User->>+display: 展开手机
    display->>container: 回调监听
    container->>pipeline: 回调监听
    pipeline->>popup组件: 回调监听
    popup组件->>popup组件: 标脏

   
   

    %% pipeline->>+popup组件: 创建
    %% Container->>+pipeline: 正常态进入页面



    %% %% John-->>-Alice: Hi Alice, I can hear you!
    %% %% John-->>-Alice: I feel great!
    %% popup组件-->>-pipeline: OnAttachToFrameNode中注册监听

类图

(+、-) 描述类的属性的可见性：UML中，可见性分为4级

1. public 公用的 ：用+ 前缀表示 ，该属性对所有类可见
2. protected 受保护的：用 # 前缀表示，对该类的子孙可见
3. private 私有的：用- 前缀表示，只对该类本身可见
4. package 包的：用 ~ 前缀表示，只对同一包声明的其他类可见