grafcet流程图,时序图例子

目录

概要

一.流程图

二. UML时序图

三.甘特图

四.类图

五.状态图

六.饼图

七.导出

八.总结

摘要Typora是一个轻量级、简洁的标记编辑器，支持即时渲染技术。 这也是与其他标记编辑器最明显的区别。 在实时渲染中，标记可以像写Word文档一样平滑，不像其他编辑器那样有编辑栏或显示栏。

Typora删除了预览窗口和所有其他不必要的干扰。 而是进行实时预览。 标记的语法因解析器和编辑器而异，Typora使用GitHub Flavored Markdown。 官方网站链接

一位伟大的人总结了学习教程。 链接

b站介绍：链接

Typora内置了对Mermaid的支持，使您可以绘制各种各样的图画。

邮件：链接

使用方法：

首先在Typora上，键入```mermaid点击回车，初始化空白图。

上面的三个```也就是esc健对应下面的健。

在空白处输入以下源代码即可，根据mermaid语法格式进行操作即可。

一.流程图

1 )、纵向) TD从上到下) ) )。

graph TD； A--B； A--C； B--D； D--E； D--F；

2 )、横向) LR从左到右) ) ) ) )。

graph LR； A[方形]--B (圆角(B--C{ (条件a ) C--|a=1|D )结果1 ) C--|a=2|e )结果2 ) ) ) ) ) ) )

3 )、标准(纵向)。

先输入flow，然后点击回车，在输入栏中输入以下语法即可。

st=start:开始对话框op=操作：处理框cond=condition:判断框(是还是否？ (sub1=subroutine:子进程io=输入输出框e=结束：结束框ST-op-cond cond (是(-io-econd )否)-subroutine :

4 )、标准(横向) )。

st=start:开始对话框op=操作：处理框cond=condition:判断框(是还是否？ (sub1=subroutine:子进程io=inputoutput:输入/输出框e=end:结束框ST(right(-op ) right )-condcond )是)-io

二. UML时序图

如果先输入` ` ` mermaid (或) sequence，则表示实线箭头，-表示虚线箭头-直线，-虚线表示序列诊断程序，则不使用` ` sequence1'，很简单

序列诊断客户-银行柜台：

我要存钱 银行柜台->>后台: 改一下这个账户数字哦 后台->>银行柜台: 账户的数字改完了，明天起息 银行柜台->>客户: 好了，给你回单 ，下一位

sequenceDiagram对象A->对象B:对象B你好吗（请求）Note right of 对象B:对象B的描述（提示）Note left of 对象A:提示对象B-->>对象A:我很好（响应）对象A->>对象B:你确定？

2）、复杂
 

sequenceDiagramtitle:标题：复杂使用对象A->>对象B:对象B你好吗（请求）Note right of 对象B:对象B的描述（提示）Note left of 对象A:提示对象B-->>对象A:我很好（响应）对象B->>对象C:你好吗？对象C-->>对象A: B找我了对象A->>对象B:你确定？note over 对象C,对象B:朋友participant Dnote right of D:没人陪我

 

sequenceDiagramparticipant Aparticipant Bparticipant CA->>C:helloloop healthC->>C:no endNote right of C:you should eat<br/> doctorB-->>A:niceC->>B:how are you?B-->>C:great

sequenceDiagramparticipant Aparticipant Bparticipant Cparticipant Dtitle:"练习时序图"A->>B:requestB->>B:verify signB->>C:123C-->>B:321B->>C:456C->>C:codeC->>D:789D-->>B:987alt yesNote right of B:yes的结果else noB-->>D:loginD-->>B:login successendB->>B:加密B-->>A:return

sequenceDiagramtitle:时序图例子迅速的红酒->>迅速的红酒:自言自语迅速的红酒-->>John:hello john,%% over 可以用于单独一个角色上，也可以用于相邻的两个角色间：note over 迅速的红酒,John:friend%% loop 后跟循环体说明文字loop healthcheckJohn-->>John:Fight agaist hypochondraendnote right of John: RationalJohn-->>迅速的红酒:Great!John->>冷艳的香菇:How about you?%% 控制焦点：用来表示时序图中对象执行某个操作的一段时间%% activate 角色名：表示激活控制焦点activate 冷艳的香菇冷艳的香菇-->>John:Jolly good!%% deactivate 角色名 表示控制焦点结束 deactivate 冷艳的香菇 迅速的红酒->>+冷艳的香菇: Hello 冷艳的香菇, how are you? rect rgb(175, 255, 212) alt is sick 冷艳的香菇-->>迅速的红酒: Not so good :( else is well 冷艳的香菇-->>迅速的红酒: Feeling fresh like a daisy end opt Extra response 冷艳的香菇-->>迅速的红酒: Thanks for asking end end loop communicating 迅速的红酒->>+John: asking some questions John-->>-迅速的红酒: answer end par 迅速的红酒 to John 迅速的红酒->>John: Bye and 迅速的红酒 to 冷艳的香菇 迅速的红酒->>冷艳的香菇: Bye end迅速的红酒-xJohn: 这是一个异步调用 迅速的红酒--x冷艳的香菇: 这是一个异步调用

3）、标准

%% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant mhdxx 单薄的小白菜 sxdqq>dqdl: dqdl你好吗？ loop 健康检查 dqdl->dqdl: 与疾病战斗 end Note right of dqdl: 合理 食物 <br/>看医生... 单薄的小白菜-->>贪玩的板栗: 很好! dqdl->单薄的小白菜: 你怎么样? 单薄的小白菜-->dqdl: 很好!A

 

三、甘特图
  %% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h

四、类图

语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。
 

classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } 五、状态图 stateDiagram [*] --> s1 s1 --> [*] 六、饼图 pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

七、导出

绘制好的图片可以选择菜单/文件/导出，导出为图片或者网页格式。在网页中图片是以 SVG 格式渲染的，你可以复制 SVG 内容，导入到 SVG 的图片编辑器中进一步操作。
导出成网页类型，再使用浏览器打开，如下所示：

参考文章：

1）使用 Typora之画图 
https://blog.csdn.net/fggsgnhz/article/details/114880830?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_v2~rank_aggregation-6-114880830.pc_agg_rank_aggregation&utm_term=Typora%E7%94%BB%E5%9B%BE&spm=1000.2123.3001.4430

2）快速学习时序图：时序图简介、画法及实例
http://www.woshipm.com/ucd/607593.html
3）UML时序图(Sequence Diagram)学习笔记https://blog.csdn.net/gjdgk_zxy/article/details/80911942
4）开源 画图_使用 Typora 画图（类图、流程图、时序图）https://blog.csdn.net/weixin_26850069/article/details/112702748

八、总结

     好了，介绍到此为止，做个笔录，有这个神器以后画图就方便很多了。