gojs实现拖拽流程图设计编辑导出json和svg图片格式代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：gojs实现拖拽流程图设计编辑导出json和svg图片格式代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  

  
</head>

<body >
  <div id="sample">
  <div style="width:100%; white-space:nowrap;">
    <span style="display: inline-block; vertical-align: top; width:100px">
      <div id="myPaletteDiv" style="border: solid 1px black; height: 720px"></div>
    </span>

    <span style="display: inline-block; vertical-align: top; width:80%">
      <div id="myDiagramDiv" style="border: solid 1px black; height: 720px"></div>
    </span>
  </div>

  <p>
  Mouse-over a Node to view its ports.
  Drag from these ports to create new Links.
  Selecting Links allows you to re-shape and re-link them.
  Selecting a Node and then clicking its TextBlock will allow
  you to edit text (except on the Start and End Nodes).
  </p>
  <button id="SaveButton" onclick="save()">Save</button>
  <button onclick="load()">Load</button>
  Diagram Model saved in JSON format:
  <textarea id="mySavedModel" style="width:100%;height:300px">{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ 
{"key":-1, "loc":"175 0","category":"Yellowish", "text":"Plan Execution"},
{"key":0, "loc":"-8.000000000000014 80", "text":"Manual Execution"},
{"key":1, "loc":"175 121.99999999999993", "text":"Presighting"},
{"key":5, "loc":"365.00000000000006 81.00000000000006", "text":"Automation"},
{"text":"Sighting", "key":-2, "loc":"175 188"},
{"text":"Class TP Escape", "key":-7, "loc":"-106 254"},
{"text":"Silicone / Circuit / Spec Bug", "key":-8, "loc":"63 262"},
{"text":"SW / FW Bug", "key":-9, "loc":"226 256"},
{"text":"Periphery Bug", "key":-10, "loc":"386 256"},
{"text":"Test Content\nBug", "key":-11, "loc":"537 264"},
{"key":-12, "loc":"183 368", "text":"Stabilize"}
 ],
  "linkDataArray": [ 
{"from":5, "to":1, "fromPort":"A", "toPort":"T", "points":[315.50000000000006,81.00000000000006,305.50000000000006,81.00000000000006,175,81.00000000000006,175,88.35,175,95.69999999999993,175,105.69999999999993]},
{"from":0, "to":1, "fromPort":"A", "toPort":"T", "points":[62.499999999999986,80,72.49999999999999,80,175,80,175,87.84999999999997,175,95.69999999999993,175,105.69999999999993]},
{"from":-1, "to":0, "fromPort":"B", "toPort":"T", "points":[175,16.3,175,26.3,175,40,-8.000000000000014,40,-8.000000000000014,53.7,-8.000000000000014,63.7]},
{"from":-1, "to":5, "fromPort":"B", "toPort":"T", "points":[175,16.3,175,26.3,175,40.50000000000003,365.00000000000006,40.50000000000003,365.00000000000006,54.70000000000006,365.00000000000006,64.70000000000006]},
{"from":1, "to":-2, "fromPort":"B", "toPort":"T", "points":[175,138.29999999999993,175,148.29999999999993,175,154.99999999999994,175,154.99999999999994,175,161.7,175,171.7]},
{"from":-2, "to":-7, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,221,-106,221,-106,227.7,-106,237.7]},
{"from":-2, "to":-8, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,221.1,63,221.1,63,227.9,63,237.9]},
{"from":-2, "to":-9, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,222,226,222,226,229.7,226,239.7]},
{"from":-2, "to":-10, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,222,386,222,386,229.7,386,239.7]},
{"from":-2, "to":-11, "fromPort":"B", "toPort":"T", "points":[175,204.29999999999998,175,214.29999999999998,175,222.1,537,222.1,537,229.9,537,239.9]},
{"from":-9, "to":-12, "fromPort":"B", "toPort":"T", "points":[226,272.3,226,282.3,226,312,183,312,183,341.7,183,351.7]},
{"from":-8, "to":-12, "fromPort":"B", "toPort":"L", "points":[63,286.1,63,296.1,63,368,99,368,135,368,145,368]},
{"from":-7, "to":-12, "fromPort":"B", "toPort":"L", "points":[-106,270.3,-106,280.3,-106,368,14.5,368,135,368,145,368]},
{"from":-10, "to":-12, "fromPort":"B", "toPort":"R", "points":[386,272.3,386,282.3,386,368,308.5,368,231,368,221,368]},
{"from":-11, "to":-12, "fromPort":"B", "toPort":"R", "points":[537,288.1,537,298.1,537,368,384,368,231,368,221,368]},
{"from":-12, "to":-1, "fromPort":"B", "toPort":"T", "points":[183,384.30000000000007,183,394.30000000000007,183,396,132,396,132,340,140,340,140,228,108,228,108,-28,175,-28,175,-26.3,175,-16.3]}
 ]}
  </textarea>
  <p>Click the button below to render the current GoJS Diagram into SVG at one-half scale.
     The SVG is not interactive like the GoJS diagram, but can be used for printing or display.
     For more informatio.........完整代码请登录后点击上方下载按钮下载查看