You can use the children attribute to create children nodes that appear on the circumference of the nodes where they are indicated. Styles for the children nodes are applied similarly to the parent nodes.

Consider the following example:

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello'
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    }
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2
  },
  {
    id: 2,
    source: 2,
    target: 3
  }
];

const settings = {
  showLegend: false,
  baseStyles: {
    vertex: {
      label: { text: '${properties.name}' },
      // This would add two children to every vertex, any name can be assigned to these children nodes.
      children: {
        firstChild: {
          size: '4',
          color: 'red',
          children: {
            size: '2'
          }
        },
        secondChild: {
          size: '2',
          color: 'green',
          border: {
            'width': 1,
            'color': 'black'
          }
        }
      }
    }
  }
};

settings.ruleBasedStyles = [{
  component: 'vertex',
  target: 'vertex',
  stylingEnabled: true,
  conditions: {
    operator: 'and',
    conditions: [{
      property: "label",
      operator: "=",
      value: "blue"
    }]
  },
  style: { color: 'blue' }
}];

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

The corresponding visualization appears as shown: