Пример использования Cytoscape

<script type="text/javascript" src="/static/js/cytoscape.min.js"></script>

<div id="flow" style="height: 300px;"></div>

<script>
var cy = cytoscape({
    container: document.getElementById('flow'),
    boxSelectionEnabled: false,
    elements: {
        nodes: [

            { data: {
                id: 'element1',
                name: 'Старт',
                label: 'Старт'
            } },

            { data: {
                id: 'element2',
                name: 'Задача1',
                label: 'Задача1'
            } },

            { data: {
                id: 'element3',
                name: 'Задача1',
                label: 'Задача1'
            } },


            { data: {
                id: 'element4',
                name: 'Стоп',
                label: 'Стоп'
            } },

        ],
        edges: [
            { data: { id: '1', source: 'element1', target: 'element2' } },
            { data: { id: '2', source: 'element2', target: 'element3' } },
            { data: { id: '3', source: 'element3', target: 'element4' } }
        ]
    },
    style: [

        {
            selector: 'node#element1',
            style: {
                'content': 'Старт',

                'background-color': '#00ff00',

            }
        },

        {
            selector: 'node#element2',
            style: {
                'content': 'Задача1',

                'background-color': '#0000ff',
                'shape': 'roundrectangle',

            }
        },

        {
            selector: 'node#element3',
            style: {
                'content': 'Задача2',

                'background-color': '#0000ff',
                'shape': 'roundrectangle',

            }
        },

        {
            selector: 'node#element4',
            style: {
                'content': 'Стоп',

                'background-color': '#ff0000',

            }
        },

    ]
});
var layout = cy.elements().layout({
    name: 'grid',
    columns: 4
});

layout.run();
</script>