flowchar.js使用指南
flowchar.js是一个javascript库，可以签到很多应用中直接使用，所以在很多类型的平台都是直接支持的，比如CSDN的markdown语法也是支持flowchart.js的，这篇文章的flowchart.js示例也都是使用mermaid方式直接指定并进行显示的。这样，用户就可以直接已DSL的方式非常容易地进行流程图的绘制了。
概要信息
flowchart.js的概要信息如下表所示：
| 项目 | 说明 |
|---|---|
| 官网 | http://flowchart.js.org/ |
| 开源/闭源 | 开源 |
| 源码管理地址 | https://github.com/adrai/flowchart.js/releases |
| License类别 | MIT License |
| 开发语言 | javascript |
| 当前稳定版本 | 1.13.0 （2019/11/28） |
使用方法
flowchart.js和其他的javascript库一样，直接引用即可使用，本文同时会介绍一下如何通过diagrams来创建flowchart.js格式的svg文件。安装diagrams直接使用npm即可，安装命令如下所示：
执行命令：npm install -g diagrams
安装日志示例：
liumiaocn:~ liumiao$ npm install -g diagrams
...省略
+ diagrams@0.11.0
added 387 packages from 258 contributors in 564.37s
liumiaocn:~ liumiao$
flowchart.js的常见类型
| 流程图节点 | 图形类型 | 说明 |
|---|---|---|
| 开始 | 圆角矩形 | 流程图的开始 |
| 结束 | 圆角矩形 | 流程图的结束 |
| 处理操作 | 矩形 | 流程图中的处理或者步骤 |
| 条件判断 | 菱形 | 需要根据条件进行判断 |
| 输入 | 平行四边形 | 与外界信息的输入交互 |
| 输出 | 平行四边形 | 与外界信息的输出交互 |
| 预定义过程 | 上下边重合的嵌套矩形 | 子过程或者作业指引 |
| 工作流方向 | 箭头 | 流程执行逻辑顺序 |
使用说明
关键字
| 流程图节点 | 图形类型 | 类型关键字 |
|---|---|---|
| 开始 | 圆角矩形 | start |
| 结束 | 圆角矩形 | end |
| 处理操作 | 矩形 | operation |
| 条件判断 | 菱形 | condition |
| 输入 | 平行四边形 | inputoutput |
| 输出 | 平行四边形 | inputoutput |
| 预定义过程 | 上下边重合的嵌套矩形 | subroutine |
| 工作流方向 | 箭头 | -> |
定义格式
定义格式：节点名称=>类型: 显示内容[:>链接]
定义格式说明：
- 链接为可选设定，可以设定点击跳转的链接地址, 另外[]并不是输入的内容，只是表示为可选内容
- 节点名称为连线关联时用到
- 显示内容为流程图上显示的节点信息。
- 注意类型和显示内容之间的: 后的空格不要丢失，否则可能无法正常显示
使用示例：开始/结束
此处已CSDN给出的示例进行说明：
- flowchart代码信息
flowchat
start=>start: 开始
e=>end: 结束
start->e
- 显示示例
使用示例：处理操作
- flowchart代码信息
flowchat
start=>start: 开始
end=>end: 结束
operation=>operation: 我的操作
start->operation->end
- 显示示例
使用示例：条件操作
- flowchart代码信息
flowchat
start=>start: 开始
end=>end: 结束
operation=>operation: 我的操作
condition=>condition: 确认
start->operation->condition->end
condition(yes)->end
condition(no)->operation
- 显示示例
使用示例：输入输出
- flowchart代码信息
flowchat
start=>start: 开始
end=>end: 结束
input=>inputoutput: 我的输入
output=>inputoutput: 我的输出
operation=>operation: 我的操作
condition=>condition: 确认
start->input->operation->output->condition
condition(yes)->end
condition(no)->operation
- 显示示例
使用示例：子过程
- flowchart代码信息
flowchat
start=>start: 开始
end=>end: 结束
input=>inputoutput: 我的输入
output=>inputoutput: 我的输出
operation=>operation: 我的操作
condition=>condition: 确认
subroutine=>subroutine: 我的子过程
start->input->operation->output->condition
condition(yes)->end
condition(no)->subroutine(right)->operation
- 显示示例
注意事项：subroutine(right)是缺省写法，等同于subroutine，注意写成subroutine(left)后效果如下所示：
使用示例：链接跳转
- flowchart代码信息
flowchat
start=>start: 开始
end=>end: 结束
input=>inputoutput: 我的输入
output=>inputoutput: 我的输出
operation=>operation: 我的操作
condition=>condition: 确认
subroutine=>subroutine: 我的子过程
jump2blog=>operation: 跳转页面 :>https://liumiaocn.blog.csdn.net/
start->input->operation->output->condition
condition(yes)->jump2blog->end
condition(no)->subroutine(right)->operation
- 显示示例
使用diagrams生成svg
事前准备
使用上述的flowchart代码，详细如下所示：
liumiaocn:flowchart liumiao$ cat input.flowchart
start=>start: 开始
end=>end: 结束
input=>inputoutput: 我的输入
output=>inputoutput: 我的输出
operation=>operation: 我的操作
condition=>condition: 确认
subroutine=>subroutine: 我的子过程
jump2blog=>operation: 跳转页面 :>https://liumiaocn.blog.csdn.net/
start->input->operation->output->condition
condition(yes)->jump2blog->end
condition(no)->subroutine(right)->operation
liumiaocn:flowchart liumiao$
生成svg图形
liumiaocn:flowchart liumiao$ diagrams flowchart input.flowchart flowchart.svg
liumiaocn:flowchart liumiao$ ls flowchart.svg
flowchart.svg
liumiaocn:flowchart liumiao$
结果确认
svg有很多种方式确认结果，最简单的直接通过html页面嵌入通过浏览器进行确认，准备如下HTML页面，双击打开即可：
liumiaocn:flowchart liumiao$ ls
flowchart.svg input.flowchart svg.html
liumiaocn:flowchart liumiao$ cat svg.html
<html>
<body>
<iframe src="flowchart.svg" style="width:100%;" height="900px"></iframe>
</body>
</html>
liumiaocn:flowchart liumiao$
flowchar.js使用指南相关推荐
- 《Node.js开发指南》书评汇总
刚查了下库存,发现订阅<Node.js开发指南>的读者大增,这是为什么呢?看了下近期本书在豆瓣的评论,口碑很好,现将豆瓣的书评汇总如下: ------------------------- ...
- 使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 1
使用Web框架 -- Express express -g 全局安装 express express_examplename install dependencies: $ cd express_e ...
- 《JS权威指南学习总结--1.1语言核心》
1.1语言核心 --本节主要介绍<js权威指南>基础部分各章讲解内容和一些简单的示例 本小节内容: 一.第二章讲解js注释.分号和Unicode,第三章主要讲解js变量和赋值 简单示例: ...
- 小弟的新书《Ext JS权威指南》终于出版了
链接:http://product.china-pub.com/3661375&weibo#ml <ext js权威指南> 前 言 第1章 ext js 4开发入门 / 1 1.1 ...
- 《JS权威指南学习总结--开始简介》
本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...
- nodec mysql_Node.js 连接 MySQL 并进行数据库操作 –node.js 开发指南
Node.js是一套用来编写高性能网络服务器的JavaScript工具包 通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,本篇就来 ...
- d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
- Node.js 连接 MySQL 并进行数据库操作 –node.js 开发指南
Node.js是一套用来编写高性能网络服务器的JavaScript工具包 通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,本篇就来 ...
最新文章
- python可以在线编程吗-有哪些 python 的在线练习题或编程挑战的网站？
- Linux环境软RAID 5 搭建
- Oracle 作业学习总结
- SubSonic数据库操作
- Majority Element II
- c++ 编译添加dll_Windows下osg编译
- shell 实现txt转换成html
- python中的continue和break
- 吃鱼还是吃肉 (10 分)
- php 判断 pc 移动设备,PHP判断是移动设备还是PC设备
- iOS开发NSDecimalNumber的基本使用，加、减、乘、除、指数、比较
- matcaffe训练与测试
- Matlab 2018a的安装步骤
- 计算机音乐的制作流程,Premiere制作音乐电子相册的方法和流程 计算机类数媒...
- 英特尔hd630驱动_intel UHD graphics 620/630 -win7 驱动
- 计算机屏保后无法再次启动,电脑开机一直停留在屏保 电脑问题的原因以及解决方法...
- VS2010 SP1安装失败之”此计算机的状态不支持此安装“
- 金仓数据库KingbaseES之libpq通过服务名连接数据库
- 围绕开源的系列思考之二——企业篇
- java调用ffmpeg把rtsp视频流保存为MP4文件