Appearance

  2. Tutorials
  3. Getting started

Hello world ​

Let's start with a minimalist example that displays a graph with two nodes and a link between them.

html
<html>
  <head>
    <!-- Include the library -->
    <script src="../build/ogma.js"></script>
    <style type="css">
      #graph-container {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <!-- DOM element containing the graph -->
    <div id="graph-container"></div>

    <script>
      // Create an instance of Ogma and bind it to the graph-container.
      const ogma = new Ogma({
        container: 'graph-container'
      });

      // Create a node with id 'n0'.
      const n0 = { id: 'n0', attributes: { x: 0, y: 0 } };
      // Add the node to ogma.
      ogma.addNode(n0);

      // Create a node with id 'n1'.
      const n1 = { id: 'n1', attributes: { x: 50, y: 0 } };
      // Add the node to ogma.
      ogma.addNode(n1);

      // Create an edge from 'n0' to 'n1'
      const e = {
        id: 'e0',
        source: 'n0',
        target: 'n1',
        attributes: {
          shape: 'arrow'
        }
      };
      // Add the edge to ogma.
      ogma.addEdge(e);
    </script>
  </body>
</html>

Result:

Hello world