This javascript library allows you to make tree in HTML from JSON.

First of all you can download the library and only add the 2 minified files in the folder lib/ like that:

<script type="text/javascript" src="path/to/your/site/index/tree_maker-min.js"></script>
<link rel="stylesheet" href="path/to/your/site/index/tree_maker-min.css">

Add a div to your page where you want your tree:

<div id="my_tree"></div>

Then add this javascript code

//The structure of your tree
let tree = {
        key_1: {
            key_2: '',
            key_3: '',
            key_4: '',
            key_5: ''
        },
    };

//The parameters of your tree
let treeParams = {
    key_1: {trad: 'Card 1', styles: {'box-shadow': '0 0 15px 2px blue'}},
    key_2: {trad: 'Card 2', styles: {'color': 'red'}},
    key_3: {trad: 'Card 3'},
    key_4: {trad: 'Card 4'},
    key_5: {trad: 'Card 5'},
};

//The function which will build the tree
treeMaker(tree, {
    id: 'my_tree', card_click: function (element) {
        console.log(element);
    },
    treeParams: treeParams,
    'link_width': '4px',
    'link_color': '#ff5259',
});

You need to create an object which contains either other object if you want to continue the tree or an empty string if there are no more step to your tree. You need to fill the tree with keys which are used in the tree parameters.

trad: the text that will be showed in the card, if there is no trad the key will be showed styles: the style you want to add to a specific card, every CSS rules will worked

This function takes 2 arguments: the tree in JSON and parameters which is an object.

• Make the tree editable (add and remove card)
• Allow people to create types and then assign them to card
• Allow drag and drop in the editor

This library is available under the MIT license