Interactive Builder of Flowgrams, Flowcharts with Constrained Visual Syntax

The Flowgrammer sample demonstrates how one can build a flowchart with a constrained syntax. You can drag and drop Nodes onto Links and Nodes in the diagram in order to splice them into the graph. There is visual feedback during the dragging process. Nodes dropped onto the diagram's background are automatically deleted. Edit text by clicking on the text of selected nodes. Deleting an action or step Node excises it from the chain of steps that it is in. The "For", "While", and "If" are not deletable, but you can select and delete the Group holding the whole body of the loop or conditional. The "Start" and "End" nodes and Links are not deletable.

The automatic layout of the diagram is accomplished with the ParallelLayout extension.

{ "class": "GraphLinksModel",
  "nodeDataArray": [
{"key":1,"text":"S","category":"Start"},
{"key":-1,"isGroup":true,"cat":"For","text":"For"},
{"key":2,"text":"For Each","category":"For","group":-1},
{"key":3,"text":"Action 1","group":-1},
{"key":-2,"isGroup":true,"cat":"If","text":"If","group":-1},
{"key":4,"text":"If","category":"If","group":-2},
{"key":5,"text":"Action 2","group":-2},
{"key":6,"text":"Action 3","group":-2},
{"key":-3,"isGroup":true,"cat":"For","text":"For 2","group":-2},
{"key":7,"text":"For Each\n(nested)","category":"For","group":-3},
{"key":8,"text":"Action 4","group":-3},
{"key":9,"text":"","category":"EndFor","group":-3},
{"key":10,"text":"","category":"EndIf","group":-2},
{"key":11,"text":"Action 5","group":-1},
{"key":12,"text":"","category":"EndFor","group":-1},
{"key":13,"text":"E","category":"End"}
  ],
  "linkDataArray": [
{"from":1, "to":2},
{"from":2, "to":3},
{"from":3, "to":4},
{"from":4, "to":5, "text":"yes"},
{"from":4, "to":6, "text":"no"},
{"from":6, "to":7},
{"from":7, "to":8},
{"from":8, "to":9},
{"from":5, "to":10},
{"from":9, "to":10},
{"from":9, "to":7},
{"from":10, "to":11},
{"from":11, "to":12},
{"from":12, "to":2},
{"from":12, "to":13}
 ]}

GoJS Features in this sample

Collections

GoJS provides its own collection classes: List, Set, and Map. You can iterate over a collection by using an Iterator. More information can be found in the GoJS Intro.

Related samples

Layered Digraph Layout

This predefined layout is used for placing Nodes of a general directed graph in layers (rows or columns). This is more general than TreeLayout, as it does not require that the graph be tree-structured. More information can be found in the GoJS Intro.

Related samples

Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

Overview Diagrams

An Overview is a subclass of Diagram that is used to display all of the Parts of another diagram and to show where that diagram's viewport is relative to all of those parts. The user can also scroll the overviewed diagram by clicking or dragging within the overview.

The initialization of an Overview is just a matter of setting Overview.observed to refer to the Diagram that you want it to show. So there needs to be a DIV for your main diagram, for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you create the Overview in a very simple manner.

More information can be found in the GoJS Intro.

Related samples