ReactJS-从JSON对象绘制一个包含关系的ER图？

我试图用ReactJS从一个JSON文件中绘制一个ER图。我有一个文件，可以在其中查看表及其之间的关系（“对象中的关系”）。像数据库一样，有对象

如何使用ReactJS创建这样一个ER图或方案？作为初学者，我没有设法使用风暴图，我不知道它会是什么样子

JSON对象在每个外键表中包含任务、用户、注释以及它们之间的关系等表。我需要某种方式来显示DB表并从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"
      ]
    ]
  }
}