json - ReactJS - 用 JSON 对象的关系绘制 ER 图？

Question

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

我将如何使用 ReactJS 创建这样的 ER 图或方案？作为初学者，我没有设法使用 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"
      ]
    ]
  }
}

标签： jsonreactjser-diagrams