在做项目之前，一定要画流程图，一个好的流程图，可以帮你在设计代码的时候少走弯路，对于画流程图，我想对于每一个程序员，是必备的技能吧，对于初次做项目的我而言，深刻的认识到了画流程图是如此的重要，我是用yed绘制流程图，我将分享一下yed流程图的使用。
 yed工具是操作极其符合直觉（有基础的鼠标和键盘操作经验者），充分利用了鼠标的左键，右键，滚轮和常见键盘快捷键，让绘图的过程尽可能少去点一些工具栏按钮，少一些编辑/选取模式的切换。
 


 
yed和流程图
 
1 yed工具的安装
2 yed的软件界面
3 流程图的基本知识
   
3.1流程图的定义
3.2流程图的符号
3.3流程图的分类
3.4流程图设计原则
4 用yed工具绘制一个简单的流程图
 

 
1 yed工具的安装
 
https://www.yworks.com/downloads#yEd
 它可以支持的版本：Windows/Linux/Mac…
 windows下载之后的图标
 
2 yed的软件界面
 

 导航视窗：「用来调整编辑器显示的位置和缩放工作区域，结合工具栏的一系列放大镜图标一起来显示和聚焦对象。
 相邻对象：是个动态视窗，当你选中某个对象时，视窗中会显示与这个对象相关联的其他对象。
 组织视窗：用来罗列对象和群组，在这里也可以快速的给对象修改命名。
 
模具：提供了不少模具的选择，双击某个形状或线型后，形状会被蓝色高亮并锁定，此后你在画布中随处点击都能如同图章一样直接添加带连续编号的这个形状，而锁定的线型会被作为默认的连接线。
 
参数设置：的部分看上去不那么友好，在这里可以为选中的对象设定位置、大小、填充颜色、线型、文本标签字体、大小、位置、颜色等等，如果你觉得窗口的位置太狭小，可以直接拖动设置视窗和模具并列来获得更多的显示空间。
 
在学习画图之前我们先了解一下，流程图的知识吧！
 
3 流程图的基本知识
 
3.1流程图的定义
 
流程图是一种很有用的示意图，说明为获得一个问题的解决方案需执行的行为和操作顺序。通常在配置计算机解决方案的早期阶段需要绘制流程图。流程图能促进程序员和业务人员之间的沟通。在问题的编程中流程图起到非常关键的作用，并在理解复杂和冗长问题的逻辑时非常有用。流程图一绘制好，用任何高级语言编写程序就相当容易了。我们经常看到流程图给人们解释程序的时候十分有帮助。因此可以说，流程图是更好地给复杂程序存档的必需品。
 
3.2流程图的符号
 
在这里我只讲一下我们经常用到的一些流程图符号。
 
（1）开始与结束标志，是个椭圆符号。用来表示一个过程的开始或结束。“开始”和“结束”写在符号内。
 
 （2）活动标志，是个矩形符号，用来表示在过程的一个单独的步骤。活动的简要说明写在矩形内。
 
 （3）判断标志，是一个菱形符号。用来表示过程中的一项判定或一个分岔点，判定或分岔的说明写在菱形内，常以问题的形式出现。对该问题的回答决定了判定符号之外引出的路线，每条路线标上相应的回答。
 
 （4）流线标志。用来表示步骤在顺序中的进展。流线的箭头表示一个过程的流程方向。
 
 （5）文件标志。用来表示属于该过程的书面信息。文件的题目或说明写在符号内。
 
 （6）连接标志，是个圆圈符号。用来表示流程图的待续。圈内有一个字母或数字。在相互联系的流程图内，连接符号使用同样的字母和数字，以表示各个过程是如何连接的。
 
 
3.3流程图的分类
 
流程图类型
功能
程序流程图
程序流程图表示程序中的操作顺序。
数据流程图
数据流程图表示求解某一问题的数据通路，同时规定了处理的主要阶段和所用的各种数据媒体。
系统流程图
系统流程图表示系统的操作控制和数据流。
3.4流程图设计原则
 
