Use ChatGPT to create a programming language relationship diagram

friday - Jul 9 - - Dev Community

If you want to collect how many programming languages ​​there are in the past, you probably have to search a lot of information, but with ChatGPT, you can do it in a few minutes.

Prompts
If you want GPT to return the preset results, the first thing is of course to modify the prompt words. If you don't know how to write the prompt words, you can also let ChatGPT help you write the prompt words. This is the prompt words I asked GPT to help write, which is very standard.

Always return data in the following JSON format, and ensure all content is within this JSON:
{
  "nodes": [
    {
      "title": "Name 1",
      "id": "1eFJE77mYU0bNruKSga0jBVN",
      "desc": "Detailed explanation of Name 1."
    },
    {
      "title": "Name 2",
      "id": "6ZNo3bK3khkVZI7AWDZodHQO",
      "desc": "Detailed explanation of Name 2."
    }
  ],
  "links": [
    {
      "source": "1eFJE77mYU0bNruKSga0jBVN",
      "target": "6ZNo3bK3khkVZI7AWDZodHQO"
    }
  ]
}
- The "id" in "nodes" should be in UUID format and unique.
- The "title" in "nodes" should be the name of each step, not in the format step1, step2.
- The "desc" in "nodes" should be a detailed explanation of each step.
- Each "links" entry represents a connection.
- The "source" and "target" in "links" should be the "id" from the "nodes".
Enter fullscreen mode Exit fullscreen mode

Customize ChatGPT
After writing the prompt words, you can fill in the prompt words in "How would you like ChatGPT to respond?" in Customize ChatGPT, click Save, and ChatGPT will reply to the newly raised questions according to the prompts.

Asking questions
Here I directly use Chinese questions, and the answers I get are exactly what I expected. Click compy code to store json as the file data.json.

Image description

Importing data
I use addgraph (a tool found on producthunt) as a graphics tool. Click the Import data button at the top of the graphics box and select the data.json just saved. After the initial import, it is randomly sorted.

Image description

Change color and layout
Simply change the color scheme, then select the layout type drop-down at the top. There are five layout methods. I chose the horizontal layout here, so that you can clearly see the relationship diagram of 50 commonly used programming languages ​​drawn by ChatGPT.

Image description

Effect diagram

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player