使用markdonwn编辑器typora制作流程图/Typora tutorial: Draw flow chart with markdown

in #utopian-io7 years ago


Summary:
Flow chart can clearly tell us the process of a thing. In many cases, if we can use one flow chart to explain one thing, it will be easier for others to understand it.Below I'll show how to use typora to draw the flow chart.
流程图可以很清晰地向我们展示一件事的过程,在多数情况下,如果我们配合流程图来阐述一件事,将会更容易让人理解。下面我将教大家如何使用typora绘制流程图。

1.对typora进行设置,让它支持我们即将使用的flow语句

typora集成了很多模块,因此其实不仅仅可以绘制流程图,在我们绘制流程图之前,先确认下识别flow语句的引擎有没有打开,不然没办法绘制流程图。点击“file”文件菜单,选择“preferences”个人选项。在弹出的窗口,找到Syntax support(语法支持),勾选 Diagrams(图表).

360截图20171227205310975.jpg

2.flow 语句

首先我们先看下flow语句的基本格式,如下:

```flow      //开头是英文状态下的三个顿号
st=>start: 开始
op=>operation: 我的操作
cond=>condition: 确认?
e=>end:结束
//通常我们上面是写流程图主体,下面是写流程
st->op->cond
cond(是)->e
cond(否)->op
``` // 结尾  就像html语句一样 <html>……</html>

360截图20171227211242476.jpg

格式讲解:

st=>start: 开始

st是变量名,start等于是他的属性,后面文字是自定义。其余以此类推。

常用模块

//开始 start

 st=>start: 开始

//结束 end

 e=>end: 结束

//普通操作块 opration

 op1=>opration: 第一个操作块
 op2=>opration: 第二个操作块

//判断块 condition

 cond1=>condition: 第一个判断
 cond2=>condition: 第二个判断

//输入输出块 inputoutput

 io1=>inputoutput: 输入输出块1
 io2=>inputoutput: 输入输出块2

//子任务块

 sub1=>subroutine: 子任务1
 sub2=>subroutine: 子任务2

判断和位置控制

//判断流程控制

cond1(yes)->op1  #yes 的时候回到 op1
cond1(no)->e   #no 的时候 去结束

//位置指定

cond1(no)->op2(right)->op1 //控制 op2 位置置于右边,再由op2 返回 op1 

//还可以这样 cond1(no,right)

cond1(yes)->e 

360截图20171227212636353.jpg

###流程控制
st->op1->e
//-> 作为控制流程的操作符,就是指向下一步要操作的。
//每一条都算是一条流程
// 你也可以断开写,怎么方便怎么来,如:下面两个是一样的。
//分着写

st->op1
op1->e

//合着写

st->op1->e

下面写一个utopian发布文章的流程图如下:
360截图20171227214941470.jpg
代码如下:

st=>start: 开始
op=>operation: 内容发布
op1=>operation: 回复并等等投票
cond=>condition: 审核是否通过?
cond1=>condition: 是否二次编辑
e=>end
st->op->cond
cond(yes)->op1->e
cond(no)->cond1
cond1(yes,right)->op
cond1(no)->e

如果生成的流程图,想发布到steemit上面,可以截图然后发布,虽然steemit也使用markdown编辑器,但是目前还不支持绘制流程图。

Typora will give you a seamless experience as both a reader and a writer. It removes the preview window, mode switcher, syntax symbols of markdown source code, and all other unnecessary distractions. Replace them with a real live preview feature to help you concentrate the content itself.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thank you very much.

Hey @jubi I am @utopian-io. I have just upvoted you!

Achievements

  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 57951.76
ETH 2347.51
USDT 1.00
SBD 2.36