flowchart.js使用总结

最新推荐文章于 2024-08-08 07:47:13 发布

qq_38852248

最新推荐文章于 2024-08-08 07:47:13 发布

阅读量3.9k

点赞数 3

分类专栏：流程图文章标签： js

本文链接：https://blog.csdn.net/qq_38852248/article/details/106002449

版权

本文总结了flowchart.js库的使用，包括定义元素、连接元素的方式与修饰，渲染流程图的步骤，以及如何通过JavaScript进行交互操作，详细解析了流程图创建的各个方面。

摘要由CSDN通过智能技术生成

概述

主要分为三部分，1、定义流程图所需要的元素。2、将定义好的元素按照需求进行连接。3、执行js对流程图进行渲染。

格式
	名称=>类型 : 显示内容 | 模块Id:点击事件(跳转链接)
	//模块Id主要用于对某一单独的模块进行渲染时的选择

//例如
st=>start: 资料预审|past:>http://www.baidu.com[blank]

类型只是代表样式，样式与功能并无关系

格式
		定义元素名称->定义元素名称->定义元素名称

//例如
st->op1（right）->cond

注意：可以添加括号来定义连接下一任务时的方向，默认为下。（只能定义right，因为流程图是从左上角开始往右下角进行的）
在这里插入图片描述

//判断框连接方法
cond(yes)->op2//yes判断为真时执行，下一任务框为向下连接
cond(no)->sub1//no判断为假时执行，下一任务框为向右连接

在这里插入图片描述

格式
		定义元素名称@>定义元素名称({"属性":"值","属性":"值"})@>定义元素名称({"属性":"值"})

//自定义任务框连接线的样式
st@>op1({
   "stroke":"blue"})//连线颜色
st@>

关注

专栏目录