From 2c478db23fe0de4628543028cba5b3da10dd6cf4 Mon Sep 17 00:00:00 2001
From: Dylan Vorster <ghost@gitbook.com>
Date: Sat, 17 Mar 2018 11:01:44 +0000
Subject: [PATCH 1/3] Updates test.md

Auto commit by GitBook Editor
---
 SUMMARY.md | 5 +++++
 test.md    | 2 ++
 2 files changed, 7 insertions(+)
 create mode 100644 SUMMARY.md
 create mode 100644 test.md

diff --git a/SUMMARY.md b/SUMMARY.md
new file mode 100644
index 0000000..ba20601
--- /dev/null
+++ b/SUMMARY.md
@@ -0,0 +1,5 @@
+# Summary
+
+* [Introduction](README.md)
+* [Test](test.md)
+
diff --git a/test.md b/test.md
new file mode 100644
index 0000000..32f3210
--- /dev/null
+++ b/test.md
@@ -0,0 +1,2 @@
+This is just a test
+

From adf268697a2d23ad9b213f4dfa8b5a5c0ad924f1 Mon Sep 17 00:00:00 2001
From: Dylan Vorster <ghost@gitbook.com>
Date: Sat, 17 Mar 2018 11:08:00 +0000
Subject: [PATCH 2/3] Deletes test.md

Auto commit by GitBook Editor
---
 SUMMARY.md | 7 ++++++-
 test.md    | 2 --
 2 files changed, 6 insertions(+), 3 deletions(-)
 delete mode 100644 test.md

diff --git a/SUMMARY.md b/SUMMARY.md
index ba20601..6c819f1 100644
--- a/SUMMARY.md
+++ b/SUMMARY.md
@@ -1,5 +1,10 @@
 # Summary
 
 * [Introduction](README.md)
-* [Test](test.md)
+* [Interacting with diagrams](/docs/Interactive Usage.md)
+* About the project
+  * [Testing](/docs/Testing.md)
+  * [Architecture Questions](/docs/Architecture Questions.md)
+
+
 
diff --git a/test.md b/test.md
deleted file mode 100644
index 32f3210..0000000
--- a/test.md
+++ /dev/null
@@ -1,2 +0,0 @@
-This is just a test
-

From 94fe0fc854bf5ea0f8d4f8c3da72a4cb7f2521fe Mon Sep 17 00:00:00 2001
From: Dylan Vorster <ghost@gitbook.com>
Date: Sat, 17 Mar 2018 12:16:26 +0000
Subject: [PATCH 3/3] Updates docs/Getting Started.md

Auto commit by GitBook Editor
---
 SUMMARY.md              |   3 +-
 about-the-project.md    |   0
 docs/Getting Started.md | 142 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 about-the-project.md
 create mode 100644 docs/Getting Started.md

diff --git a/SUMMARY.md b/SUMMARY.md
index 6c819f1..a6e74ef 100644
--- a/SUMMARY.md
+++ b/SUMMARY.md
@@ -2,7 +2,8 @@
 
 * [Introduction](README.md)
 * [Interacting with diagrams](/docs/Interactive Usage.md)
-* About the project
+* [Getting Started](/docs/Getting Started.md)
+* [About the project](about-the-project.md)
   * [Testing](/docs/Testing.md)
   * [Architecture Questions](/docs/Architecture Questions.md)
 
diff --git a/about-the-project.md b/about-the-project.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/Getting Started.md b/docs/Getting Started.md
new file mode 100644
index 0000000..6602b8a
--- /dev/null
+++ b/docs/Getting Started.md	
@@ -0,0 +1,142 @@
+# Getting started
+
+## Installation via NPM
+
+The first thing you need to do, is grab the distribution files on NPM. You can do this either using yarn or npm
+
+**Via yarn:**
+
+```
+yarn install storm-react-diagrams
+```
+
+**Via npm:**
+
+```
+npm install storm-react-diagrams
+```
+
+When you run this in your project directory, this will install the library into node\_modules/storm-react-diagrams. You will then find a dist folder that contains all the minified and production ready code.
+
+This will also install React and a few other dependencies that you need in order to use this library.
+
+## Including the library
+
+When including the library you will need both the javascript files as well as the raw BEM styles. Both are included in the dist folder and there are numerous ways to integrate them into your project:
+
+#### Getting the javascript files
+
+**Using Typescript / ES6: \(recommended\)**
+
+```js
+import * as SRD from "storm-react-diagrams"
+```
+
+**Using RequireJS:**
+
+```js
+var SRD = require("storm-react-diagrams)
+```
+
+**As a script tag \(not recommended\)**
+
+```html
+<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="node_modules/storm-react-diagrams/dist/main.js">
+```
+
+#### Getting the CSS
+
+**Using RequireJS / Typescript/ ES6 \(recommended\)**
+
+Make sure you have the style-loader enabled and then:
+
+```js
+require("storm-react-diagrams/dist/style.min.css");
+```
+
+or make sure you have the sass-loader enabled and then:
+
+```js
+require("storm-react-diagrams/src/sass/main.scss");
+```
+
+If you are using typescript and get a "require function not found" then make sure to
+
+```
+yarn add @types/node
+```
+
+which will give you the typescript definition files for requireJS
+
+**Using SASS:**
+
+setup your include paths on webpack or lib sass using the following option
+
+```
+includePaths: ["node_modules"]
+```
+
+and then if you want the raw sass source code:
+
+```sass
+@import "~storm-react-diagrams/src/sass/main";
+```
+
+or if you want the minified css
+
+```sass
+@import "~storm-react-diagrams/dist/style.min";
+```
+
+**Using a style tag**
+
+or if you want the minified css
+
+```html
+<link rel="stylesheet" href="node_modules/dist/style.min.css">
+```
+
+## Render your first diagram
+
+In your library code
+
+```js
+// 1) setup the diagram engine
+var engine = new SRD.DiagramEngine();
+engine.installDefaultFactories();
+
+// 2) setup the diagram model
+var model = new SRD.DiagramModel();
+
+// 3) create a default node
+var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
+let port1 = node1.addOutPort("Out");
+node1.setPosition(100, 100);
+
+// 4) create another default node
+var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
+let port2 = node2.addInPort("In");
+node2.setPosition(400, 100);
+
+// 5) link the ports
+let link1 = port1.link(port2);
+
+// 6) add the models to the root graph
+model.addAll(node1, node2, link1);
+
+// 7) load model into engine
+engine.setDiagramModel(model);
+```
+
+And then create an instance of the diagram widget. An example of the simplest possible react widget to do this would be:
+
+```jsx
+function SimpleDiagramWidget(props) {
+  return <SRD.DiagramWidget diagramEngine={props.engine} />;
+}
+```
+
+
+