01 Creating the View
Step 2/12 — 02 Creating Graph Elements
01 Creating the View 02 Creating Graph Elements 03 Managing Viewport 04 Setting Styles 05 Label Placement 06 Basic Interaction 07 Undo Clipboard Support 08 Grouping 09 Data Binding 10 Layout 11 Layout Data 12 Analysis Algorithms
03 Managing Viewport

# Creating Graph Elements

## How to create a graph programmatically

This step shows how to create the basic graph elements using the core IGraph. Note that depending on your specific use-case, you will let the user create the elements, interactively, or you might be using GraphBuilder to populate your graph. The latter is covered in the Graph Builder Tutorial. Also consider using the App Generator which can help you load your graphs from a convenient low-code interface.

In this example, we use the low-level IGraph to first create the nodes. The size is determined by the default size.

    const node1 = graph.createNode()
    const node2 = graph.createNodeAt(new Point(150, 15))

The third node is created by specifying the node layout. We use a size of `[60,30]`. In this case, the X/Y location describes the upper left corner of the node bounds.

    const node3 = graph.createNode(new Rect(230, 200, 60, 30))

Now, let us add some edges to connect the nodes.

    graph.createEdge(node1, node2)
    const edgeWithBend = graph.createEdge(node2, node3)

We add a bend to the second edge.

    graph.addBend(edgeWithBend, new Point(260, 15))

Next, we add two ports to the nodes and connect the ports using an edge.

Note | Edges always start and end at ports. In the above example, where we only specified the nodes, the ports are created implicitly.

    // Create a port in the center of the node layout
    const port1AtNode1 = graph.addPort(
      node1,
      FreeNodePortLocationModel.NODE_CENTER_ANCHORED
    )

    // Create a port at the middle of the left border
    // The location is interpreted as absolute coordinates
    const port1AtNode3 = graph.addPortAt(
      node3,
      new Point(node3.layout.x, node3.layout.center.y)
    )

    // Create an edge that connects the two ports
    const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)

Finally, add labels to the graph items we just created.

    graph.addLabel(node1, 'n1')
    graph.addLabel(node2, 'n2')
    graph.addLabel(node3, 'n3')
    graph.addLabel(edgeAtPorts, 'Edge at Ports')

03 Managing Viewport