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

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

代码语言：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.699999.........完整代码请登录后点击上方下载按钮下载查看