diff --git a/docs/visualization.md b/docs/visualization.md index e944dcf..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'); @@ -16,7 +18,7 @@ state machine configuration to the `.dot` language expected by GraphViz using th ] }); - visualize(fsm) + console.log(visualize(fsm)); ``` Generates the following .dot syntax: @@ -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 @@ -47,7 +53,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 +87,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 +122,7 @@ Which GraphViz displays as: ] }); - visualize(Wizard, { orientation: 'horizontal' }) + console.log(visualize(Wizard, { orientation: 'horizontal' })); ``` Generates: @@ -167,7 +173,7 @@ Displays: ] }) - visualize(ATM) + console.log(visualize(ATM)); ``` Generates: