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