<svg xmlns="http://www.w3.org/2000/svg" width="960" height="340" viewBox="0 0 960 340">
  <defs>
    <!-- Standard arrowhead marker -->
    <marker id="arr" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
      <path d="M0,0 L0,6 L8,3 Z" fill="#94A3B8"/>
    </marker>
    <!-- Arrowhead for start (points left/up) -->
    <marker id="arr-start" markerWidth="8" markerHeight="8" refX="2" refY="3" orient="auto">
      <path d="M8,0 L8,6 L0,3 Z" fill="#94A3B8"/>
    </marker>
  </defs>

  <!-- Background -->
  <rect width="960" height="340" rx="10" fill="#F8FAFC"/>

  <!-- ================================================================
       ARROWS (drawn before boxes so boxes sit on top)
       ================================================================ -->

  <!-- PV -> Inverter: horizontal right -->
  <line x1="181" y1="70" x2="219" y2="70"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>
  <text x="200" y="63" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">solar_total_power</text>

  <!-- Inverter -> CT Meter (export): upper lane y=55 -->
  <line x1="381" y1="55" x2="421" y2="55"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>

  <!-- CT Meter -> Grid (export): upper lane y=55 -->
  <line x1="539" y1="55" x2="579" y2="55"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>

  <!-- Grid -> CT Meter (import): lower lane y=70 -->
  <line x1="579" y1="70" x2="539" y2="70"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>

  <!-- CT Meter -> Inverter (import): lower lane y=70 -->
  <line x1="421" y1="70" x2="381" y2="70"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>

  <!-- Grid -> House (right edge of Grid to left edge of House) -->
  <line x1="741" y1="62" x2="779" y2="62"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>

  <!-- Inverter -> House (over-the-top dashed path for calculated house flow) -->
  <!-- Path: from Inverter top-right (381, 30), up to y=15, across to x=860, down to House top (860, 29) -->
  <path d="M381,30 L381,15 L860,15 L860,29"
        fill="none" stroke="#94A3B8" stroke-width="1.5"
        stroke-dasharray="4 3" marker-end="url(#arr)"/>
  <text x="580" y="11" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">power_to_user / house_consumption (calculated)</text>

  <!-- Battery <-> Inverter: vertical bidirectional, x=300 -->
  <line x1="300" y1="111" x2="300" y2="199"
        stroke="#94A3B8" stroke-width="1.5"
        marker-start="url(#arr-start)" marker-end="url(#arr)"/>
  <text x="318" y="160" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="start">battery_power</text>

  <!-- ================================================================
       NODE 1: PV Strings — amber/yellow theme
       ================================================================ -->
  <rect x="20" y="30" width="160" height="80" rx="6"
        fill="#FFFBEB" stroke="#F59E0B" stroke-width="1.5"/>
  <!-- Title bar -->
  <rect x="20" y="30" width="160" height="22" rx="6"
        fill="#FEF3C7"/>
  <rect x="20" y="44" width="160" height="8" fill="#FEF3C7"/>
  <text x="100" y="46" font-size="11" font-weight="600" fill="#92400E"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">PV Strings</text>
  <!-- Body lines -->
  <text x="100" y="63" font-size="9" fill="#78350F"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">pv1_power</text>
  <text x="100" y="75" font-size="9" fill="#78350F"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">pv2_power</text>
  <text x="100" y="87" font-size="9" fill="#78350F"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">pv3_power</text>
  <!-- Footer italic -->
  <text x="100" y="101" font-size="8" fill="#B45309" font-style="italic"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">solar_total_power</text>

  <!-- ================================================================
       NODE 2: Inverter — indigo theme
       ================================================================ -->
  <rect x="220" y="30" width="160" height="80" rx="6"
        fill="#EEF2FF" stroke="#6366F1" stroke-width="2"/>
  <!-- Title bar -->
  <rect x="220" y="30" width="160" height="22" rx="6"
        fill="#E0E7FF"/>
  <rect x="220" y="44" width="160" height="8" fill="#E0E7FF"/>
  <text x="300" y="46" font-size="11" font-weight="600" fill="#3730A3"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">Inverter</text>
  <!-- Body lines -->
  <text x="300" y="65" font-size="9" fill="#312E81"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">Converts DC to AC</text>
  <!-- Footer italic -->
  <text x="300" y="101" font-size="8" fill="#4338CA" font-style="italic"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">status · temperature</text>

  <!-- ================================================================
       NODE 3: CT Meter — amber dashed border (optional hardware)
       ================================================================ -->
  <rect x="422" y="30" width="116" height="80" rx="6"
        fill="#FFFBEB" stroke="#F59E0B" stroke-width="1.5" stroke-dasharray="5 3"/>
  <!-- Title bar -->
  <rect x="422" y="30" width="116" height="22" rx="6" fill="#FEF3C7"/>
  <rect x="422" y="44" width="116" height="8" fill="#FEF3C7"/>
  <text x="480" y="46" font-size="10" font-weight="600" fill="#92400E"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">CT Meter</text>
  <!-- Body lines -->
  <text x="480" y="63" font-size="8" fill="#78350F"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">GOSS-W / SPM-S</text>
  <text x="480" y="75" font-size="8" fill="#78350F"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">RS485 to inverter</text>
  <!-- Footer italic -->
  <text x="480" y="101" font-size="7" fill="#B45309" font-style="italic"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">grid-tied models only</text>

  <!-- ================================================================
       NODE 4: Grid — blue theme
       ================================================================ -->
  <rect x="580" y="30" width="160" height="80" rx="6"
        fill="#EFF6FF" stroke="#3B82F6" stroke-width="1.5"/>
  <!-- Title bar -->
  <rect x="580" y="30" width="160" height="22" rx="6"
        fill="#DBEAFE"/>
  <rect x="580" y="44" width="160" height="8" fill="#DBEAFE"/>
  <text x="660" y="46" font-size="11" font-weight="600" fill="#1E3A8A"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">Grid</text>
  <!-- Body lines -->
  <text x="660" y="64" font-size="9" fill="#1E40AF"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">grid_export_power</text>
  <text x="660" y="76" font-size="9" fill="#1E40AF"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">grid_import_power</text>
  <!-- Footer italic -->
  <text x="660" y="101" font-size="8" fill="#2563EB" font-style="italic"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">power_to_grid (plus/minus)</text>

  <!-- ================================================================
       NODE 5: House Load — purple theme
       ================================================================ -->
  <rect x="780" y="30" width="160" height="80" rx="6"
        fill="#F5F3FF" stroke="#8B5CF6" stroke-width="1.5"/>
  <!-- Title bar -->
  <rect x="780" y="30" width="160" height="22" rx="6"
        fill="#EDE9FE"/>
  <rect x="780" y="44" width="160" height="8" fill="#EDE9FE"/>
  <text x="860" y="46" font-size="11" font-weight="600" fill="#4C1D95"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">House Load</text>
  <!-- Body lines -->
  <text x="860" y="64" font-size="9" fill="#5B21B6"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">house_consumption</text>
  <text x="860" y="76" font-size="9" fill="#5B21B6"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">power_to_user</text>
  <!-- Footer italic -->
  <text x="860" y="101" font-size="8" fill="#7C3AED" font-style="italic"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">load_energy_today</text>

  <!-- ================================================================
       NODE 6: Battery — green theme
       ================================================================ -->
  <rect x="220" y="200" width="160" height="80" rx="6"
        fill="#F0FDF4" stroke="#16A34A" stroke-width="1.5"/>
  <!-- Title bar -->
  <rect x="220" y="200" width="160" height="22" rx="6"
        fill="#DCFCE7"/>
  <rect x="220" y="214" width="160" height="8" fill="#DCFCE7"/>
  <text x="300" y="216" font-size="11" font-weight="600" fill="#14532D"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">Battery</text>
  <!-- Body lines -->
  <text x="300" y="234" font-size="9" fill="#166534"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">battery_power (plus/minus)</text>
  <text x="300" y="246" font-size="9" fill="#166534"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">battery_soc</text>
  <!-- Footer italic -->
  <text x="300" y="271" font-size="8" fill="#15803D" font-style="italic"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
        text-anchor="middle">+ charging / - discharging</text>

  <!-- ================================================================
       LEGEND BAR
       ================================================================ -->
  <rect x="20" y="290" width="920" height="42" rx="6"
        fill="#F1F5F9" stroke="#E2E8F0" stroke-width="1"/>

  <!-- Legend: solid line sample -->
  <line x1="36" y1="306" x2="60" y2="306"
        stroke="#94A3B8" stroke-width="1.5" marker-end="url(#arr)"/>
  <text x="66" y="309" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
    Measured power flow
  </text>

  <!-- Legend: dashed line sample -->
  <line x1="178" y1="306" x2="202" y2="306"
        stroke="#94A3B8" stroke-width="1.5" stroke-dasharray="4 3" marker-end="url(#arr)"/>
  <text x="208" y="309" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
    Calculated flow (solar + import − export)
  </text>

  <!-- Legend: bidirectional sample -->
  <line x1="410" y1="306" x2="434" y2="306"
        stroke="#94A3B8" stroke-width="1.5"
        marker-start="url(#arr-start)" marker-end="url(#arr)"/>
  <text x="440" y="309" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
    Bidirectional (charge / discharge)
  </text>

  <!-- Legend: dashed amber border = optional hardware -->
  <rect x="590" y="299" width="34" height="14" rx="3"
        fill="#FEF3C7" stroke="#F59E0B" stroke-width="1.5" stroke-dasharray="4 2"/>
  <text x="630" y="309" font-size="9" fill="#64748B"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
    Optional hardware (grid-tied models)
  </text>

  <!-- Legend: sign convention note -->
  <text x="480" y="324" font-size="9" fill="#64748B" text-anchor="middle"
        font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
    battery_power: positive = charging, negative = discharging  ·  power_to_grid: positive = export, negative = import
  </text>

</svg>
