From 6acefbe02acac821c5f70e3ce6a53ecc923a765f Mon Sep 17 00:00:00 2001
From: Conor Gilsenan <conorgil@users.noreply.github.com>
Date: Tue, 24 Oct 2017 13:36:33 -0400
Subject: [PATCH 1/2] Add console.log() to print out the dot format

---
 docs/visualization.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/visualization.md b/docs/visualization.md
index e944dcf..eb33758 100644
--- a/docs/visualization.md
+++ b/docs/visualization.md
@@ -16,7 +16,7 @@ state machine configuration to the `.dot` language expected by GraphViz using th
     ]
   });
 
-  visualize(fsm)
+  console.log(visualize(fsm));
 ```
 
 Generates the following .dot syntax:
@@ -47,7 +47,7 @@ You can customize the generated `.dot` output - and hence the graphviz visualiza
       { name: 'close', from: 'open',   to: 'closed', dot: { color: 'red',  headport: 's', tailport: 's' } }
     ]
   });
-  visualize(fsm, { name: 'door', orientation: 'horizontal' });
+  console.log(visualize(fsm, { name: 'door', orientation: 'horizontal' }));
 ```
 
 Generates the following (enhanced) `.dot` syntax:
@@ -81,7 +81,7 @@ You can use the same `visualize` method to generate `.dot` output for a state ma
     ]
   });
 
-  visualize(Matter, { name: 'matter', orientation: 'horizontal' })
+  console.log(visualize(Matter, { name: 'matter', orientation: 'horizontal' }));
 ```
 
 Generates the following .dot syntax:
@@ -116,7 +116,7 @@ Which GraphViz displays as:
     ]
   });
 
-  visualize(Wizard, { orientation: 'horizontal' })
+  console.log(visualize(Wizard, { orientation: 'horizontal' }));
 ```
 
 Generates:
@@ -167,7 +167,7 @@ Displays:
     ]
   })
 
-  visualize(ATM)
+  console.log(visualize(ATM));
 ```
 
 Generates:

From 0af09c158733a9613ec7177bc37717f7368859bc Mon Sep 17 00:00:00 2001
From: Conor Gilsenan <conorgil@users.noreply.github.com>
Date: Tue, 24 Oct 2017 13:42:29 -0400
Subject: [PATCH 2/2] Add example command for generating PNG of graph

I think it would make the documentation more useful
to users who are not familiar with GraphViz to show
an example command to generate and open the
PNG that is shown in the docs.
---
 docs/visualization.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/visualization.md b/docs/visualization.md
index eb33758..1b5b176 100644
--- a/docs/visualization.md
+++ b/docs/visualization.md
@@ -3,7 +3,9 @@
 It can be very helpful to visualize your state machine as a directed graph. This is possible
 with the open source [GraphViz](http://www.graphviz.org/) library if we convert from our
 state machine configuration to the `.dot` language expected by GraphViz using the
-`visualize` method:
+`visualize` method.
+
+A `main.js` file defining the following FSM:
 
 ```javascript
   var visualize = require('javascript-state-machine/lib/visualize');
@@ -32,6 +34,10 @@ Generates the following .dot syntax:
 
 Which GraphViz displays as:
 
+```bash
+node main.js | dot -Tpng -o graph.png && open graph.png
+```
+
 ![door](../examples/vertical_door.png)
 
 ## Enhanced Visualization