探索jQuery Flowchart：构建直观流程图的利器
<!DOCTYPE html>
<html>
<head>
<title>jQuery Flowchart 示例</title>
<link rel="stylesheet" type="text/css" href="jquery.flowchart.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flowchart.min.js"></script>
</head>
<body>
<div id="flowchart-placeholder"></div>
<script type="text/javascript">
$(function() {
var data = {
"nodes": {
"start": {
"type": "start",
"id": "start",
"x": 390,
"y": 175,
"width": 32,
"height": 32
},
"end": {
"type": "end",
"id": "end",
"x": 390,
"y": 400,
"width": 32,
"height": 32
},
"condition": {
"type": "condition",
"id": "condition",
"x": 390,
"y": 275,
"width": 50,
"height": 50,
"properties": {
"decision": "Do you like it?"
}
}
},
"edges": {
"start_to_condition": {
"id": "start_to_condition",
"type": "smoothstep",
"source": "start",
"target": "condition"
},
"yes_to_end": {
"id": "yes_to_end",
"type": "smoothstep",
"source": "condition",
"target": "end",
"properties": {
"answer": "Yes"
}
},
"no_to_end": {
"id": "no_to_end",
评论已关闭