G6

Diamond

G6

Diamond

Loading...

Overview

A diamond is a geometric shape with four equal sides and diagonal symmetry.

Applicable scenarios:

Used to represent decision nodes, conditional judgments, or critical paths.
Suitable for representing decision nodes or key steps in flowcharts.
Commonly used in flowcharts, decision trees, network diagrams, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: { nodes: [{ id: 'node1', style: { size: [48, 24], fill: '#7e3feb' } }] },
    node: { type: 'diamond' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'diamond' }, 'type').disable();

    const options = { 'size[0]': 48, 'size[1]': 24 };

    const optionFolder = gui.addFolder('diamond.style');
    optionFolder.add(options, 'size[0]', 0, 100, 1);
    optionFolder.add(options, 'size[1]', 0, 100, 1);

    optionFolder.onChange(({ object }) => {
      graph.updateNodeData([{ id: 'node1', style: { size: [object['size[0]'], object['size[1]']] } }]);
      graph.render();
    });
  },
);

设置 node.type 为 diamond 以使用菱形节点。

Style Configuration

If the element has specific attributes, we will list them below. For all general style attributes, see BaseNode

Example

Built-in Diamond Node Effect

Loading...

Overview

A diamond is a geometric shape with four equal sides and diagonal symmetry.

Applicable scenarios:

Used to represent decision nodes, conditional judgments, or critical paths.
Suitable for representing decision nodes or key steps in flowcharts.
Commonly used in flowcharts, decision trees, network diagrams, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: { nodes: [{ id: 'node1', style: { size: [48, 24], fill: '#7e3feb' } }] },
    node: { type: 'diamond' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'diamond' }, 'type').disable();

    const options = { 'size[0]': 48, 'size[1]': 24 };

    const optionFolder = gui.addFolder('diamond.style');
    optionFolder.add(options, 'size[0]', 0, 100, 1);
    optionFolder.add(options, 'size[1]', 0, 100, 1);

    optionFolder.onChange(({ object }) => {
      graph.updateNodeData([{ id: 'node1', style: { size: [object['size[0]'], object['size[1]']] } }]);
      graph.render();
    });
  },
);

设置 node.type 为 diamond 以使用菱形节点。

Style Configuration

If the element has specific attributes, we will list them below. For all general style attributes, see BaseNode