一款用于绘制状态机转换图和流程图的web在线绘图工具
大型软件系统中离不开各类状态机的处理,日常工作中也涉及到各类事务处理流程;从表现力看文不如表,表不如图;因此日常工作中经常需要绘制各种状态机的状态转换图和流程图,以协助理解代码逻辑和各类事务处理流程等。
绘制此类图形的常用工具有visio,liberoffice draw等,这些软件采用"所见即所得"的设计思想,完全由手动放置形状、填充文本、绘制线条、拖动箭头指向关系、调整文本格式、调整布局等等。此类工具优点是绘图直观、布局可控;缺点一是需要安装专门的软件;二是过于繁琐,以状态机状态转换图为例,当状态和激励较多时,表示状态的矩形框和表示激励的线条会显得很凌乱,新添加状态或者激励时可能需要重新调整已有状态和激励的布局。
为了提高绘图效率,同时让绘图在每台电脑上随时可用,以及随时可以访问已经绘制的图形协助代码分析,用python+graphviz开发了状态机在线绘图工具。
工具以下列格式的文本作为输入:
source:XXX; trigger:YYY; destination:ZZZ; color="red"
上述文本表示在XXX状态下收到YYY激励会跳转到新的ZZZ状态;color="red"表示该条边绘制为红色,可以设置其他颜色,不设置默认为黑色。
注意:上述输入文本格式中,source,tigger,destination后面必须要有英文冒号(:)和英文分号(;)。
只要在输入框内输入多条上述语句,点击按钮即可一键自动绘图,只要有网络访问即可,不需要安装软件,不需要手动绘制各类形状和线条。
下图是工具绘图的简单示例:
访问http://www.tasksteper.com:8099/flow/home/;以用户名/密码:testuser1/ testuser1登录;进入“集成工具”项目后;点击“创建条目”;
概要栏随便填写,输入栏输入以下文本框中的内容;点击“创建”按钮后;在刷新后的界面点击“Graphviz绘图”按钮,即可在页面右侧看到绘制的状态转换图;如下图所示:
输入内容:
source:吃饭; trigger:goto睡觉; destination:睡觉;
source:吃饭; trigger:goto打豆豆; destination:打豆豆;
source:睡觉; trigger:goto打豆豆; destination:打豆豆;
source:睡觉; trigger:goto吃饭; destination:吃饭;
source:打豆豆; trigger:goto吃饭; destination:吃饭;
source:打豆豆; trigger:goto睡觉; destination:睡觉;
输出:
绘图的实现步骤如下:
1.后台接收输入表单中的文本内容,并根据换行符,将一行内容作为一个字符串;
2.循环判断每个字符串是否满足如下格式:
source:XXX; trigger:YYY; destination:ZZZ;
若满足,则在dot语言中生成XXX,ZZZ两个节点,以及一条XXX指向ZZZ的边;节点信息记录到node_database中,边信息记录到edge_string中;
3.所有字符串遍历完成后,根据node_database和edge_string中记录的信息生成用于graphviz绘图的临时dot语言脚本;
4.在后台调用步骤3生成的dot语言脚本进行绘图,生成图形后并将图形显示在web界面上,随后删除dot语言脚本;
接收输入表单数据,并生成dot语言进行绘图的python代码如下所示:
def tools_draw_pygraphviz(request, model_instance):
prefix = '''digraph graphviz {
graph [
//rankdir = "LR"
//splines=polyline
overlap=false
bgcolor="#FFFFCE"
]; node [
fontsize = "16"
shape = "ellipse"
]; edge [
];
'''
edge_string = ''
space4 = ' '
space8 = space4 + space4
node_database = {}
node_database['created'] = []
tmpline = ""
for tmpchar in model_instance.detail:
if tmpchar == '\n':
m = re.search(r'source: *([^\s].*[^\s]) *;.*trigger: *([^\s].*[^\s]) *;.*destination: *([^\s].*[^\s]) *;(.*)', tmpline)
if m:
if m.group(1) not in node_database['created']:
node_database['created'].append(m.group(1))
if m.group(3) not in node_database['created']:
node_database['created'].append(m.group(3))
n = re.search(r'(color *= *\"[^\"]*\")', m.group(4))
if n:
color_string = ', '+n.group(1)
else:
color_string = ''
edge_string = edge_string + "\"" + m.group(1) + "\"" + "->" + "\"" + m.group(3) + "\"" + "[ label = \"" + m.group(2) + "\"" +color_string+ "]\n" + space4
tmpline = ""
else:
tmpline = tmpline + tmpchar m = re.search(r'source: *([^\s].*[^\s]) *;.*trigger: *([^\s].*[^\s]) *;.*destination: *([^\s].*[^\s]) *;(.*)', tmpline)
if m:
if m.group(1) not in node_database['created']:
node_database['created'].append(m.group(1))
if m.group(3) not in node_database['created']:
node_database['created'].append(m.group(3))
n = re.search(r'(color *= *\"[^\"]*\")', m.group(4))
if n:
color_string = ', '+n.group(1)
else:
color_string = ''
edge_string = edge_string + "\"" + m.group(1) + "\"" + "->" + "\"" + m.group(3) + "\"" + "[ label = \"" + m.group(2) + "\"" +color_string+ "]\n" + space4
for tmp_node in node_database['created']:
tmp_node_string = space4 + "\"" + tmp_node + "\" [\n" + space8 + "label = \"" + tmp_node + "\"\n" + space8 + "shape = \"record\"\n" + space4 + "];\n"
prefix = prefix + tmp_node_string
image_path = '/root/virenv_python3/django_for_study/mysite/polls/static/polls/images/'
output_file = image_path + 'tools_graphviz_' + str(model_instance.id) + model_instance.graphviz_format
dot_file = image_path + 'dot_' + str(model_instance.id)
with open(dot_file,'w+') as f_output:
f_output.write(prefix + space4 + edge_string + "\n}")
if os.path.exists(output_file):
os.remove(output_file)
dot_cmd = model_instance.graphviz_style+' -T'+ model_instance.graphviz_format[1:] + ' ' + dot_file +' -o ' + output_file
os.system(dot_cmd)
os.remove(dot_file)
由上述代码python解析表单输入自动生成的dot脚本如下所示:
digraph graphviz {
graph [
//rankdir = "LR"
//splines=polyline
overlap=false
bgcolor="#FFFFCE"
]; node [
fontsize = ""
shape = "ellipse"
]; edge [
];
"吃饭" [
label = "吃饭"
shape = "record"
];
"睡觉" [
label = "睡觉"
shape = "record"
];
"打豆豆" [
label = "打豆豆"
shape = "record"
];
"吃饭"->"睡觉"[ label = "goto睡觉"]
"吃饭"->"打豆豆"[ label = "goto打豆豆"]
"睡觉"->"打豆豆"[ label = "goto打豆豆"]
"睡觉"->"吃饭"[ label = "goto吃饭"]
"打豆豆"->"吃饭"[ label = "goto吃饭"]
"打豆豆"->"睡觉"[ label = "goto睡觉"] }
下图是实际工作中所涉及FC协议的端口状态机跳转流程:
其中红色表示端口开工主流程,蓝色表示端口停工流程;比代码直观许多。
该绘图工具具有以下优势:
1.自动布局自动绘图,避免了手动放置形状、填充文本、绘制线条、拖动箭头指向关系、调整文本格式、调整布局等一系列繁琐的操作;
添加新的状态跳转描述时,只需要点击按钮一键重新绘图即可,不需要关心之前的布局怎样;
2. 代码中的状态转换描述可以轻易的经脚本进行格式化处理为如下格式:
source:XXX; trigger:YYY; destination:ZZZ;
随后将格式化处理后的文本贴入网页就可以一键绘图;对于一些复杂的状态机(比如20+个状态,20+个激励)手动绘制可能需要两天左右,利用脚本预处理并利用网页生成仅需要几分钟;
3.只要能访问网络就随时随地可用,不需要安装visio等绘图工具,节约绘图前等待软件启动的时间;
4.支持设置颜色,将主要流程以颜色区分显示,便于理解;如上图中的端口启动和停止流程分别以红色和蓝色显示。
5.纯文本的输入便于批量修改,比如LLL, MMM, NNN等多个状态下都收到YYY激励,我们需要加上激励编号将YYY修改为YYY(05),在visio等绘图工具中需要手动修改多个状态下YYY激励对应的线条上的描述;使用web绘图工具只需要将输入中的YYY全文替换成YYY(05), 点击按钮重新绘图即可。
一款用于绘制状态机转换图和流程图的web在线绘图工具的更多相关文章
- 在线visio软件,在线流程图软件,在线绘图、在线画图
1. https://www.bullmind.com/ 推荐bullmind的在线visio软件,一种低成本的Visio替代品.bullmind是基于 网络的绘图工具,具有出色图表功能.您可以使用b ...
- 一款用于对 WiFi 接入点安全进行渗透测试的工具
越来越多的设备通过无线传输的方式连接到互联网,以及,大范围可用的 WiFi 接入点为攻击者攻击用户提供了很多机会.通过欺骗用户连接到虚假的 WiFi 接入点,攻击者可以完全控制用户的网络连接,这将使得 ...
- 强大的 10款 Mac 思维导图和流程图软件推荐
本文首发于[风云社区 SCOEE],想了解更多mac软件相关内容,可到[风云社区 SCOEE] 今天和大家分享思维导图和流程图工具,思维导图软件可以说应用非常的广,无论是设计工作.开发工作.管理工作都 ...
- UE4 Tutorial - Custom Mesh Component 用于绘制自定义网格的插件CustomMeshComponent
UE4 中用于绘制自定义网格的插件CustomMeshComponent. 转载: UE4 Tutorial - Custom Mesh Component Over the last few w ...
- Android程序员不容错过的10款在线实用工具
Android十款在线工具,在做Android开发过程中,会遇到一些小的问题,虽然自己动手也能解决,但是有了一些小工具,解决这些问题就得心应手了.Android在线工具,包括在线测试工具,及其他较为重 ...
- 9款国内外垂直领域的在线作图工具:那些可以替代Visio的应用!【转】
http://www.csdn.net/article/2015-02-12/2823939 摘要:现在越来越多的创业公司都希望提升办公的效率,今天介绍的几款也能提升办公效率,不过它们都属于垂直领域的 ...
- Processon 一款基于HTML5的在线作图工具
CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...
- 一起来画画!8款最佳HTML5绘图工具
HTML5无疑是当前最受宠的一项技术,今天推荐8款HTML5绘图工具,同样惊艳你的眼球!这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以Javascript.对每一个web设计者来 ...
- 推荐十款非常优秀的 HTML5 在线设计工具
网络有很多优秀的设计和开发工具可能大家都不知道,因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具,这些工具能够帮助设计师们设计出更有创意的作品.随着 HTML5 技术的不断成熟,网络上涌现出越 ...
随机推荐
- Kubernetes 系列(六):Kubernetes部署Prometheus监控
1.创建命名空间 新建一个yaml文件命名为monitor-namespace.yaml,写入如下内容: apiVersion: v1 kind: Namespace metadata: name: ...
- .Net Core自动化部署系列(一):Jenkins + GitLab
项目进行微服化改造后系统发布就变得愈为重要,因为持续集成导致部署变得越来越频繁,人工部署带来的一些问题日渐凸显,大家可能都有被系统部署线问题困扰过的经历. 本篇我们将会使用Jenkins+Gitlab ...
- at,crontab例行性任务
at:仅执行一次就结束的调度命令 at [-mldvc] TIME -m:当at的工作完成后,即使没有输出信息,也会以email的方式通知用户工作已完成 -l:相当于atq,列出系统上所有该用户的at ...
- JVM(四)类加载机制
1.静态绑定和动态绑定 静态绑定:即前期绑定,在程序执行前方法已经被绑定,此时由编译器或者其他连接程序实现,针对Java,可以理解为编译期的绑定,java中只有final.static.private ...
- python 3.7 使用MP3play 模块
因工作需要,做了一个QQ机器人语音播报程序.主要思路 是通过 酷Q 获取QQ消息取出有效信息. 根据信息在百度AI上合成语音,然后本地播放. 在播放语音的时候用了好几个模块 pygame .pyme ...
- 自己写的Weblogic的poc
""" 暂时只试用于Linux,先试试用一下反弹shell CVE-2017-10271的EXp """ import requests i ...
- 移动端自动化测试Appium 从入门到项目实战Python版☝☝☝
移动端自动化测试Appium 从入门到项目实战Python版 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 说到APP自动化测试,Appium可是说是非常流 ...
- R-plotly|交互式甘特图(Gantt chart)-项目管理/学习计划
本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/CGz51qOjFSJ4Wx_qOMzjiw 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号 ...
- 10个比较流行的JavaScript面试题
1.如何理解 JS 中的this关键字? JS 初学者总是对this关键字感到困惑,因为与其他现代编程语言相比,JS 中的这this关键字有点棘手. “this” 一般是表示当前所在的对象,但是事情并 ...
- [BZOJ4990][Usaco2017 Feb]Why Did the Cow Cross the Road II
Description Farmer John is continuing to ponder the issue of cows crossing the road through his farm ...