Flowchart | グラフ | JavaScriptデモ

フローチャートサンプルはGoJsのいくつかの重要な機能、すなわち namely パレット, リンク可能ノード, ドラッグ/ドロップの挙動, テキスト編集図の中のノードテンプレートマップの使用方法を示します。

ノードをマウスオーバーするとポートを表示します。これらのポートからドラッグして、新しいリンクを作成します。リンクを選択すると、shapeを再設定でき、再リンクできます。ノードを選択し、次にその「TextBlock」をクリックすると、（開始と終了ノードを除く）テキストを編集できるようになります。

ダイアグラムモデルデータは以下のJSONからロードされます。

{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"category":"Comment", "loc":"360 -10", "text":"ドラゴンボール", "key":-13},
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
{"key":0, "loc":"0 77", "text":"二星球。ブルマが最初に見つけたドラゴンボール。ブルマの家にあった"},
{"key":1, "loc":"175 100", "text":"四星球。孫悟空のじいちゃんの形見"},
{"key":2, "loc":"175 190", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
{"key":3, "loc":"175 270", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
{"key":4, "loc":"175 370", "text":"Press evenly into ungreased 15x10x1 pan"},
{"key":5, "loc":"0 200", "text":"五星球。孫悟空と出会う10日ぐらい前、ブルマがくろうして北の谷でさがしだしたドラゴンボール"},
{"key":6, "loc":"175 440", "text":"Sprinkle nuts on top"},
{"key":7, "loc":"175 500", "text":"Bake for 25 minutes and let cool"},
{"key":8, "loc":"175 570", "text":"Cut into rectangular grid"},
{"key":9, "loc":"352 85", "text":"三星球。百年ほど前に亀仙人が海底でひろって首飾りにしていた。ブルマはパンティを見せ(実際は穿いていなかった)お礼にもらう"},
{"key":-2, "category":"End", "loc":"175 640", "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":0, "to":5, "fromPort":"B", "toPort":"T"},
{"from":5, "to":4, "fromPort":"B", "toPort":"T"},
{"from":0, "to":4, "fromPort":"B", "toPort":"T"},
{"from":-1, "to":9, "fromPort":"B", "toPort":"T"}
 ]}

現時点のGoJSダイアグラムを、半分の大きさのSVGで描画するためには、以下のボタンをクリックしてください。 SVGはGoJS図のようにインタラクティブではありませんが、印刷または表示のために使用することができます。詳細については SVGを作るページを参照してください。.