# App System SVG Diagrams

## System Overview

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <!-- Main Controller -->
  <rect x="350" y="250" width="100" height="60" fill="#e0e0e0" stroke="black"/>
  <text x="400" y="280" text-anchor="middle">App Controller</text>
  
  <!-- Components -->
  <rect x="200" y="150" width="80" height="40" fill="#a0d8ef" stroke="black"/>
  <text x="240" y="175" text-anchor="middle">VFD</text>
  
  <rect x="500" y="150" width="80" height="40" fill="#a0d8ef" stroke="black"/>
  <text x="540" y="175" text-anchor="middle">Motor Load</text>
  
  <rect x="200" y="350" width="80" height="40" fill="#a0d8ef" stroke="black"/>
  <text x="240" y="375" text-anchor="middle">Direction</text>
  
  <rect x="500" y="350" width="80" height="40" fill="#a0d8ef" stroke="black"/>
  <text x="540" y="375" text-anchor="middle">Home Sensor</text>
  
  <!-- Connections -->
  <line x1="280" y1="170" x2="350" y2="270" stroke="black"/>
  <line x1="500" y1="170" x2="450" y2="270" stroke="black"/>
  <line x1="280" y1="370" x2="350" y2="310" stroke="black"/>
  <line x1="500" y1="370" x2="450" y2="310" stroke="black"/>
</svg>
```

## Control Flow

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- States -->
  <circle cx="100" cy="200" r="30" fill="#e0e0e0" stroke="black"/>
  <text x="100" y="205" text-anchor="middle">IDLE</text>
  
  <circle cx="300" cy="100" r="30" fill="#a0d8ef" stroke="black"/>
  <text x="300" y="105" text-anchor="middle">PLUNGE</text>
  
  <circle cx="300" cy="300" r="30" fill="#a0d8ef" stroke="black"/>
  <text x="300" y="305" text-anchor="middle">HOME</text>
  
  <circle cx="500" cy="200" r="30" fill="#ffcccb" stroke="black"/>
  <text x="500" y="205" text-anchor="middle">JAMMED</text>
  
  <!-- Transitions -->
  <path d="M 130 190 Q 200 100 270 100" fill="none" stroke="black" marker-end="url(#arrow)"/>
  <path d="M 130 210 Q 200 300 270 300" fill="none" stroke="black" marker-end="url(#arrow)"/>
  
  <path d="M 330 100 Q 400 150 470 190" fill="none" stroke="black" marker-end="url(#arrow)"/>
  <path d="M 330 300 Q 400 250 470 210" fill="none" stroke="black" marker-end="url(#arrow)"/>
  
  <path d="M 470 200 Q 300 200 130 200" fill="none" stroke="black" marker-end="url(#arrow)"/>
  
  <!-- Arrow marker -->
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="black"/>
    </marker>
  </defs>
</svg>
```

Note: The SVG diagrams above provide:
1. A system overview showing the main components and their connections
2. A control flow diagram showing the state transitions and their relationships

These diagrams complement the mermaid diagrams in the main documentation while providing a different visual perspective of the system architecture.