HTML 流程图示例：使用 Bootstrap 和 Flowchart.js 实现
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>HTML 流程图示例：使用 Bootstrap 和 Flowchart.js 实现</title>
<link rel='stylesheet' href='https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css'>
</head>
<body>
<div class='container'>
<h1>HTML 流程图示例</h1>
<p>本示例演示如何使用 Bootstrap 和 Flowchart.js 创建流程图，并定义任务之间的运行控制逻辑，例如同步、异步、循环、判断等。</p>
<pre><code><h2>流程图组件</h2>
<div id='flowchart'></div>
</code></pre>
</div>
<script src='https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/flowchart.js'></script>
<script>
$(document).ready(function() {
// 创建流程图
var flowchart = flowchart.parse(`
st=>start: 开始
op1=>operation: 同步任务
op2=>operation: 异步任务
cond=>condition: 判断条件?
loop=>loop: 循环任务
end=>end: 结束
st->op1->op2->cond
cond(yes)->loop->op2
cond(no)->end
`);
// 渲染流程图
flowchart.drawSVG('flowchart', {
// 自定义样式
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': '是',
'no-text': '否',
'arrow-end': 'block',
'scale': 1,
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
'flowstate' : {
'cond': { 'fill': 'pink' },
'loop': { 'fill': 'orange', 'font-color': 'white' },
'op1': {'fill': 'white'},
'op2': {'fill': 'white'}
}
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/fGzw 著作权归作者所有。请勿转载和采集!