使用markdonwn编辑器typora制作流程图/Typora tutorial: Draw flow chart with markdown
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(图表).
2.flow 语句
首先我们先看下flow语句的基本格式,如下:
```flow //开头是英文状态下的三个顿号
st=>start: 开始
op=>operation: 我的操作
cond=>condition: 确认?
e=>end:结束
//通常我们上面是写流程图主体,下面是写流程
st->op->cond
cond(是)->e
cond(否)->op
``` // 结尾 就像html语句一样 <html>……</html>
格式讲解:
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
###流程控制
st->op1->e
//-> 作为控制流程的操作符,就是指向下一步要操作的。
//每一条都算是一条流程
// 你也可以断开写,怎么方便怎么来,如:下面两个是一样的。
//分着写
st->op1
op1->e
//合着写
st->op1->e
下面写一个utopian发布文章的流程图如下:
代码如下:
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添加数学公式\ Typora tutorial :mathematical formula — Steemit
- 使用Typora快速添加markdown格式表格\ Typora tutorial :Create tables easily in MarkDown mode — Steemit
About typora
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
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you very much.
Nice post
Hey @jubi I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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