Badge

Badges are "extensions" of node shapes. Nodes can have up to 4 badges (top left, top right, bottom left, bottom-right). Badges have a stroke, a background (color or image) and can contain text or icons.
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css"
    rel="stylesheet">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>

  <!-- Force the loading of the font awesome -->
  <i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>

  <script>
    'use strict';

    var COLORS = [
      '#965E04',
      '#C89435',
      '#F7A456',
      '#AFCF8A',
      '#7B39DE',
      '#B095C0',
      '#D24556',
      '#93C2FA',
      '#9DB09E',
      '#F8C821'
    ];

    var ICONS = [
      '\uF11b',
      '\uF11c',
      '\uF024',
      '\uF128',
      '\uF129',
      '\uF130',
      '\uF131',
      '\uF3ed'
    ];

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

    // Rules to specify the node style. Functions must be deterministic.
    ogma.styles.addNodeRule({
      color: function (n) {
        return COLORS[n.getId() % COLORS.length];
      },
      text: function (n) {
        return 'Node ' + n.getId();
      },
      radius: 15,
      badges: {
        bottomRight: {
          color: '#fff',
          text: {
            font: 'Font Awesome 5 Free', // Use FontAwesome icons.
            color: 'black', // Use the node color.
            // Retrieve the icon based on the node id.
            style: 'bold',
            content: function (n) {
              return ICONS[n.getId() % ICONS.length];
            }
          },
          stroke: {
            color: 'inherit', // Use the node color
            width: 1
          }
        }
      }
    });

    // Generate a random graph
    ogma.generate
      .random({ nodes: 10, edges: 0 })
      .then(ogma.setGraph)
      .then(function () {
        return ogma.layouts.force({ locate: true });
      })
      .then(function () {
        // Change the badge of a single node: use a
        // background image and some text content.
        ogma.getNode('0').setAttributes({
          badges: {
            bottomRight: {
              image: 'flags/fr.svg',
              text: {
                font: 'Arial',
                style: 'bold',
                content: 'FR',
                color: 'black'
              }
            }
          }
        });
      });
  </script>
</body>

</html>