如何用python画流程图_Markdown笔记:如何画流程图「终于解决」

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」segmentfault上有一篇咨询Markdown条件判断的问题,我也顺便简单学习了一下Markdown的流程图语法。还好,SF支持流程图,貌似采用的是flowchart.js。Flowchart.js仅需几行代码即可在Web上完成流程图的构建。可以从文字表述中画出简单的SVG流程图,也可以画出彩色的图表。DrawssimpleSVGflowchartdiagr…

segmentfault 上有一篇咨询 Markdown 条件判断的问题,我也顺便简单学习了一下 Markdown 的流程图语法。还好,SF 支持流程图,貌似采用的是 flowchart.js。

Flowchart.js 仅需几行代码即可在 Web 上完成流程图的构建。可以从文字表述中画出简单的 SVG 流程图,也可以画出彩色的图表。

Draws simple SVG flow chart diagrams from textual representation of the diagram http://flowchart.js.org/

先来看一段入门案例

流程图代码在 Markdown 编辑中应该是下面这样的

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」

输出结果大致如下:

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」

在markdown语法中,流程图的画法和代码段类似,也就是说,流程图是写在两个

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」 之间的。

比如说php代码,会是这样一种格式:

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」

那么流程图就是这样的:

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」

语法

流程图的语法大体分为两部分:

前面部分用来定义流程图元素;

后面部分用来连接流程图元素,指定流程图的执行走向。

定义元素阶段的语法是

tag=>type: content:>url

上例中下面部分代码都是定义元素部分

st=>start: Start

e=>end: End

op1=>operation: My Operation

sub1=>subroutine: My Subroutine

cond=>condition: Yes or No?

io=>inputoutput: catch something…

说明:

tag 是流程图中的标签,在第二段连接元素时会用到。名称可以任意,一般为流程的英文缩写和数字的组合。

type 用来确定标签的类型,=>后面表示类型。由于标签的名称可以任意指定,所以要依赖type来确定标签的类型

标签有6种类型:start end operation subroutine condition inputoutput

content 是流程图文本框中的描述内容,:后面表示内容,中英文均可。特别注意,冒号与文本之间一定要有个空格

url是一个连接,与框框中的文本相绑定,:>后面就是对应的 url 链接,点击文本时可以通过链接跳转到 url 指定页面

开始

st=>start: 开始

操作

op1=>operation: 操作、执行说明

条件

cond=>condition: 确认?

结束

e=>end: 结束

URL(貌似 SF 的编辑器不支持)

e=>点击本结束跳转:>http://https://segmentfault.com/blog/ingood

连接流程图元素

示例代码后面部分

st->op1->cond

cond(yes)->io->e

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

连接流程图元素阶段的语法就简单多了,直接用->来连接两个元素,几点说明如下:

说明:

使用 -> 来连接两个元素

对于condition类型,有yes和no两个分支,如示例中的cond(yes)和cond(no)

每个元素可以制定分支走向,默认向下,也可以用right指向右边,如示例中sub1(right)。

最后给出那个提问的答案示例

如何用python画流程图_Markdown笔记:如何画流程图「终于解决」

st=>start: 开始

e=>end: 结束:>http://https://segmentfault.com/blog/ingood

c1=>condition: A

c2=>condition: B

c3=>condition: C

io=>inputoutput: D

st->c1(no)->e

c2(no)->e

c3(no)->e

c1(yes,right)->c2(yes,right)->c3(yes,right)->io

io->e

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10792.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注