.container
  .center
    include ../../../src/pages/Api/usage.svg
  script.
    new Vivus('usage-svg', window.site.vivusDefault);

  :markdown
    The hello world program requires calling `greuler` with an object having the following properties

    - `target` A selector to the container to hold the graph
    - `data` An object describing the properties of the graph
      - `data.nodes` The nodes of the graph, they need to have an `id`
      - `data.edges` The edges of the graph, they join two nodes by `id`

    A full description of the properties can be found in the [README](https://github.com/mauriciopoppe/greuler)

    After the instance is created it's needed to call `instance.update()` to run an initial layout
    process

  .row
    .six.columns
      pre
        code.javascript
          include ../../../static/examples/site/initialization.js
    .six.columns
      #hello-world
      script(src='scripts/examples/site/initialization.js')

  :markdown
    You can also generate a graph by calling `greuler.Graph.random(options)`

  .row
    .six.columns
      pre
        code.javascript
          include ../../../static/examples/site/random.js
    .six.columns
      #random
      script(src='scripts/examples/site/random.js')

