html5 flow chart,Flowchart

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

Save

Load

Diagram Model saved in JSON format:

{ "class": "go.GraphLinksModel",

"linkFromPortIdProperty": "fromPort",

"linkToPortIdProperty": "toPort",

"nodeDataArray": [

{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},

{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},

{"key":0, "loc":"-5 75", "text":"Preheat oven to 375 F"},

{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},

{"key":2, "loc":"175 200", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},

{"key":3, "loc":"175 290", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},

{"key":4, "loc":"175 380", "text":"Press evenly into ungreased 15x10x1 pan"},

{"key":5, "loc":"355 85", "text":"Finely chop 1/2 cup of your choice of nuts"},

{"key":6, "loc":"175 450", "text":"Sprinkle nuts on top"},

{"key":7, "loc":"175 515", "text":"Bake for 25 minutes and let cool"},

{"key":8, "loc":"175 585", "text":"Cut into rectangular grid"},

{"key":-2, "category":"End", "loc":"175 660", "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":-1, "to":5, "fromPort":"B", "toPort":"T"},

{"from":5, "to":4, "fromPort":"B", "toPort":"T"},

{"from":0, "to":4, "fromPort":"B", "toPort":"T"}

]}

Print Diagram Using SVG