The Fishbone diagram, also known as the Ishikawa diagram, is a systematic graphical tool for analyzing the root causes of problems. By breaking a problem down into various factors, it assists in identifying and resolving issues.

import { Fishbone } from '@ant-design/graphs';

When to Use

The Fishbone analysis method, also referred to as cause-and-effect analysis, was developed by the Japanese management expert Kaoru Ishikawa. This method is designed to look beyond symptoms to uncover the underlying causes of a problem, helping to quickly identify the root causes that lead to the issue.

The basic principle of the Fishbone method is to identify the main causes of a problem (represented as the fish’s head) and list them as primary branches (the fish’s spine). These main causes are then further subdivided into smaller causes (represented by the fish's branches). The analysis continues in this manner until the underlying causes are fully explored, leading to potential solutions or actionable steps.

Examples

API

For general graph properties, refer to: General Graph Properties

Fishbone

Data

Two data formats are supported:

1. (👍 Recommended) Tree data

Type Definition:

type TreeData = {
  id: string;
  children?: TreeData[];
  [key: string]: unknown;
};

Example:

const data = {
  id: 'root',
  children: [
    {
      id: 'Child 1',
      value: 10,
      children: [
        { id: 'Sub 1-1', value: 5 },
        { id: 'Sub 1-2', value: 5 },
      ],
    },
    {
      id: 'Child 2',
      value: 20,
      children: [
        { id: 'Sub 2-1', value: 10 },
        { id: 'Sub 2-2', value: 10 },
      ],
    },
  ],
};

2. Graph data. If the expand-collapse behavior is enabled, make sure the children field is included in the data.

const graphData = {
  nodes: [
    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
    { id: '3', data: { label: 'Node 3' } },
    { id: '4', data: { label: 'Node 4' } },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

Layout for fishbone diagrams. Parameters are as follows: