GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和 HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化你的JavaScript / Canvas 程序。

點(diǎn)擊查看產(chǎn)品詳情 | 最新試用版下載

FlowChart示例演示了GoJS的幾個(gè)關(guān)鍵功能，即， ，拖放行為， 以及圖表中的使用 。

鼠標(biāo)懸停在節(jié)點(diǎn)上以查看其端口。從這些端口拖動(dòng)以創(chuàng)建新的鏈接。選擇“鏈接”可以重新整形和重新鏈接它們。選擇節(jié)點(diǎn)然后單擊其TextBlock將允許您編輯文本（開(kāi)始和結(jié)束節(jié)點(diǎn)除外）。

在頁(yè)面中查看此示例頁(yè)面的源代碼

function  init （） { 
    if（window.goSamples）goSamples（）;  //這些樣本的init  - 你不需要調(diào)用這個(gè)
    var $ = go.GraphObject.make;  //為了簡(jiǎn)潔定義模板

    myDiagram =
      $（go.Diagram，“myDiagramDiv”，   //必須命名或引用DIV HTML元素
        {
          initialContentAlignment：go.Spot.Center，
          allowDrop：true，   //必須為true才能接受來(lái)自Palette 
          “LinkDrawn”的 drop：showLinkLabel，   //這個(gè)DiagramEvent監(jiān)聽(tīng)器定義在
          “LinkRelinked” 下面：showLinkLabel，
          scrollsPageOnFocus：false，
           “undoManager.isEnabled”：true   //啟用undo＆redo
        }）;

    //修改文檔時(shí)，在標(biāo)題中添加“*”并啟用“保存”按鈕 
    myDiagram.addDiagramListener（“Modified”，function （e） { 
      var button = document.getElementById（“SaveButton”）;
       if（ button）button.disabled =！myDiagram.isModified;
       var idx = document.title.indexOf（“*”）;
       if（myDiagram.isModified）{
         if（idx < 0）document.title + = “*” ;
      } else {
         if（idx> = 0）document.title = document.title.substr（0，idx）;
      }
    }）;

    //節(jié)點(diǎn)模板的幫助程序定義

    function  nodeStyle （） { 
      return [
         // Node.location來(lái)自節(jié)點(diǎn)數(shù)據(jù)的“loc”屬性，
        //由Point.parse靜態(tài)方法轉(zhuǎn)換。
        //如果更改了Node.location，它將更新節(jié)點(diǎn)數(shù)據(jù)的“loc”屬性，
        //使用Point.stringify靜態(tài)方法轉(zhuǎn)換回來(lái)。
        new go.Binding（ “location”， “loc”，go.Point.parse）.makeTwoWay（go.Point.stringify），
        {
          // Node.location位于每個(gè)節(jié)點(diǎn)的中心
          locationSpot：go.Spot.Center
        }
      ]。
    }

    //定義用于創(chuàng)建通常透明的“端口”的函數(shù)。
    //“name”用作GraphObject.portId，
    //“align”用于確定端口相對(duì)于節(jié)點(diǎn)主體的位置，
    //“spot”用于控制鏈接的連接方式使用端口以及端口
    // 
    是否沿節(jié)點(diǎn)一側(cè)延伸，//布爾“輸出”和“輸入”參數(shù)控制用戶是否可以從端口繪制鏈接或從端口繪制鏈接。
    function  makePort （name，align，spot，output，input） { 
      var horizo??ntal = align.equals（go.Spot.Top）|| align.equals（go.Spot.Bottom）;
      
      //當(dāng)鼠標(biāo)經(jīng)過(guò)它時(shí)變成彩色
      返回 $（go.Shape，
        {
          fill：“transparent”，   //更改為mouseEnter事件處理程序中的顏色 
          strokeWidth：0，   //沒(méi)有筆畫 
          寬度：水平？NaN：8，   //如果不是水平拉伸，只有8個(gè)寬度 
          ：水平？NaN：8，   //如果不垂直拉伸，只需8個(gè)高 
          對(duì)齊：對(duì)齊，   //對(duì)齊主形狀上的端口
          stretch :(水平？go.GraphObject.Horizo??ntal：go.GraphObject.Vertical），
          portId：name，   //聲明此對(duì)象是 
          來(lái)自Spot 的“端口”：spot，   //聲明鏈接可以在此端口連接的 
          地址fromLinkable：output，   //聲明用戶是否可以從此處繪制鏈接到 
          Spot：spot，   //聲明鏈接可以在此端口連接到鏈接的 
          位置：input，   //聲明用戶是否可以在此處繪制鏈接 
          ：“指針”，   //顯示不同的光標(biāo)以指示潛在的鏈接點(diǎn) 
          mouseEnter：function （e，port） {   / / PORT參數(shù)將是這個(gè)Shape 
            if（！e.diagram.isReadOnly）port.fill = “rgba（255,0,255,0.5）” ;
          }，
          mouseLeave：function （e，port） { 
            port.fill = “transparent” ;
          }
        }）;
    }

    function  textStyle （） { 
      return {
        字體：“bold 11pt Helvetica，Arial，sans-serif”，
        中風(fēng)：“whitesmoke”
      }
    }

    //定義常規(guī)節(jié)點(diǎn)的節(jié)點(diǎn)模板

    myDiagram.nodeTemplateMap.add（“”，   //默認(rèn)類別 
      $（go.Node，“Table”，nodeStyle（），
         //主要對(duì)象是一個(gè)圍繞TextBlock的面板，其形狀 
        為矩形 $（go.Panel，“自動(dòng)”，
          $（go.Shape，“矩形”，
            {fill：“＃00A9C9”，strokeWidth：0 }，
             new go.Binding（“figure”，“figure”）），
          $（go.TextBlock，textStyle（），
            {
              保證金：8，
              maxSize：new go.Size（160，NaN），
              換行：go.TextBlock.WrapFit，
              可編輯：是的
            }，
            new go.Binding（“text”）。makeTwoWay（））
        ）
        //四個(gè)命名端口，每邊一個(gè)： 
        makePort（“T”，go.Spot.Top，go.Spot.TopSide，false，true），
        makePort（“L”，go.Spot.Left，go.Spot.LeftSide，true，true），
        makePort（“R”，go.Spot.Right，go.Spot.RightSide，true，true），
        makePort（“B”，go.Spot.Bottom，go.Spot.BottomSide，true，false）
      ））;

    myDiagram.nodeTemplateMap.add（“有條件的”，
      $（go.Node，“Table”，nodeStyle（），
         //主要對(duì)象是一個(gè)圍繞TextBlock的面板，其矩形形狀 
        為$（go.Panel，“Auto”，
          $（go.Shape，“鉆石”，
            {fill：“＃00A9C9”，strokeWidth：0 }，
             new go.Binding（“figure”，“figure”）），
          $（go.TextBlock，textStyle（），
            {
              保證金：8，
              maxSize：new go.Size（160，NaN），
              換行：go.TextBlock.WrapFit，
              可編輯：是的
            }，
            new go.Binding（“text”）。makeTwoWay（））
        ）
        //四個(gè)命名端口，每邊一個(gè)： 
        makePort（“T”，go.Spot.Top，go.Spot.Top，false，true），
        makePort（“L”，go.Spot.Left，go.Spot.Left，true，true），
        makePort（“R”，go.Spot.Right，go.Spot.Right，true，true），
        makePort（“B”，go.Spot.Bottom，go.Spot.Bottom，true，false）
      ））;

    myDiagram.nodeTemplateMap.add（“開(kāi)始”，
      $（go.Node，“Table”，nodeStyle（），
        $（go.Panel，“自動(dòng)”，
          $（go.Shape，“Circle”，
            {minSize屬性：新 go.Size（40，40），填充：“＃79C900”，strokeWidth：0 }），
          $（go.TextBlock，“Start”，textStyle（），
             new go.Binding（“text”））
        ）
        //三個(gè)命名端口，除了頂部之外每邊一個(gè)，只輸出： 
        makePort（“L”，go.Spot.Left，go.Spot.Left，true，false），
        makePort（“R”，go.Spot.Right，go.Spot.Right，true，false），
        makePort（“B”，go.Spot.Bottom，go.Spot.Bottom，true，false）
      ））;

    myDiagram.nodeTemplateMap.add（“結(jié)束”，
      $（go.Node，“Table”，nodeStyle（），
        $（go.Panel，“自動(dòng)”，
          $（go.Shape，“Circle”，
            {minSize屬性：新 go.Size（40，40），填充：“＃DC3C00”，strokeWidth：0 }），
          $（go.TextBlock，“End”，textStyle（），
             new go.Binding（“text”））
        ）
        //三個(gè)命名端口，每邊一個(gè)除了底部，只有輸入： 
        makePort（“T”，go.Spot.Top，go.Spot.Top，false，true），
        makePort（“L”，go.Spot.Left，go.Spot.Left，false，true），
        makePort（“R”，go.Spot.Right，go.Spot.Right，false，true）
      ））;

    myDiagram.nodeTemplateMap.add（“評(píng)論”，
      $（go.Node，“Auto”，nodeStyle（），
        $（go.Shape，“檔案”，
          {fill：“＃EFFAB4”，strokeWidth：0 }），
        $（go.TextBlock，textStyle（），
          {
            保證金：5，
            maxSize：new go.Size（200，NaN），
            換行：go.TextBlock.WrapFit，
            textAlign：“center”，
            可編輯：是的，
            字體：“bold 12pt Helvetica，Arial，sans-serif”，
            中風(fēng)：'＃454545'
          }，
          new go.Binding（“text”）。makeTwoWay（））
         //沒(méi)有端口，因?yàn)闆](méi)有鏈接允許連接評(píng)論
      ））;


    //替換linkTemplateMap中的默認(rèn)鏈接模板
    myDiagram.linkTemplate =
      $（go.Link，   //整個(gè)鏈接面板
        {
          路由：go.Link.AvoidsNodes，
          曲線：go.Link.JumpOver，
          角落：5，toShortLength：4，
          relinkable來(lái)自：true，
          relinkableTo：是的，
          reshapable：是的，
          resegmentable：true，
           //鼠標(biāo)懸停巧妙地突出顯示鏈接： 
          mouseEnter：function （e，link） { link.findObject（“HIGHLIGHT”）。stroke = “rgba（30,144,255,0.2）” ; }，
          mouseLeave：function （e，link） { link.findObject（“HIGHLIGHT”）。stroke = “transparent” ; }，
          selectionAdorned：false
        }，
        new go.Binding（“points”）。makeTwoWay（），
        $（go.Shape，   //高亮形狀，通常透明 
          {isPanelMain：true，strokeWidth：8，筆畫：“透明”，名稱：“HIGHLIGHT” }），
        $（go.Shape，   //鏈接路徑形狀 
          {isPanelMain：true，stroke：“gray”，strokeWidth：2 }，
           new go.Binding（“stroke”，“isSelected”，function （sel） {  return sel？“ dodgerblue“：”grey“ ;}）。ofObject（）），
        $（go.Shape，   //箭頭 
          {toArrow：“標(biāo)準(zhǔn)”，strokeWidth：0，填充：“灰色” }），
        $（go.Panel，“Auto”，   //鏈接標(biāo)簽，通常不可見(jiàn) 
          {visible：false，name：“LABEL”，segmentIndex：2，segmentFraction：0.5 }，
           new go.Binding（“visible”，“visible” “）。makeTwoWay（），
          $（go.Shape，“ RoundedRectangle ”，   //標(biāo)簽形狀 
            {fill：“＃F8F8F8”，strokeWidth：0 }），
          $（go.TextBlock，“是”，   //標(biāo)簽
            {
              textAlign：“center”，
              字體：“10pt helvetica，arial，sans-serif”，
              中風(fēng)：“＃333333”，
              可編輯：是的
            }，
            new go.Binding（“text”）。makeTwoWay（））
        ）
      ）;

    //如果出現(xiàn)“條件”節(jié)點(diǎn)，則可以看到鏈接標(biāo)簽。
    //此偵聽(tīng)器由“LinkDrawn”和“LinkRelinked”DiagramEvents調(diào)用。
    function  showLinkLabel （e） { 
      var label = e.subject.findObject（“LABEL”）;
      if（label！== null）label.visible =（e.subject.fromNode.data.category === “Conditional”）;
    }

    // LinkingTool和RelinkingTool使用的臨時(shí)鏈接也是正交的：
    myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

    加載（）;  //從一些JSON文本加載初始圖表

    //初始化頁(yè)面左側(cè)的Palette
    myPalette =
      $（go.Palette，“myPaletteDiv”，   //必須命名或引用DIV HTML元素
        {
          scrollsPageOnFocus：false，
          nodeTemplateMap：myDiagram.nodeTemplateMap，   //共享myDiagram 
          模型使用的模板：new go.GraphLinksModel（[   //指定Palette的內(nèi)容 
            {category：“Start”，text：“Start” }，
            {text：“Step” }，
            {category：“Conditional”，text：“???” }，
            {category：“End”，text：“End” }，
            {category：“Comment”，text：“Comment” }
          ]）
        }）;
  } //結(jié)束init


  //以JSON格式顯示圖表模型，用戶可以編輯
  函數(shù) save （） { 
    document.getElementById（“mySavedModel”）。value = myDiagram.model.toJson（）;
    myDiagram.isModified = false ;
  }
  function  load （） { 
    myDiagram.model = go.Model.fromJson（document.getElementById（ “mySavedModel”）。 value）;
  }

  //通過(guò)打開(kāi)一個(gè)新窗口來(lái)打印圖表，該窗口包含每個(gè)頁(yè)面
  函數(shù) printDiagram （）
    的圖表內(nèi)容的SVG圖像{ var svgWindow = window.open（）;
    if（！svgWindow）返回 ;  //未能打開(kāi)一個(gè)新的窗口
    變種 printSize = 新 go.Size（700，960）;
    var bnds = myDiagram.documentBounds;
    var x = bnds.x;
    var y = bnds.y;
    while（y <bnds.bottom）{
       while（x <bnds.right）{
         var svg = myDiagram.makeSVG（{scale：1.0，position：new go.Point（x，y），size：printSize}）;
        svgWindow.document.body.appendChild（SVG）;
        x + = printSize.width;
      }
      x = bnds.x;
      y + = printSize.height;
    }
    setTimeout（function （） { svgWindow.print（）;}，1）;
  }

< div  id = “sample” > 
  < div  style = “width：100％; display：flex; justify-content：space-between” > 
    < div  id = “myPaletteDiv”  style = “width：100px; margin-right：2px ; background-color：whitesmoke; border：solid 1px black“ > </ div > 
    < div  id = ”myDiagramDiv“  style = ”flex-grow：1; height：750px; border：solid 1px black“ > </ div > 
  < / div >
  < p >
  FlowChart示例演示了GoJS的幾個(gè)關(guān)鍵功能，
  即< 一個(gè) HREF = “../intro/palette.html” >調(diào)色板</ 一 > S，
   < 一 HREF = “../intro/links.html” >可鏈接節(jié)點(diǎn)</ 一 >，拖/放行為，
   < 一個(gè) HREF = “../intro/textBlocks.html” >文本編輯</ 一 >，以及使用
   < 一個(gè) HREF = “../intro/templateMaps.html” >節(jié)點(diǎn)模板地圖</ 一 >在圖表中。
  </ p > 
  < p >
  鼠標(biāo)懸停在節(jié)點(diǎn)上以查看其端口。
  從這些端口拖動(dòng)以創(chuàng)建新的鏈接。
  選擇“鏈接”可以重新整形和重新鏈接它們。
  選擇一個(gè)節(jié)點(diǎn)，然后單擊其TextBlock將允許
  您要編輯文本（開(kāi)始和結(jié)束節(jié)點(diǎn)除外）。
  </ p > 
  < button  id = “SaveButton”  onclick = “save（）” > Save </ button > 
  < button  onclick = “load（）” > Load </ button >
  圖模型以JSON格式保存：
  < textarea  id = “mySavedModel”  style = “width：100％; height：300px” > {“class”：“go.GraphLinksModel”，
  “linkFromPortIdProperty”：“fromPort”，
  “linkToPortIdProperty”：“toPort”，
  “nodeDataArray”：[
{“category”：“Comment”，“loc”：“360 -10”，“text”：“Kookie Brittle”，“key”： -  13}，
{“key”： -  1，“category”：“Start”，“loc”：“175 0”，“text”：“Start”}，
{“key”：0，“loc”：“ -  5 75”，“text”：“將烤箱預(yù)熱到375 F”}，
{“key”：1，“loc”：“175 100”，“text”：“在一個(gè)碗里，混合：1杯人造黃油，1.5茶匙香草，1茶匙鹽”}，
{“key”：2，“loc”：“175 200”，“text”：“逐漸打入1杯糖和2杯篩面粉”}，
{“key”：3，“loc”：“175 290”，“text”：“混合6盎司（1杯）雀巢的半甜巧克力醬”}，
{“key”：4，“loc”：“175 380”，“text”：“均勻按壓到15x10x1 pan”}，
{“key”：5，“loc”：“355 85”，“text”：“精選1/2杯你選擇的堅(jiān)果”}，
{“key”：6，“loc”：“175 450”，“text”：“頂上撒上堅(jiān)果”}，
{“key”：7，“loc”：“175 515”，“text”：“烘烤25分鐘，讓涼爽”}，
{“key”：8，“loc”：“175 585”，“text”：“切成矩形網(wǎng)格”}，
{“key”： -  2，“category”：“End”，“loc”：“175 660”，“text”：“Enjoy！”}
 ]
  “linkDataArray”：[
{“from”：1，“to”：2，“fromPort”：“B”，“toPort”：“T”}，
{“from”：2，“to”：3，“fromPort”：“B”，“toPort”：“T”}，
{“from”：3，“to”：4，“fromPort”：“B”，“toPort”：“T”}，
{“from”：4，“to”：6，“fromPort”：“B”，“toPort”：“T”}，
{“from”：6，“to”：7，“fromPort”：“B”，“toPort”：“T”}，
{“from”：7，“to”：8，“fromPort”：“B”，“toPort”：“T”}，
{“from”：8，“to”： -  2，“fromPort”：“B”，“toPort”：“T”}，
{“from”： -  1，“to”：0，“fromPort”：“B”，“toPort”：“T”}，
{“from”： -  1，“to”：1，“fromPort”：“B”，“toPort”：“T”}，
{“from”： -  1，“to”：5，“fromPort”：“B”，“toPort”：“T”}，
{“from”：5，“to”：4，“fromPort”：“B”，“toPort”：“T”}，
{“from”：0，“to”：4，“fromPort”：“B”，“toPort”：“T”}
 ]}
  </ textarea > 
  < button  onclick = “printDiagram（）” >使用SVG打印圖</ button > 
</ div >

在GitHub上查看此示例頁(yè)面的源代碼

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flowchart</title>
<meta name="description" content="Interactive flowchart diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../release/go.js"></script>
<script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        {
          initialContentAlignment: go.Spot.Center,
          allowDrop: true,  // must be true to accept drops from the Palette
          "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
          "LinkRelinked": showLinkLabel,
          scrollsPageOnFocus: false,
          "undoManager.isEnabled": true  // enable undo & redo
        });
    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });
    // helper definitions for node templates
    function nodeStyle() {
      return [
        // The Node.location comes from the "loc" property of the node data,
        // converted by the Point.parse static method.
        // If the Node.location is changed, it updates the "loc" property of the node data,
        // converting back using the Point.stringify static method.
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        {
          // the Node.location is at the center of each node
          locationSpot: go.Spot.Center
        }
      ];
    }
    // Define a function for creating a "port" that is normally transparent.
    // The "name" is used as the GraphObject.portId,
    // the "align" is used to determine where to position the port relative to the body of the node,
    // the "spot" is used to control how links connect with the port and whether the port
    // stretches along the side of the node,
    // and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
    function makePort(name, align, spot, output, input) {
      var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
      // the port is basically just a transparent rectangle that stretches along the side of the node,
      // and becomes colored when the mouse passes over it
      return $(go.Shape,
        {
          fill: "transparent",  // changed to a color in the mouseEnter event handler
          strokeWidth: 0,  // no stroke
          width: horizontal ? NaN : 8,  // if not stretching horizontally, just 8 wide
          height: !horizontal ? NaN : 8,  // if not stretching vertically, just 8 tall
          alignment: align,  // align the port on the main Shape
          stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
          portId: name,  // declare this object to be a "port"
          fromSpot: spot,  // declare where links may connect at this port
          fromLinkable: output,  // declare whether the user may draw links from here
          toSpot: spot,  // declare where links may connect at this port
          toLinkable: input,  // declare whether the user may draw links to here
          cursor: "pointer",  // show a different cursor to indicate potential link point
          mouseEnter: function(e, port) {  // the PORT argument will be this Shape
            if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
          },
          mouseLeave: function(e, port) {
            port.fill = "transparent";
          }
        });
    }
    function textStyle() {
      return {
        font: "bold 11pt Helvetica, Arial, sans-serif",
        stroke: "whitesmoke"
      }
    }
    // define the Node templates for regular nodes
    myDiagram.nodeTemplateMap.add("",  // the default category
      $(go.Node, "Table", nodeStyle(),
        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
        $(go.Panel, "Auto",
          $(go.Shape, "Rectangle",
            { fill: "#00A9C9", strokeWidth: 0 },
            new go.Binding("figure", "figure")),
          $(go.TextBlock, textStyle(),
            {
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        ),
        // four named ports, one on each side:
        makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
        makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
        makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
        makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
      ));
    myDiagram.nodeTemplateMap.add("Conditional",
      $(go.Node, "Table", nodeStyle(),
        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
        $(go.Panel, "Auto",
          $(go.Shape, "Diamond",
            { fill: "#00A9C9", strokeWidth: 0 },
            new go.Binding("figure", "figure")),
          $(go.TextBlock, textStyle(),
            {
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        ),
        // four named ports, one on each side:
        makePort("T", go.Spot.Top, go.Spot.Top, false, true),
        makePort("L", go.Spot.Left, go.Spot.Left, true, true),
        makePort("R", go.Spot.Right, go.Spot.Right, true, true),
        makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
      ));
    myDiagram.nodeTemplateMap.add("Start",
      $(go.Node, "Table", nodeStyle(),
        $(go.Panel, "Auto",
          $(go.Shape, "Circle",
            { minSize: new go.Size(40, 40), fill: "#79C900", strokeWidth: 0 }),
          $(go.TextBlock, "Start", textStyle(),
            new go.Binding("text"))
        ),
        // three named ports, one on each side except the top, all output only:
        makePort("L", go.Spot.Left, go.Spot.Left, true, false),
        makePort("R", go.Spot.Right, go.Spot.Right, true, false),
        makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
      ));
    myDiagram.nodeTemplateMap.add("End",
      $(go.Node, "Table", nodeStyle(),
        $(go.Panel, "Auto",
          $(go.Shape, "Circle",
            { minSize: new go.Size(40, 40), fill: "#DC3C00", strokeWidth: 0 }),
          $(go.TextBlock, "End", textStyle(),
            new go.Binding("text"))
        ),
        // three named ports, one on each side except the bottom, all input only:
        makePort("T", go.Spot.Top, go.Spot.Top, false, true),
        makePort("L", go.Spot.Left, go.Spot.Left, false, true),
        makePort("R", go.Spot.Right, go.Spot.Right, false, true)
      ));
    myDiagram.nodeTemplateMap.add("Comment",
      $(go.Node, "Auto", nodeStyle(),
        $(go.Shape, "File",
          { fill: "#EFFAB4", strokeWidth: 0 }),
        $(go.TextBlock, textStyle(),
          {
            margin: 5,
            maxSize: new go.Size(200, NaN),
            wrap: go.TextBlock.WrapFit,
            textAlign: "center",
            editable: true,
            font: "bold 12pt Helvetica, Arial, sans-serif",
            stroke: '#454545'
          },
          new go.Binding("text").makeTwoWay())
        // no ports, because no links are allowed to connect with a comment
      ));
    // replace the default Link template in the linkTemplateMap
    myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5, toShortLength: 4,
          relinkableFrom: true,
          relinkableTo: true,
          reshapable: true,
          resegmentable: true,
          // mouse-overs subtly highlight links:
          mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
          mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; },
          selectionAdorned: false
        },
        new go.Binding("points") DIV HTML element
        {
          scrollsPageOnFocus: false,
          nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
          model: new go.GraphLinksModel([  // specify the contents of the Palette
            { category: "Start", text: "Start" },
            { text: "Step" },
            { category: "Conditional", text: "???" },
            { category: "End", text: "End" },
            { category: "Comment", text: "Comment" }
          ])
        });
  } // end init
  // Show the diagram's model in JSON format that the user may edit
  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
  // print the diagram by opening a new window holding SVG images of the diagram contents for each page
  function printDiagram() {
    var svgWindow = window.open();
    if (!svgWindow) return;  // failure to open a new Window
    var printSize = new go.Size(700, 960);
    var bnds = myDiagram.documentBounds;
    var x = bnds.x;
    var y = bnds.y;
    while (y < bnds.bottom) {
      while (x < bnds.right) {
        var svg = myDiagram.makeSVG({ scale: 1.0, position: new go.Point(x, y), size: printSize });
        svgWindow.document.body.appendChild(svg);
        x += printSize.width;
      }
      x = bnds.x;
      y += printSize.height;
    }
    setTimeout(function() { svgWindow.print(); }, 1);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myPaletteDiv" style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 750px; border: solid 1px black"></div>
  </div>
  <p>
  The FlowChart sample demonstrates several key features of GoJS,
  namely <a href="../intro/palette.html">Palette</a>s,
  <a href="../intro/links.html">Linkable nodes</a>, Drag/Drop behavior,
  <a href="../intro/textBlocks.html">Text Editing</a>, and the use of
  <a href="../intro/templateMaps.html">Node Template Maps</a> in Diagrams.
  </p>
  <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": [
{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
{"key":0, "loc":"-5 75", "text":"Preheat oven to 375 F"},
{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
{"key":2, "loc":"175 200", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
{"key":3, "loc":"175 290", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
{"key":4, "loc":"175 380", "text":"Press evenly into ungreased 15x10x1 pan"},
{"key":5, "loc":"355 85", "text":"Finely chop 1/2 cup of your choice of nuts"},
{"key":6, "loc":"175 450", "text":"Sprinkle nuts on top"},
{"key":7, "loc":"175 515", "text":"Bake for 25 minutes and let cool"},
{"key":8, "loc":"175 585", "text":"Cut into rectangular grid"},
{"key":-2, "category":"End", "loc":"175 660", "text":"Enjoy!"}
 ],
  "linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},
{"from":2, "to":3, "fromPort":"B", "toPort":"T"},
{"from":3, "to":4, "fromPort":"B", "toPort":"T"},
{"from":4, "to":6, "fromPort":"B", "toPort":"T"},
{"from":6, "to":7, "fromPort":"B", "toPort":"T"},
{"from":7, "to":8, "fromPort":"B", "toPort":"T"},
{"from":8, "to":-2, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":0, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":1, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":5, "fromPort":"B", "toPort":"T"},
{"from":5, "to":4, "fromPort":"B", "toPort":"T"},
{"from":0, "to":4, "fromPort":"B", "toPort":"T"}
 ]}
  </textarea>
  <button onclick="printDiagram()">Print Diagram Using SVG</button>
</div>
</body>
</html>

想要查看在線操作示例，可以點(diǎn)擊此處