使用Typora画流程图、时序图、顺序图、甘特图、等图详解

ゞ浴缸里的玫瑰 2022-10-09 03:29 2126阅读 0赞

**目录**

概述

一、流程图

二、UML时序图

三、甘特图

四、类图

五、状态图

六、饼图

七、导出

八、总结

--------------------

# 概述 #

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

*  Typora删除了预览窗口，以及所有其他不必要的干扰。取而代之的是实时预览。
 *  Markdown的语法因不同的解析器或编辑器而异，Typora使用的是[GitHub Flavored Markdown][]。

官网[链接][Link 1]  
有一位大佬汇总了学习教程：[链接][Link 2]  
B站介绍：[链接][Link 3]

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

使用方法：  
首先在 Typora 中，输入 **\`\`\`mermaid** 然后敲击回车，即可初始化一张空白图。  
上面的三个**\`\`\`也就是esc健对应下面的健。**  
在空白处输入下面的源码即可，按照mermaid语法格式来操作即可。

## 一、流程图 ##

1）、竖向（TD 表示从上到下）

graph TD;
        A-->B;
        A-->C;
        B-->D;
        D-->E;
        D-->F;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70][]  
2）、横向（LR 表示从左到右）

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 1][]

3）、标准（竖向）  
[ ][Link 3]先输入\`\`\`flow 然后敲击回车，在输入栏，输入下面的语法即可。![20210623213601908.png][]

st=>start: 开始框
    
    op=>operation: 处理框
    
    cond=>condition: 判断框(是或否?)
    
    sub1=>subroutine: 子流程
    
    io=>inputoutput: 输入输出框
    
    e=>end: 结束框
    
    st->op->cond
    
    cond(yes)->io->e
    
    cond(no)->sub1(right)->op

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 2][]  
4）、标准（横向）

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 3][]

## 二、UML时序图    ##

*  先输入\`\`\`mermaid (或）sequence
 *  \->> 代表实线箭头，–>> 则代表虚线箭头
 *  \-> 直线，–>虚线
 *  使用sequenceDiagram 则不使用\`\`sequence

1）、简单

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 5][]  
  
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:没人陪我

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 6][]

sequenceDiagram
    		participant A
    		participant B
    		participant C
    		A->>C:hello
    		loop health
    			C->>C:no 
    		end
    		Note right of C:you should eat<br/> doctor
    		B-->>A:nice
    		C->>B:how are you?
    		B-->>C:great

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 7][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 8][]

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 Bob
        
        Alice->>+Bob: Hello Bob, how are you?
        
        rect rgb(175, 255, 212)
        alt is sick
        Bob-->>Alice: Not so good :(
        else is well
        Bob-->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
        Bob-->>Alice: Thanks for asking
        end
        end
        
        loop communicating
            Alice->>+John: asking some questions
            John-->>-Alice: answer 
        end
        
        par Alice to John
          Alice->>John: Bye
        and Alice to Bob
          Alice->>Bob: Bye
        end
    		Alice-xJohn: 这是一个异步调用
        Alice--xBob: 这是一个异步调用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 9][]  
  
3）、标准

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
      sequenceDiagram
        participant 张三
        participant 李四
        张三->王五: 王五你好吗？
        loop 健康检查
            王五->王五: 与疾病战斗
        end
        Note right of 王五: 合理 食物 <br/>看医生...
        李四-->>张三: 很好!
        王五->李四: 你怎么样?
        李四-->王五: 很好!A

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 10][]

## 三、甘特图    ##

%% 语法示例
            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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 11][]

## 四、类图 ##

语法解释：`<|--` 表示继承，`+` 表示 `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()
          }

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 12][] ##

## 五、**状态图** ##

stateDiagram
        [*] --> s1
        s1 --> [*]

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 13][] ##

## **六、饼图** ##

pie
        title Key elements in Product X
        "Calcium" : 42.96
        "Potassium" : 50.05
        "Magnesium" : 10.01
        "Iron" :  5

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 14][]

## **七、****导出** ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 15][]

参考文章：

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][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][http_www.woshipm.com_ucd_607593.html]  
3）UML时序图(Sequence Diagram)学习笔记[https://blog.csdn.net/fly\_zxy/article/details/80911942][https_blog.csdn.net_fly_zxy_article_details_80911942]  
4）开源 画图\_使用 Typora 画图（类图、流程图、时序图）[https://blog.csdn.net/weixin\_26850069/article/details/112702748][https_blog.csdn.net_weixin_26850069_article_details_112702748]

## 八、总结 ##

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

[GitHub Flavored Markdown]: https://help.github.com/articles/basic-writing-and-formatting-syntax/
[Link 1]: https://www.typora.io/
[Link 2]: https://blog.csdn.net/weixin_44075537/article/details/109921965
[Link 3]: https://www.bilibili.com/video/av969722799/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70]: /images/20221005/fea3b77e59f44615974426e432516e8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 1]: /images/20221005/75048547867f42a28735e1686cb63e1b.png
[20210623213601908.png]: https://img-blog.csdnimg.cn/20210623213601908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 2]: /images/20221005/0649a4271a684b7bbe71775bf6321c45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 3]: /images/20221005/994bcd3c0c534c70b709d75258bc5553.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 4]: /images/20221005/f286ba2119574a8c8d8ef0ade9e1dd67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 5]: /images/20221005/e6f5fa009f834518937015784b3cd8b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 6]: /images/20221005/fd9105964dca45d18e6e1a0c90682894.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 7]: /images/20221005/eca7be7a3e794aa8a7ebce3f4a950b24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 8]: /images/20221005/794255d491d2418aac1f7688e43ac79a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 9]: /images/20221005/ed08becb391a489fb032e3d8abd35fc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 10]: /images/20221005/c349d1662a3c4ae29cfe888fa42b481e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 11]: /images/20221005/2e582be22b1142a6a520a083b61e4ce2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 12]: /images/20221005/962c110abb6d4969b12a428b7f11b6ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 13]: /images/20221005/5cd2992c6cbd4563b963d47452dc43b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 14]: /images/20221005/a1974f0fde664651a9a804125178a487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MDc1NjEy_size_16_color_FFFFFF_t_70 15]: /images/20221005/1373a90851ff4fb4abbfac30f0d61bfb.png
[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]: 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
[http_www.woshipm.com_ucd_607593.html]: http://www.woshipm.com/ucd/607593.html
[https_blog.csdn.net_fly_zxy_article_details_80911942]: https://blog.csdn.net/fly_zxy/article/details/80911942
[https_blog.csdn.net_weixin_26850069_article_details_112702748]: https://blog.csdn.net/weixin_26850069/article/details/112702748