ReactJS - нарисовать диаграмму ER с отношениями из объекта JSON?

Question

Я пытаюсь нарисовать ER-диаграмму из JSON-файла с помощью ReactJS. У меня есть файл, где я могу видеть таблицы и отношения между ними («отношения» в объекте). Как база данных, с объектами.

Как бы я создал такую ​​диаграмму ER или Схему с ReactJS? Мне не удалось использовать Storm Diagrams для начинающих, я не знал, как это будет выглядеть.

Объект JSON содержит таблицы, такие как задачи, пользователи, аннотации и связи между ними в каждой таблице для стороннихключи. Я хочу какой-то способ показать таблицы БД и визуализировать их из объекта JSON. Вот мой объект JSON:

  "tasks": {
    "columns": [
      "id",
      "name",
      "task_type",
      "organization_id",
      "documentation",
      "created_at"
    ],
    "relations": []
  },
  "users": {
    "columns": [
      "id",
      "name",
      "permissions",
      "organization_id",
      "created_at"
    ],
    "relations": []
  },
  "user_tasks": {
    "columns": [
      "id",
      "user_id",
      "task_id",
      "created_at"
    ],
    "relations": [
      [
        "user_id",
        "users",
        "id"
      ],
      [
        "task_id",
        "tasks",
        "id"
      ]
    ]
  },
  "data": {
    "columns": [
      "id",
      "metadata_id",
      "sha256",
      "file_name",
      "audio_data_type_id",
      "created_at"
    ],
    "relations": [
      [
        "metadata_id",
        "data_metadata",
        "id"
      ],
      [
        "audio_data_type_id",
        "audio_data_types",
        "id"
      ]
    ]
  },
  "tasks_data": {
    "columns": [
      "id",
      "task_id",
      "data_id",
      "priority",
      "created_at"
    ],
    "relations": [
      [
        "task_id",
        "tasks",
        "id"
      ],
      [
        "data_id",
        "data",
        "id"
      ]
    ]
  },
  "data_metadata": {
    "columns": [
      "id",
      "name",
      "country",
      "region",
      "primary_language",
      "organization_id",
      "created_at"
    ],
    "relations": []
  },
  "annotation_types": {
    "columns": [
      "id",
      "created_by",
      "objective_name",
      "label_name",
      "organization_id",
      "deleted_at",
      "created_at",
      "value_type"
    ],
    "relations": [
      [
        "created_by",
        "users",
        "id"
      ]
    ]
  },
  "audio_data_types": {
    "columns": [
      "id",
      "bit_width",
      "channels",
      "encoding",
      "sampling_rate"
    ],
    "relations": []
  },
  "audio_annotations": {
    "columns": [
      "id",
      "root_id",
      "child_id",
      "parent_id",
      "annotation_type_id",
      "created_by",
      "task_id",
      "data_id",
      "value",
      "confidence",
      "created_at",
      "deleted_at",
      "speaker",
      "start_time",
      "stop_time"
    ],
    "relations": [
      [
        "task_id",
        "tasks",
        "id"
      ],
      [
        "created_by",
        "users",
        "id"
      ],
      [
        "data_id",
        "data",
        "id"
      ],
      [
        "annotation_type_id",
        "annotation_types",
        "id"
      ]
    ]
  }
}