Markdown笔记3

序列图(sequence diagram)

概述
sequenceDiagram 
	[参与者1][消息线][参与者2]:消息体
    ...

sequenceDiagram 为每幅时序图的固定开头

sequenceDiagram
		Title: 买炸鸡
    救救->>炸鸡店小哥: 还有炸鸡吗?
    炸鸡店小哥-->>救救: 没有,要现炸


救救 炸鸡店小哥 还有炸鸡吗? 没有,要现炸 救救 炸鸡店小哥 买炸鸡
参与者(participant)

传统时序图概念中参与者有角色和类对象之分,但这里我们不做此区分,用参与者表示一切参与交互的事物,可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3

participant <参与者名称> 声明参与者,语句次序即为参与者横向排列次序。

消息线
类型描述
->无箭头的实线
–>无箭头的虚线
->>有箭头的实线(主动发出消息)
–->>有箭头的虚线(响应)
-x末端为叉的实线(表示异步)
–x末端为叉的虚线(表示异步)
处理中-激活框

从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。

在消息线末尾增加 + ,则消息接收者进入当前消息的“处理中”状态;
在消息线末尾增加 - ,则消息接收者离开当前消息的“处理中”状态。

sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    99 ->> seller: 还有炸鸡吗?
    seller -->> 99: 没有,要现炸。
    99 -x +seller:给我炸!
    seller -->> -99: 您的炸鸡好了!
救救 炸鸡店小哥 还有炸鸡吗? 没有,要现炸。 给我炸! 您的炸鸡好了! 救救 炸鸡店小哥 买炸鸡
注解(note)

语法如下

Note 位置表述 参与者: 标注文字

其中位置表述可以为

表述含义
right of右侧
left of左侧
over在当中,可以横跨多个参与者
sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    Note over 99,seller : 热爱炸鸡
    Note left of 99 : 女
    Note right of seller : 男
    99 ->> seller: 还有炸鸡吗?
    seller -->> 99: 没有,要现炸。
    99 -x +seller : 给我炸!
    seller -->> -99: 您的炸鸡好了!


救救 炸鸡店小哥 热爱炸鸡 还有炸鸡吗? 没有,要现炸。 给我炸! 您的炸鸡好了! 救救 炸鸡店小哥 买炸鸡
循环(loop)

在条件满足时,重复发出消息序列。(相当于编程语言中的 while 语句。)

sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
   
    99 ->> seller: 还有炸鸡吗?
    seller -->> 99: 没有,要现炸。
    99 ->> +seller:给我炸!
    loop 三分钟一次
        99 ->> seller : 我的炸鸡好了吗?
        seller -->> 99 : 正在炸
    end
    seller -->> -99: 您的炸鸡好了!
救救 炸鸡店小哥 还有炸鸡吗? 没有,要现炸。 给我炸! 我的炸鸡好了吗? 正在炸 loop [三分钟一次] 您的炸鸡好了! 救救 炸鸡店小哥 买炸鸡
选择(alt)

在多个条件中作出判断,每个条件将对应不同的消息序列。(相当于 if 及 else if 语句。)

sequenceDiagram    
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    99 ->> seller : 现在就多少只炸好的炸鸡?
    seller -->> 99 : 可卖的炸鸡数
    
    alt 可卖的炸鸡数 > 3
        99 ->> seller : 买三只!
    else 1 < 可卖的炸鸡数 < 3
        99 ->> seller : 有多少买多少
    else 可卖的炸鸡数 < 1
        99 ->> seller : 那我明天再来
    end

    seller -->> 99 : 欢迎下次光临
救救 炸鸡店小哥 现在就多少只炸好的炸鸡? 可卖的炸鸡数 买三只! 有多少买多少 那我明天再来 alt [可卖的炸鸡数 > 3] [1 < 可卖的炸鸡数 < 3] [可卖的炸鸡数 < 1] 欢迎下次光临 救救 炸鸡店小哥 买炸鸡
可选(opt)

在某条件满足时执行消息序列,否则不执行。相当于单个分支的 if 语句。

sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    99 ->> seller : 买炸鸡
    opt 全都卖完了
        seller -->> 99 : 下次再来
    end
救救 炸鸡店小哥 买炸鸡 下次再来 opt [全都卖完了] 救救 炸鸡店小哥 买炸鸡
并行(Par)

将消息序列分成多个片段,这些片段并行执行。

sequenceDiagram
   participant 99 as 救救
   participant seller as 炸鸡店小哥
   
    99 ->> seller : 一个炸鸡,一杯可乐!

    par 并行执行
        seller ->> seller : 装可乐
    and
        seller ->> seller : 炸炸鸡
    end

    seller -->> 99 : 您的炸鸡好了!
救救 炸鸡店小哥 一个炸鸡,一杯可乐! 装可乐 炸炸鸡 par [并行执行] 您的炸鸡好了! 救救 炸鸡店小哥 买炸鸡

饼图(Pie)

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150 
47% 10% 18% 24% Pie Chart Dogs Cats Rats panda

Typora支持mermaid的官方链接

甘特图(gantt)

  title 标题
	dateFormat 日期格式
	section 部分名
	任务名:参数一, 参数二, 参数三, 参数四,参数五
 
  //参数一:crit(是否重要,红框框) 或者 不填
  //参数二:done(已完成)、active(正在进行) 或者 不填(表示为待完成状态)
  //参数三:取小名 或者 不填
  //参数四:任务开始时间
  //参数五:任务结束时间

官方教程

gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值