This is a minimalist HTML and JavaScript skeleton of the GoJS Sample blockEditor.html. It was automatically generated from a button on the sample page, and does not contain the full HTML. It is intended as a starting point to adapt for your own usage. For many samples, you may need to inspect the full source on Github and copy other files or scripts.

Double-click in the background to create a new node. Create groups by selecting nodes and invoking Ctrl-G; Ctrl-Shift-G to ungroup a selected group. A selected node will have four orange triangles that when clicked will automatically copy the node and link to it. Use the context menu to change the shape, color, thickness, and dashed-ness.

Links can be drawn by dragging from the side of each node. A selected link can be reconnected by dragging an end handle. Use the context menu to change the color, thickness, dashed-ness, and which side the link should connect with. Press the F2 key to start editing the label of a selected link.

{
    "class": "GraphLinksModel",
    "nodeDataArray": [
        {
            "text": {
                "inputs": {
                    "name": "Chan Tai Man",
                    "address": "Rm 123, 10 Lo Ping Road, Tai Po",
                    "email": "abc@gmail.com",
                    "total": 50
                },
                "actions": [
                    {
                        "total": ">100",
                        "goto": "-4"
                    },
                    {
                        "total": "<=100",
                        "goto": "-3"
                    }
                ],
                "formname": "form1",
                "formfields": {
                    "submittime": " ",
                    "lastupdate": [["tmchan","approved","2021-11-12 12:33:11"],["skwong","reassign","2021-11-12 03:22:33"]],
                    "currentstate": "-3"
                }
            },
            "key": -1,
            "loc": "-10 0",
            "color": "brown",
            "size": "340 100",
            "fill": "beige"
        },
        {
            "text": {
                "stage": "Manager Approval",
                "role": "manager",
                "inputs": {
                    "comment": "",
                    "declaration": ""
                },
                "actions": [
                    {
                        "approve": "true",
                        "goto": "-4"
                    },
                    {
                        "approve": "false",
                        "goto": "END"
                    }
                ]
            },
            "key": -3,
            "loc": "430 270",
            "dash": null,
            "figure": "Rectangle",
            "size": "280 120",
            "thickness": 3
        },
        {
            "text": {
                "stage": "HoD Approval",
                "role": "HoD",
                "inputs": {
                    "comment": "",
                    "declaration": ""
                },
                "actions": [
                    {
                        "approve": "true",
                        "goto": "ENDSUCCESS"
                    },
                    {
                        "approve": "false",
                        "goto": "ENDFAILED"
                    }
                ]
            },
            "key": -4,
            "loc": "180 420",
            "figure": "RoundedRectangle",
            "fill": "lightblue",
            "size": "200 60"
        }
    ],
    "linkDataArray": [
        {
            "from": -1,
            "to": -3,
            "points": [
                46.66666666666667,
                50,
                46.66666666666667,
                60,
                46.66666666666667,
                130,
                430,
                130,
                430,
                200,
                430,
                210
            ],
            "text": "Total>100",
            "color": "green"
        },
        {
            "from": -3,
            "to": -4,
            "points": [
                430,
                330,
                430,
                340,
                430,
                360,
                230,
                360,
                230,
                380,
                230,
                390
            ],
            "text": "approved",
            "color": "green"
        },
        {
            "from": -1,
            "to": -4,
            "points": [
                -95,
                50,
                -95,
                76,
                -95,
                228,
                146.66666666666666,
                228,
                146.66666666666666,
                380,
                146.66666666666666,
                390
            ],
            "text": "Total<=100",
            "color": "green"
        }
    ]
}

View this sample page's source on GitHub