SVG

This example shows how to export the visualisation as an SVG file. It uses the SVG export API.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

ogma.styles.addRule({
  edgeAttributes: {
    text: {
      content: 'Edge',
      backgroundColor: 'darkorange',
      minVisibleSize: 0
    }
  },
  nodeAttributes: {
    text: {
      content: 'Node',
      backgroundColor: 'pink'
    },
    badges: {
      topRight: {
        text: 'B'
      }
    }
  }
});

ogma.generate
  .random({ nodes: 3, edges: 4 })
  .then(g => ogma.setGraph(g))
  .then(() => ogma.view.locateGraph())
  .then(() =>
    ogma.export.svg({
      download: false,
      groupSemantically: false
    })
  )
  .then(svg => {
    const div = document.createElement('div');
    div.innerHTML = svg;
    document.body.appendChild(div);
  });

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <hr />
    <span class="arrow">&darr;</span>
    <br />
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container,
svg {
  height: 300px;
}

body {
  text-align: center;
}

.arrow {
  margin-top: -1.5em;
  display: inline-block;
  position: absolute;
  padding: 0.5em;
  background: white;
}

SVG ​

SVG