All versions of this documentation

Connect nodes

Press "ctrl" and drag the nodes to create new edges by connecting them. If you finish drawing the edge not on a node, a new node is created. Check out these and other settings here.

Open in a new window.
          <!DOCTYPE html>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
    #control { position: absolute; top: 10px; right: 10px; padding: 10px; background: #fff; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
    #control label { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
<div id="graph-container"></div>
  'use strict';

  var ogma = new Ogma({
    container: 'graph-container'
  }); () {
    if (ogma.keyboard.isKeyPressed('ctrl')) {{
        strokeColor: 'red',

        onComplete: function (evt) {
          console.log('New connection: ', evt);

        onNodeCreated: function (n) {
          console.log('node created ', n.getId());

        onEdgeCreated: function (n) {
          console.log('edge created ', n.getId());

  ogma.generate.random({ nodes: 15, edges: 15 }).then(function(g) {