GraphML

This example show how to use the GraphML export API to export the graph data as a GraphML file. The GraphML format is a standard graph exchange format that can be used to import and export graph data from and to various graph visualization tools.

index.tsindex.htmlstyles.css

import Ogma, { RawGraph } from '@linkurious/ogma';

import {
  highlightElement,
  loadLanguage
} from 'https://cdn.jsdelivr.net/npm/@speed-highlight/core@1.2.6/dist/index.js';
import xmlFormatter from 'https://cdn.jsdelivr.net/npm/xml-formatter@3.6.0/+esm';

loadLanguage('xml');
function highlight(element: HTMLElement, code: string) {
  element.textContent = xmlFormatter(code);
  highlightElement(element, 'xml');
}

interface NodeData {
  properties: {
    aString: string;
    aCrappyString: string;
    aBoolean: boolean;
    anInteger: number;
    aFloat: number;
    anArray: number[];
    aNull: null;
    anUndef: undefined;
    anObject: object;
    aFunction: (argument: any) => any;
  };
  categories: string[];
}

interface EdgeData {
  aString: string;
  aBoolean: boolean;
  anInteger: number;
  aNull: null;
  anObject: object;
  aFunction: (argument: any) => any;
}

const addData = ({ nodes, edges }: RawGraph): RawGraph<NodeData, EdgeData> => {
  for (let i = 0; i < nodes.length; i++) {
    nodes[i].data = {
      properties: {
        aString: 'abc ' + i,
        aCrappyString: 'cr"p\n\r ',
        aBoolean: true,
        anInteger: i,
        aFloat: Math.random(),
        anArray: [1, 2, 3],
        aNull: null,
        anUndef: undefined,
        anObject: {},
        // @ts-expect-error
        aFunction: argument => {}
      },
      categories: ['catA', 'catB']
    };
  }

  for (let i = 0; i < edges.length; i++) {
    edges[i].data = {
      aString: 'abc ' + i,
      aBoolean: true,
      anInteger: i,
      aNull: null,
      anObject: {},
      // @ts-expect-error
      aFunction: argument => {}
    };
  }

  return { nodes, edges };
};

const ogma = new Ogma<NodeData, EdgeData>({
  container: 'graph-container'
});

// Generate a random graph and add data to the graph.
const graph = addData(await ogma.generate.random({ nodes: 20, edges: 10 }));
// Assign the graph to Ogma.
await ogma.setGraph(graph);
await ogma.layouts.force({ locate: true, duration: 500 });
// Export the graph to GEXF.
const graphml = await ogma.export.graphml({
  download: false,
  directedEdges: false
});
highlight(document.getElementById('output')!, graphml);

html

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

    <link type="text/css" rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@speed-highlight/core@1.2.6/dist/themes/github-dark.css"
    />
    </script>
  </head>
  <body>
    <div id="graph-container"></div>
    <pre id="output"></pre>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#graph-container {
  top: 0;
  height: 66%;
  left: 0;
  right: 0;
  position: absolute;
}
#output {
  top: 66%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  overflow: auto;
  font-size: 12px;
  line-height: 14px;
  border-radius: 0;
}

GraphML ​

GraphML