https://github.com/n-yousefi/arg-graph

a simple JQuery library to create or edit directed graphs.
https://github.com/n-yousefi/arg-graph

diagram directed-graphs flowchart free graph html javascript jquery svg

Last synced: 25 days ago
JSON representation

a simple JQuery library to create or edit directed graphs.

• Host: GitHub
• URL: https://github.com/n-yousefi/arg-graph
• Owner: n-yousefi
• License: mit
• Created: 2018-04-02T12:16:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-09-27T10:11:55.000Z (about 2 years ago)
• Last Synced: 2024-11-04T01:32:53.074Z (about 2 months ago)
• Topics: diagram, directed-graphs, flowchart, free, graph, html, javascript, jquery, svg
• Language: JavaScript
• Homepage:
• Size: 78.1 KB
• Stars: 14
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: History/arg-graph-1.0.0/Demo/Example1.html
  • License: LICENSE

Awesome Lists containing this project

README

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

# We highly encourage you to consider [connect-it](https://github.com/n-yousefi/connect-it) instead.

## Arg-Graph

[Arg](https://en.wikipedia.org/wiki/Arg_e_Bam)-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.

![Directed Javascript graph](https://github.com/n-yousefi/Arg-Graph/blob/master/demo.png)

## Examples/Demos

The best way to become acquainted with the library is to see [Demos](https://n-yousefi.github.io/Arg-Graph/arg-graph-1.1/Example1.html)

## How it works

### Creating digraph:

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

```html





```

```javascript

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:

```html



     


        Title

        

        

    

    


        Title

        

        

    



```

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

```javascript

argGraph.refresh()

```

#### import new item/s

Creating a JavaScript object and import that to the graph:

```javascript

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.

```javascript

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:

```javascript

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