[移动开发]MarkDown学习-流程图、时序图语法记录之（CDN业务示例）

MarkDown官网语法

官网地址

CDN原理

参考地址

支撑CDN业务的组件

flowchart BT
	subgraph disp-sys
        disp(流量调度系统) --> DNS
        disp-->302调度
        disp-->http
	end
	subgraph center
		ct(中央控制系统) --> resource(资源管理系统)
		ct(中央控制系统) --> refresh(刷新预热系统)
		ct(中央控制系统) --> conf(配置下发系统)
	end
	disp-sys -. 依赖.->center
	subgraph eagle
		eg(鹰眼系统) --> bm(业务监控)
		eg --> dashboard(业务运行面板)
	end
	eagle -. 依赖 .->disp-sys 
	eagle -. 依赖 .->center
	subgraph bigdata
		bg(大数据) --> 成本规划
        bg --> charge(计费系统)
	end
	bg -. 依赖 .->disp-sys 
	bg -. 依赖 .->center
	subgraph cache
		cc(cache缓存) --> ngx
        cc --> squid\ats
	end
	cc -. 依赖 .->disp-sys 
	cc -. 依赖 .->center

网民在请求使用cdn的应用流程简图

sequenceDiagram
	autonumber
    participant user
    participant CDN
    participant WEB
    user -->> CDN:request web site
    CDN -->> CDN: not hit
    CDN -->> WEB:request origin web site
    WEB -->> CDN:use cdn
    CDN -->> CDN:save content
    user -->> CDN:hit node
    Note over user,CDN:命中缓存
    rect rgba(11,0,225,.1)
        CDN -->> user:response content
        loop Every second
            CDN -->> user:Great!
        end
    end
    ```

```mermaid
sequenceDiagram
	autonumber
    participant user
    participant CDN
    participant WEB
    user -->> CDN:request web site
    CDN -->> CDN: not hit
    CDN -->> WEB:request origin web site
    WEB -->> CDN:use cdn
    CDN -->> CDN:save content
    user -->> CDN:hit node
    Note over user,CDN:命中缓存
    rect rgba(11,0,225,.1)
        CDN -->> user:response content
        loop Every second
            CDN -->> user:Great!
        end
    end