1.制作流程图时，应按逻辑顺序列出所有要求。
 2.流程图应该清晰、工整、易于理解。不要有含糊的地方。
 3.常用的流程图方向是从左到右或者从上到下。
 4.流程符号应该只有1条连接线连接下一个图形。
 5.应该只有1条连接线输入一个判定符号，但是有2到3根连接线输出判定符号，每根代表1个可能的决策。
 6.仅有一根连接线用于连接结束符号。
 7.在标准流程图符号内简要说明符号代表的内容。必要时，你可以用注释符号更清晰地描述数据或计算步骤。
 8.如果流程图很复杂，最好用连接符号以减少连接线的数量。为了得到更有效的流程图，更好地沟通信息，尽量避免连接线交叉。
 9.确保流程图有一个逻辑的起点和终点。
 
4 用yed工具绘制一个简单的流程图
 
我们将以1加到100的编程来绘画一个流程图，成品图如下：
 
 1.我们从右边的模具选择节点，我们选择一个椭圆节点，双击它，然后用鼠标把它拉到绘制流图的画板处。
 
 2.我们可以在画板中点击椭圆图形，然后在右下角参数设置中，修改它的参数。
 
 3.然后依次把所有节点都排列成初始模型，注意，可以多利用复制粘贴，能够保留节点的样式，也可以用Shift选中多个节点统一设置颜色等。
 
 4.下面开始连线，首先在右上的面板选择线条类型’Edge Types‘为第二种。
 然后先按下源节点的中心不放，再拖动出来，就可以把线条拖出来，当看到线条之后就可以释放鼠标了，再指向目标节点，此时节点四周会出现句柄，再点击一次可以完成连线。(如果想放弃绘制到一半的线条，可以点击ESC)
 
 5.如果大家按照我上面画的时候，当画分支结构的时候，会连不上那条线，因为yed只支持连接两个节点的线，而不支持指向线条的线，但是在标准流程图上是有明确的要求的，所以我们需要一个透明的节点来’伪‘一下。（很简单就是选一个节点，把它的形状拉到最小，然后放在那个线上面就ok了）。
 
绘制完之后，我们需要保存，保存类型为一下的格式，如果我们需要保存图片该怎么办那，好了，看我操作。
 

 我们点击左上角的file->Export a document(快捷键ctrl+E)，这里面就有图片的格式了，你需要什么格式的就按什么格式保存哦
 
 
就这样我们的成品就完成了，是不是yed工具画流程图很方便哦。如果觉得这篇博客帮助到你了，不妨给我点个赞，再加个关注嘿嘿！

在我们解题或者向别人展示我们的算法或者思路时候，流程图是一种非常好的方式，具有以下优点：
 
（1）画法简单，容易上手
 
（2）逻辑性强，结构清晰
 
（3）便于描述，容易理解
 
作为一名优秀的程序员，画起流程图来，那肯定是得心应手。下面，在使用流程图绘制软件中，我发现了以下几种比较好用的免费绘制工具。
 思维导图也挺好用的：思维导图神器
 
代码转换流程图
 
上次我们算法课要交报告了，每个题都要画一个流程图，时间实在紧迫，我就想着有没有一种工具能将代码直接转换为流程图。
 visustin 是一款输入代码可以直接转换成流程图的软件，支持43种语言，包括了C语言、Java、Python等常用语言，也有Go、Shell、PHP等受众比较小的语言。直接将代码复制粘贴，一秒生成流程图！
 这个软件是收费的，不过官方也提供了一个demo版本免费够供用户使用，对我们平时的需求来说，已经够了：
 下载地址：demo版本下载地址
 
 进入链接之后，直接下载demo版本，根据提示进行安装就可以了。
 然后运行软件，选择代码的语言类型：
 

 然后，选择需要生成流程图函数，如果不进行选择，则默认全部生成：
 
 然后，直接点击画图，就生成流程图了：
 
 然后，一份流程图就生成了：
 
 直接双击文本框，就可以改流程图的内容，然后选择尺寸大小或者适应屏幕，我一般是截屏然后自己裁一下就直接用了。
 
在线流程图绘制软件
 
Processon是我使用了好久的流程图绘制软件，其实他还可以画思维导图、结构图等等，我用它来画流程图比较多。
 首页链接：Processon流程图官方首页
 
 注册登录账户之后，在右上角选择个人文件，就可以来到我们的文件中心了。
 然后，选择新建，再选择自己所需要的图的类型就可以了。
 
 Process的使用方法是非常容易的，傻瓜操作，直接根据你想要的流程进行拖拽编辑即可。
 
 支持多种下载格式，根据需要进行选择，没有水印，这一点非常好。
 
 非会员只能有9个个人文件，但是我觉得并不影响使用，每次完成绘制之后保存到本地再删除就可以了，如果需要同时绘制很多图或者后期进行修改的话，开个会员就ok。其他的就不用开会员啦，免费版已经很好用了，功能很强大了！
 
