so, 我看见了这个东西，然后我觉得很棒，于是我把它搞过来了）

无向图

{
    "width": "500px",
    "height": "500px",
    "nodes": [
        {
            "text": "1",
            "x": -1.96,
            "y": 1.9866665649414061,
            "color": "#4953ff"
        },
        {
            "text": "2",
            "x": -3.3200003051757814,
            "y": -2.9066668701171876,
            "color": "#4953ff"
        },
        {
            "text": "3",
            "x": 2.76,
            "y": 0.2666665649414062,
            "color": "#4953ff"
        },
        {
            "text": "4",
            "x": 0.28,
            "y": -2.32,
            "color": "#4953ff"
        }
    ],
    "edges": [
        {
            "text": "",
            "p1": "1",
            "p2": "2",
            "color": "#000000",
            "hasArrow": false
        },
        {
            "text": "",
            "p1": "2",
            "p2": "3",
            "color": "#000000",
            "hasArrow": false
        },
        {
            "text": "",
            "p1": "2",
            "p2": "4",
            "color": "#000000",
            "hasArrow": false
        },
        {
            "text": "",
            "p1": "3",
            "p2": "1",
            "color": "#000000",
            "hasArrow": false
        }
    ]
}

有向图

{
    "width": "500px",
    "height": "500px",
    "nodes": [
        {
            "text": "1",
            "x": -1.96,
            "y": 1.9866665649414061,
            "color": "#4953ff"
        },
        {
            "text": "2",
            "x": -3.3200003051757814,
            "y": -2.9066668701171876,
            "color": "#4953ff"
        },
        {
            "text": "3",
            "x": 2.76,
            "y": 0.2666665649414062,
            "color": "#4953ff"
        },
        {
            "text": "4",
            "x": 0.28,
            "y": -2.32,
            "color": "#4953ff"
        }
    ],
    "edges": [
        {
            "text": "",
            "p1": "1",
            "p2": "2",
            "color": "#000000",
            "hasArrow": true
        },
        {
            "text": "",
            "p1": "2",
            "p2": "3",
            "color": "#000000",
            "hasArrow": true
        },
        {
            "text": "",
            "p1": "2",
            "p2": "4",
            "color": "#000000",
            "hasArrow": true
        },
        {
            "text": "",
            "p1": "3",
            "p2": "1",
            "color": "#000000",
            "hasArrow": true
        }
    ]
}

自定义内容

{
  "width": "571px",
  "height": "568px",
  "nodes": [
    {
      "text": "1",
      "x": -0.46666656494140624,
      "y": 1.16,
      "color": "#4953ff"
    },
    {
      "text": "2",
      "x": -1.72,
      "y": -2.6933334350585936,
      "color": "#4953ff"
    },
    {
      "text": "hi",
      "x": 2.72,
      "y": -1.7066668701171874,
      "color": "red"
    }
  ],
  "edges": [
    {
      "text": "test",
      "p1": "1",
      "p2": "2",
      "color": "blue",
      "hasArrow": true
    },
    {
      "text": "",
      "p1": "1",
      "p2": "hi",
      "color": "red",
      "hasArrow": true
    }
  ]
}

怎么做的？

偷过来的

update 2022.1.17: 使用 JSXGraph 重置 虽然丑点但是比之前那个用不了的好）

编辑器

打开