Blue-Green-Deployment-diagram.excalidraw

==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==

Blue/Green Deployment — Traffic Switch Diagram

Text Elements

Before Switch ^beforelabel Router / LB ^router1 Blue Environment (v1.2) ACTIVE, 100% traffic ^blue1 Green Environment (v1.3) IDLE, 0% traffic ^green1 Database ^db1

After Switch ^afterlabel Router / LB ^router2 Blue Environment (v1.2) IDLE ^blue2 Green Environment (v1.3) ACTIVE, 100% traffic ^green2 Database ^db2 Rollback: switch back ^rollback2

DB schema must be backward-compatible (Expand/Contract pattern) ^dbnote

%%

Drawing

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "before-label",
      "type": "text",
      "x": 60,
      "y": 20,
      "width": 160,
      "height": 24,
      "text": "Before Switch",
      "fontSize": 18,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "router1",
      "type": "rectangle",
      "x": 60,
      "y": 60,
      "width": 120,
      "height": 44,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#e7f5ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "router1-text",
      "type": "text",
      "x": 75,
      "y": 73,
      "width": 90,
      "height": 20,
      "text": "Router / LB",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "blue1",
      "type": "rectangle",
      "x": 270,
      "y": 50,
      "width": 240,
      "height": 64,
      "strokeColor": "#2f9e44",
      "backgroundColor": "#ebfbee",
      "fillStyle": "solid",
      "strokeWidth": 3,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "blue1-text",
      "type": "text",
      "x": 285,
      "y": 60,
      "width": 210,
      "height": 44,
      "text": "Blue Environment (v1.2)\nACTIVE, 100% traffic",
      "fontSize": 13,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "green1",
      "type": "rectangle",
      "x": 270,
      "y": 136,
      "width": 240,
      "height": 64,
      "strokeColor": "#868e96",
      "backgroundColor": "#f8f9fa",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100
    },
    {
      "id": "green1-text",
      "type": "text",
      "x": 285,
      "y": 146,
      "width": 210,
      "height": 44,
      "text": "Green Environment (v1.3)\nIDLE, 0% traffic",
      "fontSize": 13,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "db1",
      "type": "ellipse",
      "x": 550,
      "y": 82,
      "width": 120,
      "height": 80,
      "strokeColor": "#1971c2",
      "backgroundColor": "#e7f5ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "db1-text",
      "type": "text",
      "x": 570,
      "y": 114,
      "width": 80,
      "height": 20,
      "text": "Database",
      "fontSize": 13,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#1971c2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "arrow1-router-blue",
      "type": "arrow",
      "x": 180,
      "y": 75,
      "width": 88,
      "height": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 3,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [88, 0]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "arrow1-router-green",
      "type": "arrow",
      "x": 180,
      "y": 90,
      "width": 88,
      "height": 78,
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100,
      "points": [[0, 0], [88, 78]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "arrow1-blue-db",
      "type": "arrow",
      "x": 510,
      "y": 82,
      "width": 40,
      "height": 40,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [40, 40]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "arrow1-green-db",
      "type": "arrow",
      "x": 510,
      "y": 168,
      "width": 40,
      "height": -40,
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100,
      "points": [[0, 0], [40, -40]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "after-label",
      "type": "text",
      "x": 60,
      "y": 260,
      "width": 160,
      "height": 24,
      "text": "After Switch",
      "fontSize": 18,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "router2",
      "type": "rectangle",
      "x": 60,
      "y": 300,
      "width": 120,
      "height": 44,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "#e7f5ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "router2-text",
      "type": "text",
      "x": 75,
      "y": 313,
      "width": 90,
      "height": 20,
      "text": "Router / LB",
      "fontSize": 14,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "blue2",
      "type": "rectangle",
      "x": 270,
      "y": 376,
      "width": 240,
      "height": 52,
      "strokeColor": "#868e96",
      "backgroundColor": "#f8f9fa",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100
    },
    {
      "id": "blue2-text",
      "type": "text",
      "x": 285,
      "y": 390,
      "width": 210,
      "height": 24,
      "text": "Blue Environment (v1.2) — IDLE",
      "fontSize": 13,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "green2",
      "type": "rectangle",
      "x": 270,
      "y": 290,
      "width": 240,
      "height": 64,
      "strokeColor": "#2f9e44",
      "backgroundColor": "#ebfbee",
      "fillStyle": "solid",
      "strokeWidth": 3,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "green2-text",
      "type": "text",
      "x": 285,
      "y": 300,
      "width": 210,
      "height": 44,
      "text": "Green Environment (v1.3)\nACTIVE, 100% traffic",
      "fontSize": 13,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "db2",
      "type": "ellipse",
      "x": 550,
      "y": 318,
      "width": 120,
      "height": 80,
      "strokeColor": "#1971c2",
      "backgroundColor": "#e7f5ff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "db2-text",
      "type": "text",
      "x": 570,
      "y": 350,
      "width": 80,
      "height": 20,
      "text": "Database",
      "fontSize": 13,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle",
      "strokeColor": "#1971c2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "arrow2-router-green",
      "type": "arrow",
      "x": 180,
      "y": 322,
      "width": 88,
      "height": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 3,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [88, 0]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "arrow2-router-blue",
      "type": "arrow",
      "x": 180,
      "y": 340,
      "width": 88,
      "height": 62,
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100,
      "points": [[0, 0], [88, 62]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "arrow2-green-db",
      "type": "arrow",
      "x": 510,
      "y": 322,
      "width": 40,
      "height": 36,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [40, 36]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "arrow2-blue-db",
      "type": "arrow",
      "x": 510,
      "y": 402,
      "width": 40,
      "height": -44,
      "strokeColor": "#868e96",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100,
      "points": [[0, 0], [40, -44]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "rollback-arrow",
      "type": "arrow",
      "x": 390,
      "y": 354,
      "width": 0,
      "height": 24,
      "strokeColor": "#e03131",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [0, 24]],
      "startArrowhead": null,
      "endArrowhead": "arrow",
      "label": {
        "text": "Rollback: switch back",
        "fontSize": 11,
        "strokeColor": "#e03131"
      }
    },
    {
      "id": "db-note",
      "type": "text",
      "x": 60,
      "y": 460,
      "width": 460,
      "height": 20,
      "text": "DB schema must be backward-compatible (Expand/Contract pattern)",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "strokeColor": "#e67700",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    }
  ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

%%