Let's do Davr's house

[StoneCypher]

In order to do @davr 's house graph from that facebook post (probably a line I shouldn't blur,) I need:

1. [ ] support for subgraphs #118
2. [ ] arrange start support in jssm-viz #376

It would also be nice to have

1. [ ] labels #263
2. [ ] arrange end support in jssm-viz (which he doesn't have, lol) #377

[StoneCypher]

stopped for lunch

first draft isn't awful

[StoneCypher]

ok i'm probably done

[StoneCypher]

needs subgraphs though:

machine_name: "Davr's house";

flow: right;

["Smartlife light\nx7" "Smartlife outlet"] 
  => "Smartlife server";

"Meross outlet\nx4" => "Meross server";

"Lifx light" => "Lifx server?";

["Google server" "Home assistant"] 
  ~> ["Meross server" "Smartlife server" "Lifx server?"];

["ZWave switch\nx2" "ZWave remote"] 
  => "ZWave USB Dongle" 
  => "Home assistant";

"LED strip" 
  => "esp8266\nmqtt client" 
  => "mqtt server"
  => "mqtt-to-google\nconnector"
  => "Google server";

"Google home" => "Google server";

arrange ["Smartlife light\nx7" "Google home" "Meross outlet\nx4" 
  "LED strip" "ZWave switch\nx2" "ZWave remote" "Lifx light"
  "Smartlife outlet"];

arrange ["mqtt server" "ZWave USB Dongle"];
arrange ["mqtt-to-google\nconnector" "Home assistant"];

state "ZWave USB Dongle"          : { background-color: #e96792; corners: rounded; };
state "Home assistant"            : { background-color: #e96792; corners: rounded; };
state "mqtt server"               : { background-color: #e96792; corners: rounded; };
state "mqtt-to-google\nconnector" : { background-color: #e96792; corners: rounded; };

state "Smartlife server" : { shape: cylinder; background-color: #abf; };
state "Lifx server?"     : { shape: cylinder; background-color: #abf; };
state "Meross server"    : { shape: cylinder; background-color: #abf; };

state "Smartlife light\nx7" : { shape: component; background-color: #cfa; };
state "ZWave switch\nx2"    : { shape: component; background-color: #cfa; };
state "ZWave remote"        : { shape: component; background-color: #cfa; };
state "LED strip"           : { shape: component; background-color: #cfa; };
state "Google home"         : { shape: component; background-color: #cfa; };
state "Meross outlet\nx4"   : { shape: component; background-color: #cfa; };
state "Lifx light"          : { shape: component; background-color: #cfa; };
state "Smartlife outlet"    : { shape: component; background-color: #cfa; };

[StoneCypher]

that will get so much nicer with the advent of state spread #453 and named sequential groups #70

machine_name: "Davr's house";

flow: right;

&frontends: ["Smartlife light\nx7" "Google home" "Meross outlet\nx4" 
  "LED strip" "ZWave switch\nx2" "ZWave remote" "Lifx light"
  "Smartlife outlet"];

&backends: ["Smartlife server" "Meross server" "Google server"];

arrange &frontends;
arrange &backends;

&raspberry_pi: ["ZWave USB Dongle" "Home assistant" 
  "mqtt server" "mqtt-to-google\nconnector"];

arrange ["mqtt server" "ZWave USB Dongle"];
arrange ["mqtt-to-google\nconnector" "Home assistant"];

["Smartlife light\nx7" "Smartlife outlet"] 
  => "Smartlife server";

"Meross outlet\nx4" => "Meross server";

"Lifx light" => "Lifx server?";

["Google server" "Home assistant"] 
  ~> ["Meross server" "Smartlife server" "Lifx server?"];

["ZWave switch\nx2" "ZWave remote"] 
  => "ZWave USB Dongle" 
  => "Home assistant";

"LED strip" 
  => "esp8266\nmqtt client" 
  => "mqtt server"
  => "mqtt-to-google\nconnector"
  => "Google server";

"Google home" => "Google server";

state &raspberry_pi : { background-color: #e96792; corners: rounded; };
state &backends     : { background-color: #abf; shape: cylinder; };
state &frontends    : { background-color: #cfa; shape: component; };

[StoneCypher]

was missing a few inputs