78 lines
3.1 KiB
XML
78 lines
3.1 KiB
XML
<svg width="650" height="500" viewBox="0 0 650 500" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<style>
|
|
.box {
|
|
fill: #f0f7ff;
|
|
stroke: #0d47a1;
|
|
stroke-width: 1.5;
|
|
rx: 8;
|
|
}
|
|
.label-main {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-anchor: middle;
|
|
fill: #111;
|
|
}
|
|
.label-sub {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 12px;
|
|
text-anchor: middle;
|
|
fill: #444;
|
|
}
|
|
.label-arrow {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
text-anchor: middle;
|
|
fill: #333;
|
|
}
|
|
.arrow-line {
|
|
stroke: #333;
|
|
stroke-width: 2;
|
|
}
|
|
.arrow-head {
|
|
fill: #333;
|
|
}
|
|
.bus-line {
|
|
stroke: #212121;
|
|
stroke-width: 4;
|
|
}
|
|
.bus-connector {
|
|
stroke: #212121;
|
|
stroke-width: 2;
|
|
}
|
|
</style>
|
|
<marker id="arrowhead" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#333" />
|
|
</marker>
|
|
</defs>
|
|
|
|
<text x="325" y="30" class="label-main" font-size="20">System Architecture</text>
|
|
<rect x="225" y="60" width="200" height="70" class="box"/>
|
|
<text x="325" y="90" class="label-main">Home Assistant</text>
|
|
<text x="325" y="110" class="label-sub">(Logic & UI)</text>
|
|
<line x1="325" y1="130" x2="325" y2="170" class="arrow-line" marker-end="url(#arrowhead)"/>
|
|
<text x="445" y="155" class="label-arrow">WLAN / Thread</text>
|
|
<text x="445" y="170" class="label-arrow" font-size="11">(MODBUS TCP/IP)</text>
|
|
<rect x="225" y="180" width="200" height="70" class="box"/>
|
|
<text x="325" y="210" class="label-main">Gateway (ESP32C6)</text>
|
|
<text x="325" y="230" class="label-sub">(Protocol Translator)</text>
|
|
<line x1="325" y1="250" x2="325" y2="300" class="bus-line"/>
|
|
<line x1="50" y1="300" x2="600" y2="300" class="bus-line"/>
|
|
<text x="500" y="285" class="label-arrow">RS485 Bus (MODBUS RTU)</text>
|
|
<line x1="125" y1="300" x2="125" y2="340" class="bus-connector"/>
|
|
<rect x="50" y="340" width="150" height="60" class="box"/>
|
|
<text x="125" y="365" class="label-main">Slave Node</text>
|
|
<text x="125" y="385" class="label-sub">(Valve, Button)</text>
|
|
<line x1="325" y1="300" x2="325" y2="340" class="bus-connector"/>
|
|
<rect x="250" y="340" width="150" height="60" class="box"/>
|
|
<text x="325" y="365" class="label-main">Slave Node</text>
|
|
<text x="325" y="385" class="label-sub">(Pump, Sensors)</text>
|
|
<line x1="525" y1="300" x2="525" y2="340" class="bus-connector"/>
|
|
<rect x="450" y="340" width="150" height="60" class="box"/>
|
|
<text x="525" y="365" class="label-main">Level Sensor</text>
|
|
<text x="525" y="385" class="label-sub">(QDY30A)</text>
|
|
<text x="325" y="440" class="label-sub" font-size="20">...</text>
|
|
|
|
</svg>
|