Update library and documentation

.npmignore

@@ -0,0 +1,5 @@
+.DS_Store
+.git
+docs
+.assets
+samples

README.md

@@ -1,6 +1,8 @@
 # Graphviz-node
 
-A simple node wrapper for graphviz inspired by https://github.com/glejeune/node-graphviz. This library has a dependency of [Graphviz](http://www.graphviz.org/). 
+A simple node wrapper for [Graphviz](http://www.graphviz.org/).  
+
+> **NOTE:** This is a stripped down node implementation of [Graphviz](http://www.graphviz.org/). It does not support support undirected graph  objects, clusters or subgraphs. For more bugs/issues or additional features please submit an issue.
 
 ## Documentation
 
@@ -13,6 +15,19 @@ npm run docs
 
 Js docs will automatically open in your browser.
 
+You can also view node examples in the `samples/` directory.
+
+## Prerequisite
+
+- [Node](https://nodejs.org/en/)
+- [Graphviz](http://www.graphviz.org/)
+
+## Installation
+
+```
+npm install graphviz-node --save
+```
+
 ## Getting Started
 
 ```js
@@ -22,12 +37,14 @@ let Graph = require('../graph');
 let g = new Graph();
 
 // Create nodes
-let n1 = g.addNode("Node 1", {"color": "blue"});
-let n2 = g.addNode("Node 2");
+let a = g.addNode("A", {"color": "blue"});
+let b = g.addNode("B");
+let c = g.addNode("C");
 
 // Add edge between the two nodes
-let e1 = g.addEdge(n1, n2);
-e1.set({"style": "dotted"});
+let e1 = g.addEdge(a, b);
+let e2 = g.addEdge(a, c);
+let e3 = g.addEdge(b, c, {'constraint': false});
 
 // Print dot file
 let dotScript = g.toDot();
@@ -37,6 +54,8 @@ console.log(dotScript);
 g.render("example");
 ```
 
+![getting-started](./.assets/getting-started.svg)
+
 ## Basic Usage
 
 The graphviz module provides one `Graph` class.  It creates graph descriptions in the DOT language for **directed** graphs.
@@ -47,7 +66,7 @@ Create a directed graph by instantiating a new Graph object:
 let Graph = require('../graph');
 
 // Create new graph
-let g = new Graph("The Round Table");
+let g = new Graph("Example");
 
 // New directed Graph object
 console.log(g);
@@ -116,9 +135,12 @@ console.log(g.toDot());
 
 ### Attributes
 
-To directly add attritbute statements (affecting all following graph, node, or edge items within the same graph, use `set()` method with the target or pass an optional attributes object on declaration:
+To directly add attritbute statements (affecting all following graph, node, or edge items within the same graph, use `set()` method with the target or pass an optional attributes object on declaration.
+
+A full list of node, Eege, and graph attributes can be found here: http://www.graphviz.org/doc/info/attrs.html
 
 **Node Attributes**
+
 ```js
 // Option 1
 let attributes = {
@@ -137,6 +159,7 @@ n1.set({"shape": "note"});
 ```
 
 **Edge Attributes**
+
 ```js
 // Option 1
 let attributes = {
@@ -148,8 +171,93 @@ let e1 = g.addEdge("1", "2", attributes);
 
 // Option 2
 let e1 = g.addEdge("1", "2");
-e1.set({"shape": "note"});
+e1.set({"style": "dotted"});
+```
+
+**Example Attributes**
+
+```js
+// Create new graph
+let g = new Graph();
+g.set({'rankdir': 'LR'});
+
+let n1 = g.addNode("node 1");
+n1.set({"shape": "note"});
+
+let n2 = g.addNode("node 2");
+n2.set({"shape": "egg"});
+
+let e1 = g.addEdge(n1, n2);
+e1.set({"color": "purple"});
+
+console.log(g.toDot());
+```
+
+![HTML Node Table](./.assets/attributes.svg)
+
+## HTML Nodes
+
+HTML nodes are the same as regular nodes with embedded HTML in the label attribute. This library supports the ability to create HTML-like nodes using special methods to help build the HTML table syntax automatically.
+
+The HTML node class `extends` the Node class with the addition of specific methods to build a table with rows for the node's label.
+
+**Example 1**
+
+The `addRow()` methods allows for an array of objects that define the `<td>` element data and attributes. The following example creates an HTML table with one row (`<tr>`) and three columns (`<td>`).
+
+```js
+// Create new graph
+let g = new Graph();
+
+let h1 = g.addHTMLNode('h1', {'shape':'none'});
+h1.setTableAttributes({'border':'0', 'cellborder':'1', 'cellspacing':'0', 'cellpadding': '4'});
+h1.addRow([
+ {
+     "data": "left",
+     "attributes": {"port": "port0"}
+ },
+ {
+     "data": "middle",
+     "attributes": {"port": "port1"}
+ },
+ {
+     "data": "right",
+     "attributes": {"port": "port2"}
+ }
+]);
+
+console.log(g.toDot());
+
+// dot syntax that gets generated...
+digraph {
+  "h1" [shape=none, label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4"><tr><td port="port0">left</td><td port="port1">middle</td><td port="port2">right</td></tr></table>>];
+}
+```
+
+![HTML Node Table](./.assets/html.svg)
+
+**Example 2**
+
+```js
+// Create new graph
+let g = new Graph('html');
+
+let h1 = g.addHTMLNode('abc', {'shape':'none', 'margin':'0'});
+h1.setTableAttributes({'border':'0', 'cellborder':'1', 'cellspacing':'0', 'cellpadding':'4'});
+h1.addRow([{'data':'<FONT COLOR="red">hello</FONT><BR/>world','attributes':{'rowspan':'3'}}, {'data':'b', 'attributes':{'colspan':'3'}}, {'data':'g', 'attributes':{'rowspan':'3', 'bgcolor':'lightgrey'}}, {'data':'h', 'attributes':{'rowspan':'3'}}]);
+h1.addRow([{'data':'c','attributes':{}}, {'data':'d', 'attributes':{'port':'here'}}, {'data':'e', 'attributes':{}}]);
+h1.addRow([{'data':'f','attributes':{'colspan':'3'}}]);
+
+console.log(g.toDot());
+
+// Dot syntax that gets generated...
+digraph "html" {
+  "abc" [shape=none, margin=0, label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4"><tr><td rowspan="3"><FONT COLOR="red">hello</FONT><BR/>world</td><td colspan="3">b</td><td rowspan="3" bgcolor="lightgrey">g</td><td rowspan="3">h</td></tr><tr><td>c</td><td port="here">d</td><td>e</td></tr><tr><td colspan="3">f</td></tr></table>>];
+}
 ```
 
+![HTML Node Table 2](./.assets/html_2.svg)
 
+## Attribution
 
+This library was heavily inspired by https://github.com/glejeune/node-graphviz. Code was rewritten to support a stripped down version for specific use-cases. For a more complete set of features and support of graphviz, please consider using glejeune's implementation (Undirected graphs, clusters, subgraphs, etc.).

index.js

@@ -1,2 +1,2 @@
 // Ref: https://graphviz.gitlab.io/_pages/pdf/dotguide.pdf
-module.exports = require("./graph");
+module.exports = require("./lib/graph");

jsdoc.json

@@ -2,7 +2,7 @@
     "plugins": [],
     "recurseDepth": 10,
     "source": {
-        "include":["graph.js", "edge.js", "node.js", "attributes.js", "html-node.js"],
+        "include":["./lib/"],
         "exclude":["index.js"],
         "includePattern": ".+\\.js(doc|x)?$",
         "excludePattern": "(^|\\/|\\\\)_"

package.json

@@ -17,7 +17,6 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\"",
-    "graph": "dot -Tsvg -o tree.svg tree.dot",
     "docs": "open docs/index.html",
     "generate-docs": "./node_modules/.bin/jsdoc -r -c jsdoc.json -d docs -R README.md"
   },

samples/attributes.js

@@ -0,0 +1,16 @@
+let Graph = require('../index');
+
+// Create new graph
+let g = new Graph();
+g.set({'rankdir': 'LR'});
+
+let n1 = g.addNode("node 1");
+n1.set({"shape": "note"});
+
+let n2 = g.addNode("node 2");
+n2.set({"shape": "egg"});
+
+let e1 = g.addEdge(n1, n2);
+e1.set({"color": "purple"});
+
+console.log(g.toDot());

samples/basic.js

@@ -0,0 +1,18 @@
+let Graph = require('../index');
+
+// Create new graph
+let g = new Graph();
+
+// Create nodes
+let a = g.addNode("A", {"color": "blue"});
+let b = g.addNode("B");
+let c = g.addNode("C");
+
+// Add edge between the two nodes
+let e1 = g.addEdge(a, b);
+let e2 = g.addEdge(a, c);
+let e3 = g.addEdge(b, c, {'constraint': false});
+
+// Print dot file
+let dotScript = g.toDot();
+console.log(dotScript);