jointjs实现可视化编程逻辑流程图生成js代码-html代码-BFW代码库

jointjs实现可视化编程逻辑流程图生成js代码

代码语言：html

所属分类：图表

代码描述：jointjs实现可视化编程逻辑流程图生成js代码，通过jointjs拖拽设计流程图最终生成相应的js逻辑代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
</head>
<body>
    <div>
        <div id="app" style="width: 100%; height: 300px; border: 1px solid black;"></div>
        <button id="generateCode">Generate JS Code</button>
        <pre id="codeOutput"></pre>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const graph = new joint.dia.Graph;

            const paper = new joint.dia.Paper({
                el: document.querySelector('#app'),
                model: graph,
              height:"300px",
                gridSize: 10,
                drawGrid: true,
                background: { color: '#f9f9f9' }
            });

            // 示例流程图
            const startNode = new joint.shapes.standard.Rectangle();
            startNode.position(100, 30);
            startNode.resize(100, 40);
            startNode.attr({ body: { fill: 'lightgreen' }, label: { text: 'Start', fill: 'black' } });
            startNode.addTo(graph);

            const decisionNode = new joint.shapes.standard.Rectangle();
            decisionNode.position(300, 30);
            decisionNode.resize(100, 40);
            decisionNode.attr({ body: { fill: 'yellow' }, label: { text: 'Decision', fill: 'black' } });
            decisionNode.addTo(graph);

            const actionNode1 = new joint.shapes.standard.Rectangle();
            actionNode1.position(500, 30);
            actionNode1.resize(100, 40);
            actionNode1.attr({ body: { fill: 'lightblue' }, label: { text: 'Action 1', fill: 'black' } });
            actionNode1.addTo(graph);

            const actionNode2 = new joint.shapes.standard.Rectangle();
            actionNode2.position(500, 100);
            actionNode2.resiz.........完整代码请登录后点击上方下载按钮下载查看