The FlowChart sample demonstrates several key features of GoJS, namely Palettes, Linkable nodes, Drag/Drop behavior, Text Editing, and the use of Node Template Maps in Diagrams.

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).

The Diagram Model data is loaded from the JSON below.

Save Load { "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ ], "linkDataArray": [ ]}

Click the button below to render the current GoJS Diagram into SVG at one-half scale. The SVG is not interactive like the GoJS diagram, but can be used for printing or display. For more information, see the page on making SVG.

Render as SVG