travisshears/balcony_weather_station
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

try svg arch diagram

Browse source
This commit is contained in:
Travis Shears 2026-02-23 15:45:16 +01:00
parent 603d42ad3f
commit 0fa4d7824f
Signed by: travisshears
GPG key ID: CB9BF1910F3F7469
3 changed files with 58 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

54
diagrams/arch.svg Normal file
View file

@ -0,0 +1,54 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.95 691" width="304.95" height="691" style="--bg:#FFFFFF;--fg:#27272A;background:var(--bg)">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');
text { font-family: 'Inter', system-ui, sans-serif; }
svg {
/* Derived from --bg and --fg (overridable via --line, --accent, etc.) */
--_text: var(--fg);
--_text-sec: var(--muted, color-mix(in srgb, var(--fg) 60%, var(--bg)));
--_text-muted: var(--muted, color-mix(in srgb, var(--fg) 40%, var(--bg)));
--_text-faint: color-mix(in srgb, var(--fg) 25%, var(--bg));
--_line: var(--line, color-mix(in srgb, var(--fg) 30%, var(--bg)));
--_arrow: var(--accent, color-mix(in srgb, var(--fg) 50%, var(--bg)));
--_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
--_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
--_group-fill: var(--bg);
--_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
--_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
--_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));
}
</style>
<defs>
<marker id="arrowhead" markerWidth="8" markerHeight="4.8" refX="8" refY="2.4" orient="auto">
<polygon points="0 0, 8 2.4, 0 4.8" fill="var(--_arrow)" />
</marker>
<marker id="arrowhead-start" markerWidth="8" markerHeight="4.8" refX="0" refY="2.4" orient="auto-start-reverse">
<polygon points="8 0, 0 2.4, 8 4.8" fill="var(--_arrow)" />
</marker>
</defs>
<rect x="40" y="40" width="224.95" height="285" rx="0" ry="0" fill="var(--_group-fill)" stroke="var(--_node-stroke)" stroke-width="1" />
<rect x="40" y="40" width="224.95" height="28" rx="0" ry="0" fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="1" />
<text x="52" y="54" dy="0.35em" font-size="12" font-weight="600" fill="var(--_text-sec)">Node1</text>
<polyline points="99.44999999999999,132 99.44999999999999,287 113.2375,287" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
<polyline points="201.925,132 201.925,287 188.1375,287" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
<polyline points="150.6875,305 150.6875,442" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
<polyline points="150.6875,478 150.6875,615" fill="none" stroke="var(--_line)" stroke-width="0.75" marker-end="url(#arrowhead)" />
<rect x="82.86999999999999" y="187" width="33.16" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
<text x="99.44999999999999" y="200.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">i2c</text>
<rect x="182.485" y="187" width="38.88" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
<text x="201.925" y="200.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">uart</text>
<rect x="114.0875" y="360" width="73.2" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
<text x="150.6875" y="373.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">Custom TCP</text>
<rect x="131.2475" y="533" width="38.88" height="27" rx="4" ry="4" fill="var(--bg)" stroke="var(--_inner-stroke)" stroke-width="0.5" />
<text x="150.6875" y="546.5" text-anchor="middle" dy="0.35em" font-size="11" font-weight="400" fill="var(--_text-muted)">mqtt</text>
<rect x="95.3625" y="442" width="110.65" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<rect x="56.037499999999994" y="615" width="189.3" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<rect x="61.999999999999986" y="96" width="74.9" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<rect x="113.2375" y="269" width="74.9" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<rect x="160.9" y="96" width="82.05000000000001" height="36" rx="0" ry="0" fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="0.75" />
<text x="150.6875" y="460" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">Event Proxy</text>
<text x="150.6875" y="633" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">Home Assistant Servier</text>
<text x="99.44999999999999" y="114" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">bme280</text>
<text x="150.6875" y="287" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">rp2040</text>
<text x="201.925" y="114" text-anchor="middle" dy="0.35em" font-size="13" font-weight="500" fill="var(--_text)">pms5003</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

6
diagrams/index.ts
View file

@ -1,6 +1,6 @@
import { renderMermaidAscii } from "beautiful-mermaid";
import { renderMermaid } from "beautiful-mermaid";
const ascii = renderMermaidAscii(`
const diagram = await renderMermaid(`
flowchart TD
subgraph Node1
bme280 -->|i2c| rp2040
@ -10,4 +10,4 @@ const ascii = renderMermaidAscii(`
proxy -->|mqtt| ha[Home Assistant Servier]
`);
console.log(ascii);
console.log(diagram);