計劃製作一個視覺化的神經網路設計工具，調研了多種前端畫圖的框架，包括gojs、draw2d、tensorspace、d3等，發現gojs的實現最符合我的需要，儘管基於jqueryui的樣式稍微有些醜、商用版本的加個也很貴:(

GOJS是一個用於實現互動式圖示的javascript庫，同時支援typescript。GOJS可以用於建立大量不同型別的互動式圖表，包括資料視覺化、畫圖工具和圖片編輯。他已經包含了許多內建的佈局方式，包括樹型、力導向型、雷達型、分層有向圖以及大量自定義佈局例項。

<script src="go.js"></script>

<script id="code">
  function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    var myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                  {
                    // enable undo & redo
                    "undoManager.isEnabled": true
                  });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);
  }
</script>