还有很多好用的软件，比如迅捷流程图等，上面两个是我用下来综合比较各方面原因，个人所推荐的，因为第一个所支持的语言真的很多，第二个是没有地点限制，这就是在线编辑的好处啦！

目录
 
 
概述
 
一、流程图
 
二、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)->cond

cond(yes)->io(bottom)->e

cond(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<br/> 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 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: 这是一个异步调用
 


 3）、标准
 
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!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/fly_zxy/article/details/80911942
 4）开源 画图_使用 Typora 画图（类图、流程图、时序图）https://blog.csdn.net/weixin_26850069/article/details/112702748
 
八、总结
 
     好了，介绍到此为止，做个笔录，有这个神器以后画图就方便很多了。

 
 
之前我写博客都是使用上传图片的方式来展示流程图，这种方法比较麻烦，还要自己画，考虑到markdown 语法非常流行，越来越多的人使用 markdown 来写csdn 博客，所以我想能不能用 markdown 快速的绘制流程图呢？答案是肯定的，本篇博客讲述如何使用markdown 语法来进行流程图绘制，语法比较简单，画出的流程图也比较好看。
 
 
使用mermaid 绘制流程图
 
一般语法结果如下所示：
 ```mermaid
 graph 方向
 内容 ……
 ```
 
方向
 
方向一共有4个，格式为从哪到哪，每一个方向由两个大写字母表示，大写字母是四个基本方向： 上：Top，下：Bottom，左：Left，右：Right 的首字母。
 
从上到下：TB （有时候也写作 TD）
从下到上：BT
从左到右：LR
从右到左：RL
 
内容
 
流程图主要由以下几种元素组成：
 
基本节点图形
连接线
连接线上的注释
 
下面将分别介绍
 
1.基本节点图像
 
基本节点图像由两部分组成，一个唯一的id，用于标记节点的身份；节点内的注释内容。基本图像如图所示
 

 
 
分别表示如下：
 
矩形的情况：id1[矩形]
圆角矩形的情况：id2(圆角矩形)
不对称矩形情况：id3>不对称矩形]
菱形情况：id4{菱形}
圆形情况：id5((圆形))
 
源代码：
 
```mermaid
graph TB
    id[矩形]
    id4(圆角矩形)
    id3>不对称矩形]
    id1{菱形}
    id2((圆形))
```\
 
2.连接线
 
A --> B：A带箭头指向B
A — B： A不带箭头指向B
A -.- B： A用虚线指向B
A -.-> B： A用带箭头的虚线指向B
A ==> B： A用加粗的箭头指向B
 
示意图如下：
 

 
 
源代码如下
 
```mermaid
graph TD
    A[A] --> B[B] 
    A1[A] --- B1[B] 
    A4[A] -.- B4[B] 
    A5[A] -.-> B5[B] 
    A7[A] ==> B7[B] 
```\
复制的时候去掉反斜杠
 
3.连接线上的注释
 
连接线上的注释其实就是在中间的位置加上注释
 
A – 描述 — B ：A不带箭头指向B并在中间加上文字描述
A – 描述 --> B： A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B ：A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B ：A用加粗的箭头指向B并在中间加上文字描述
 
示意图如下：
 

 
 
源代码如下：
 
```mermaid
graph TB
    A[A] -- 描述 --- B[B] 
    A2[A] -- 描述 --> B2[B] 
    A3[A] -. 描述 .-> B3[B] 
    A4[A] == 描述 =\=> B4[B] 
```\
 
参考样例
 
以下参考样例来自 菜鸟教程，原文地址
 
1.标准流程图
 

 
 
实现代码：
 
```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```\
 
2. 标准流程图（横向，注意看代码不同点）
 

 
 
实现代码：
 
```mermaid
flowchat
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
```\
 
3. UML时序图
 

 
 
实现代码：
 
```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？
```\
 
4.UML 时序图（复杂版）
 

 
 
实现代码：
 
```mermaid
sequenceDiagram
Title: 标题：复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```\
 
5.UML 标准时序图
 

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

 
 
实现代码：
 
```mermaid
        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
```\