目录

概述

一、流程图

二、UML时序图

三、甘特图

四、类图

五、状态图

六、饼图

七、导出

八、总结

概述

Typora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。

Typora删除了预览窗口，以及所有其他不必要的干扰。取而代之的是实时预览。

Markdown的语法因不同的解析器或编辑器而异，Typora使用的是GitHub Flavored Markdown。

官网链接

有一位大佬汇总了学习教程：链接

B站介绍：链接

Typora内置了对Mermaid的支持，才阔以画各种图。

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=>operation: 处理框

cond=>condition: 判断框(是或否?)

sub1=>subroutine: 子流程

io=>inputoutput: 输入输出框

e=>end: 结束框

st->op->cond

cond(yes)->io->e

cond(no)->sub1(right)->op

图片

图片

4）、标准（横向）st=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st(right)->op(right)->condcond(yes)->io(bottom)->econd(no)->sub1(right)->op

图片

二、UML时序图

先输入```mermaid (或）sequence

->> 代表实线箭头，–>> 则代表虚线箭头

-> 直线，–>虚线

使用sequenceDiagram 则不使用``sequence

1）、简单

sequenceDiagram

客户->>银行柜台: 我要存钱

银行柜台->>后台: 改一下这个账户数字哦

后台->>银行柜台: 账户的数字改完了，明天起息

银行柜台->>客户: 好了，给你回单 ，下一位

图片

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

图片

2）、复杂

sequenceDiagram

title:标题：复杂使用

对象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 D

note right of D:没人陪我

图片

sequenceDiagram participant A participant B participant C A->>C:hello loop health C->>C:no end Note right of C:you should eat

doctor B-->>A:nice C->>B:how are you? B-->>C:great

图片

sequenceDiagram

participant A

participant B

participant C

participant D

title:'练习时序图'

A->>B:request

B->>B:verify sign

B->>C:123

C-->>B:321

B->>C:456

C->>C:code

C->>D:789

D-->>B:987

alt yes

Note right of B:yes的结果

else no

B-->>D:login

D-->>B:login success

end

B->>B:加密

B-->>A:return

图片

图片

sequenceDiagram title:时序图例子 Alice->>Alice:自言自语 Alice-->>John:hello john, %% over 可以用于单独一个角色上，也可以用于相邻的两个角色间： note over Alice,John:friend %% loop 后跟循环体说明文字 loop healthcheck John-->>John:Fight agaist hypochondra end note right of John: Rational John-->>Alice:Great! John->>Bob:How about you? %% 控制焦点：用来表示时序图中对象执行某个操作的一段时间 %% activate 角色名：表示激活控制焦点 activate Bob Bob-->>John:Jolly good! %% deactivate 角色名 表示控制焦点结束deactivate BobAlice->>+Bob: Hello Bob, how are you?rect rgb(175, 255, 212)alt is sickBob-->>Alice: Not so good :(else is wellBob-->>Alice: Feeling fresh like a daisyendopt Extra responseBob-->>Alice: Thanks for askingendendloop communicatingAlice->>+John: asking some questionsJohn-->>-Alice: answerendpar Alice to JohnAlice->>John: Byeand Alice to BobAlice->>Bob: Byeend Alice-xJohn: 这是一个异步调用Alice--xBob: 这是一个异步调用

图片

3）、标准

%% 时序图例子,-> 直线，-->虚线，->>实线箭头

sequenceDiagram

participant 张三

participant 李四

张三->王五: 王五你好吗？

loop 健康检查

王五->王五: 与疾病战斗

end

Note right of 王五: 合理 食物

看医生...

李四-->>张三: 很好!

王五->李四: 你怎么样?

李四-->王五: 很好!A

图片

三、甘特图

%% 语法示例ganttdateFormat  YYYY-MM-DDtitle 软件开发甘特图section 设计需求                      :done,    des1, 2014-01-06,2014-01-08原型                      :active,  des2, 2014-01-09, 3dUI设计                     :         des3, after des2, 5d未来任务                     :         des4, after des3, 5dsection 开发学习准备理解需求                      :crit, done, 2014-01-06,24h设计框架                             :crit, done, after des2, 2d开发                                 :crit, active, 3d未来任务                              :crit, 5d耍                                   :2dsection 测试功能测试                              :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[*] --> s1s1 --> [*]

图片

六、饼图

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画图&spm=1000.2123.3001.4430

2）快速学习时序图：时序图简介、画法及实例

http://www.woshipm.com/ucd/607593.html

3）UML时序图(Sequence Diagram)学习笔记https://blog.csdn.net/fly_zxy/article/details/80911942

4）开源 画图_使用 Typora 画图（类图、流程图、时序图）https://blog.csdn.net/weixin_26850069/article/details/112702748

八、总结

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