Sequential function charts are used for programmable logic controllers (PLCs) and other control systems.

You can edit text in-place by clicking on the text of a selected node. The diagram uses 3 categories of node, each added to the Diagram.nodeTemplateMap:

- step
- transition
- parallel

See also the grafcet diagram sample.

Diagram Model saved in JSON format:
{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":"S1", "category":"step", "text":"Step 1"}, {"key":"TR1", "category":"transition", "text":"Transition 1"}, {"key":"S2", "category":"step", "text":"Step 2"}, {"key":"TR2", "category":"transition", "text":"Transition 2"}, {"key":"BAR1", "category":"parallel" }, {"key":"S3", "category":"step", "text":"Step 3"}, {"key":"S4", "category":"step", "text":"Step 4"}, {"key":"BAR2", "category":"parallel" }, {"key":"TR3", "category":"transition", "text":"Transition 3"}, {"key":"S5", "category":"step", "text":"Step 5"} ], "linkDataArray": [ {"from":"S1", "to":"TR1"}, {"from":"TR1", "to":"S2"}, {"from":"S2", "to":"TR2"}, {"from":"TR2", "to":"BAR1"}, {"from":"BAR1", "to":"S3"}, {"from":"BAR1", "to":"S4"}, {"from":"S3", "to":"BAR2"}, {"from":"S4", "to":"BAR2"}, {"from":"BAR2", "to":"TR3"}, {"from":"TR3", "to":"S5"} ]}

### GoJS Features in this sample

#### 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