All versions of this documentation
X

Exporting on Node.js

Ogma can run on Node.js, and with the right packages can perform PNG and SVG export:

Example of PNG export

import fs from 'fs';
import Ogma from 'ogma';
import Canvas from 'canvas';

// Specify the canvas dependency so Ogma can use it
Ogma.libraries.canvas = Canvas;

// Register the font that we're going to use
Canvas.registerFont('arial.ttf', {family: 'Arial'});

// Create an instance of Ogma
const ogma = new Ogma();

// Add a node
ogma.addNode({
  attributes: {
    shape: 'pentagon',
    color: 'orange',
    text: {
      content: 'Exported in Node.js',
      font: 'Arial',
      position: 'center'
    }
  }
});

// Export to a 200x200 PNG
ogma.export.png({width: 200, height: 200, background: 'white'}).then(function(base64Str) {

  // Remove the base 64 header
  base64Str = base64Str.replace(/^data:image\/png;base64,/, '');

  // Write the image to the disk
  fs.writeFileSync('graph.png', base64Str, 'base64');
});

PNG export

Exporting text in PNG

All used fonts must be specified with Canvas.registerFont(), before creating the first instance of Ogma:

Canvas.registerFont('arial.ttf', {family: 'Arial'});

Possible warning

When exporting text on Linux, you might get the warning Fontconfig error: Cannot load default config file. As explained here, it simply indicates that you don't have any fonts on your system. If all your fonts are registered through registerFont you can ignore the warning.

Example of SVG export

import fs from 'fs';
import Ogma from 'ogma';
import xmldom from 'xmldom';

// Specify the xmldom dependency so Ogma can use it
Ogma.libraries.xmldom = xmldom;

// Create an instance of Ogma
const ogma = new Ogma();

// Add a node
ogma.addNode({
  attributes: {
    shape: 'pentagon',
    color: 'orange',
    text: {
      content: 'Exported in Node.js',
      font: 'Arial',
      position: 'center'
    }
  }
});

// Export to a 200x200 SVG
ogma.export.svg({width: 200, height: 200, background: 'white'}).then(function(svg) {

  // Write the image to the disk
  fs.writeFileSync('graph.svg', svg, 'utf8');
});