1 My-Mind

https://blog.nanomat.top/my-mind/
2 jsmind

<head>
  <link type="text/css" rel="stylesheet" href="https://blog.nanomat.top/jsmind/style/jsmind.css" />
  <style type="text/css">
        #jsmind_container{
            width:800px;
            height:600px;
            border:solid 1px #ccc;
            /*background:#f4f4f4;*/
            background:#f4f4f4;
        }
  </style>
  <script type="text/javascript" src="https://blog.nanomat.top/jsmind/js/jsmind.js"></script>
  <script type="text/javascript" src="https://blog.nanomat.top/jsmind/js/jsmind.draggable.js"></script>
</head>

<body>
<div id="jsmind_container"></div>
<script type="text/javascript">
    function load_jsmind(){
        var mind = {
            "meta":{
                "name":"Topics",
                "author":"ywmu",
                "version":"0.2",
            },
            "format":"node_array",
            "data":[
                {"id":"root", "isroot":true, "topic":"Topics", "background-color":"yellow","foreground-color":"red"},
                {"id":"sub1", "parentid":"root","direction":"left", "topic":"Selection"},
                {"id":"sub11", "parentid":"sub1","direction":"left", "topic":"Novelty"},
                {"id":"sub12", "parentid":"sub1","direction":"left", "topic":"Feature"},
                {"id":"sub2", "parentid":"root","direction":"right", "topic":"Project"},
                {"id":"sub21", "parentid":"sub2","direction":"right", "topic":"做什么"},
                {"id":"sub22", "parentid":"sub2","direction":"right", "topic":"怎么做"},
                
                {"id":"sub3", "parentid":"root","direction":"left", "topic":"Borophene"},
                {"id":"sub31", "parentid":"sub3", "topic":"Topic 1"},
                {"id":"sub32", "parentid":"sub3", "topic":"Topic2"},
                {"id":"sub4", "parentid":"root","direction":"right", "topic":"Phosphorene"},
                {"id":"sub41", "parentid":"sub4", "topic":"Topic 3"},
                {"id":"sub42", "parentid":"sub4", "topic":"Topic 4"},
                            ]
        };
        var options = {
            container:'jsmind_container',
            editable:true,
            theme:'primary',
        }
        var jm = jsMind.show(options,mind);
        // jm.set_readonly(true);
        // var mind_data = jm.get_data();
        // alert(mind_data);
        //jm.add_node("sub2","sub23", "new node", {"background-color":"red"});
        jm.set_node_color('sub1', 'red', 'white');
        jm.set_node_color('sub2', 'red', 'white');
        jm.set_node_color('sub3', 'red', 'white');
        jm.set_node_color('sub4', 'blue', 'white');
        jm.set_node_color('sub31', 'green', 'yellow');
        jm.set_node_color('sub33', 'green', 'yellow');
        jm.set_node_color('sub32', 'green', 'orange');
        jm.set_node_color('sub43', '', 'orange');
        jm.set_node_color('sub41', 'green', 'yellow');

    }
    load_jsmind();
</script>
</body>
1 My-Mind

2 jsmind

2.1 Example
