#chart {
  height: 300px;
}

.flow-request {
  background-color: blue
}

.flow-condition {
  background-color: red
}

.flow-page { 
  background-color: green
}

var data = {
  "operators": {
    "operator1": {
      "top": 20,
      "left": 20,
      "properties": {
        "title": "Operator 1",
        "inputs": {},
        "class": "flow-request",
        "outputs": {
          "output_1": {
            "label": "Output 1"
          }
        }
      }
    },
    "created_operator_0": {
      "top": 40,
      "left": 240,
      "properties": {
        "class": "flow-condition",
        "title": "Operator 3",
        "inputs": {
          "input_1": {
            "label": "Input 1"
          }
        },
        "outputs": {
          "output_1": {
            "label": "Output 1"
          }
        }
      }
    },
    "created_operator_1": {
      "top": 40,
      "left": 500,
      "properties": {
        "class": "flow-page",
        "title": "Operator 4",
        "inputs": {
          "input_1": {
            "label": "Input 1"
          }
        },
        "outputs": {
          "output_1": {
            "label": "Output 1"
          }
        }
      }
    }
  },
  "links": {
    "0": {
      "fromOperator": "operator1",
      "fromConnector": "output_1",
      "fromSubConnector": 0,
      "toOperator": "created_operator_0",
      "toConnector": "input_1",
      "toSubConnector": 0
    },
    "1": {
      "fromOperator": "created_operator_0",
      "fromConnector": "output_1",
      "fromSubConnector": 0,
      "toOperator": "created_operator_1",
      "toConnector": "input_1",
      "toSubConnector": 0
    }
  }
};

$(document).ready(function() {
  $("#chart").flowchart({
    "data": data
  });
});