Note: This repository is no longer in active development or maintenance.

We highly encourage you to consider connect-it instead.

Arg-Graph

Arg-Graph is a simple free library for creating dynamic Directed Graph using JQuery which enables you to draw SVG based connectors (lines, arrows) between DOM nodes via drag and drop.

Examples/Demos

The best way to become acquainted with the library is to see Demos

How it works

Creating digraph:

You can create a digraph (directed graph) easily by calling the "ArgGraph" function.

<div class="arg-Graph">
</div>

var argGraph=$('.arg-Graph').ArgGraph();

Adding new nodes:

Append html code

You can append new items to the container div, as html code. like this:

<div class="arg-Graph">
     <div id="item1" class="arg-Graph_item" data-neighbors="item2,item3" style="left: 259px; top: 22px;">
        Title
        <span class="arg-Graph_connector-handler"></span>
        <span class="arg-Graph_delete-item"></span>
    </div>
    <div id="item2" class="arg-Graph_item" style="left: 159px; top: 212px;">
        Title
        <span class="arg-Graph_connector-handler"></span>
        <span class="arg-Graph_delete-item"></span>
    </div>
</div>

Now you must refresh the graph by calling 'refresh' function.

argGraph.refresh()

import new item/s

Creating a JavaScript object and import that to the graph:

newItem = {
        "id": "item1",
        "text": "Start",
        "position": {
            "left": "259px",
            "top": "22px"
        },
        "neighbors": [
            "item2",
            "item3"
        ]
    }
argGraph.import(newItem)

Note: You can append multiple items as array object using "import" function.

import JSON object

You can import this object as JSON format by calling "importJson" function.

var json=JSON.stringify(newItem,null,4);
argGraph.importJson(json);

Output

By calling "export"/"exportJson" function you can get a JavaScript/JSON object similar to the import object format:

var json = argGraph.exportJson();

result:
[
    {
        "id": "item7",
        "text": "Test",
        "position": {
            "left": "531.328px",
            "top": "406px"
        },
        "neighbors": [
            "item8"
        ]
    },
    {
        "id": "item8",
        "text": "Deployment",
        "position": {
            "left": "373.328px",
            "top": "463px"
        },
        "neighbors": [
            "item9"
        ]
    },
    {
        "id": "item9",
        "text": "Test",
        "position": {
            "left": "239.328px",
            "top": "515px"
        },
        "neighbors": ""
    }
]

Author

Naser Yousefi