Ethanfel
25b909f99f
Add SaveSnapshot node to features list and architecture diagram, update storage label from IndexedDB to Server Storage, add maxNodeSnapshots setting to the table, and document the node-triggered capture flow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
101 lines
7.0 KiB
XML
101 lines
7.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450">
|
|
<defs>
|
|
<linearGradient id="abg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
|
<stop offset="100%" style="stop-color:#1e293b"/>
|
|
</linearGradient>
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#475569"/>
|
|
</marker>
|
|
<marker id="arrowhead-green" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#22c55e"/>
|
|
</marker>
|
|
<marker id="arrowhead-blue" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6"/>
|
|
</marker>
|
|
<marker id="arrowhead-purple" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#6d28d9"/>
|
|
</marker>
|
|
</defs>
|
|
<rect width="800" height="450" rx="12" fill="url(#abg)"/>
|
|
|
|
<!-- Title -->
|
|
<text x="400" y="35" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="#94a3b8">How It Works</text>
|
|
|
|
<!-- ═══ Row 1: Auto-capture path ═══ -->
|
|
|
|
<rect x="40" y="55" width="160" height="70" rx="8" fill="#1e293b" stroke="#3b82f6" stroke-width="2"/>
|
|
<text x="120" y="87" text-anchor="middle" font-family="system-ui, sans-serif" font-size="13" font-weight="600" fill="#e2e8f0">Graph Edit</text>
|
|
<text x="120" y="107" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">graphChanged event</text>
|
|
|
|
<line x1="200" y1="90" x2="250" y2="90" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<rect x="250" y="55" width="160" height="70" rx="8" fill="#1e293b" stroke="#f59e0b" stroke-width="2"/>
|
|
<text x="330" y="87" text-anchor="middle" font-family="system-ui, sans-serif" font-size="13" font-weight="600" fill="#e2e8f0">Debounce Timer</text>
|
|
<text x="330" y="107" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">configurable delay</text>
|
|
|
|
<line x1="410" y1="90" x2="460" y2="90" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<rect x="460" y="55" width="160" height="70" rx="8" fill="#1e293b" stroke="#8b5cf6" stroke-width="2"/>
|
|
<text x="540" y="87" text-anchor="middle" font-family="system-ui, sans-serif" font-size="13" font-weight="600" fill="#e2e8f0">Hash Check</text>
|
|
<text x="540" y="107" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">per-workflow dedup</text>
|
|
|
|
<!-- Arrow: Hash Check → Server Storage (bend down) -->
|
|
<line x1="620" y1="90" x2="655" y2="90" stroke="#475569" stroke-width="2"/>
|
|
<line x1="655" y1="90" x2="655" y2="160" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- ═══ Row 2: Node path + Server Storage ═══ -->
|
|
|
|
<rect x="40" y="165" width="170" height="70" rx="8" fill="#1e293b" stroke="#6d28d9" stroke-width="2"/>
|
|
<text x="125" y="197" text-anchor="middle" font-family="system-ui, sans-serif" font-size="13" font-weight="600" fill="#e2e8f0">SaveSnapshot Node</text>
|
|
<text x="125" y="217" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">queue prompt trigger</text>
|
|
|
|
<!-- Arrow: SaveSnapshot → Server Storage with label -->
|
|
<line x1="210" y1="200" x2="545" y2="200" stroke="#6d28d9" stroke-width="2" marker-end="url(#arrowhead-purple)"/>
|
|
<text x="378" y="192" text-anchor="middle" font-family="system-ui, sans-serif" font-size="10" fill="#a78bfa">WS event · skips hash dedup</text>
|
|
|
|
<rect x="545" y="160" width="220" height="80" rx="8" fill="#1e293b" stroke="#22c55e" stroke-width="2"/>
|
|
<text x="655" y="195" text-anchor="middle" font-family="system-ui, sans-serif" font-size="13" font-weight="600" fill="#e2e8f0">Server Storage</text>
|
|
<text x="655" y="215" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">JSON files · per-workflow dirs</text>
|
|
|
|
<!-- Arrow: Server Storage → Sidebar -->
|
|
<line x1="655" y1="240" x2="655" y2="285" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- ═══ Row 3: Sidebar + Restore ═══ -->
|
|
|
|
<rect x="250" y="285" width="515" height="130" rx="8" fill="#1e293b" stroke="#3b82f6" stroke-width="2"/>
|
|
<text x="507" y="313" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#e2e8f0">Sidebar Panel</text>
|
|
|
|
<rect x="270" y="327" width="100" height="32" rx="5" fill="#3b82f6" opacity="0.15" stroke="#3b82f6" stroke-width="1"/>
|
|
<text x="320" y="347" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#93c5fd">Take Snapshot</text>
|
|
|
|
<rect x="380" y="327" width="70" height="32" rx="5" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="1"/>
|
|
<text x="415" y="347" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#86efac">Restore</text>
|
|
|
|
<rect x="460" y="327" width="55" height="32" rx="5" fill="#f59e0b" opacity="0.15" stroke="#f59e0b" stroke-width="1"/>
|
|
<text x="488" y="347" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#fcd34d">Swap</text>
|
|
|
|
<rect x="525" y="327" width="70" height="32" rx="5" fill="#8b5cf6" opacity="0.15" stroke="#8b5cf6" stroke-width="1"/>
|
|
<text x="560" y="347" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#c4b5fd">Search</text>
|
|
|
|
<rect x="605" y="327" width="55" height="32" rx="5" fill="#6d28d9" opacity="0.15" stroke="#6d28d9" stroke-width="1"/>
|
|
<text x="633" y="347" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#a78bfa">Lock</text>
|
|
|
|
<text x="507" y="395" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">toast notifications · confirm dialogs · loading states</text>
|
|
|
|
<!-- Restore/Swap box -->
|
|
<rect x="40" y="305" width="160" height="70" rx="8" fill="#1e293b" stroke="#22c55e" stroke-width="2"/>
|
|
<text x="120" y="337" text-anchor="middle" font-family="system-ui, sans-serif" font-size="13" font-weight="600" fill="#e2e8f0">Restore / Swap</text>
|
|
<text x="120" y="357" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#64748b">with lock guard</text>
|
|
|
|
<!-- Dashed: Sidebar → Restore -->
|
|
<line x1="250" y1="350" x2="200" y2="340" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrowhead-green)"/>
|
|
|
|
<!-- Dashed: Restore → Graph Edit (routed around left side) -->
|
|
<path d="M 40 335 H 20 V 90 H 40" fill="none" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrowhead-green)"/>
|
|
<text x="11" y="250" text-anchor="middle" font-family="system-ui, sans-serif" font-size="10" fill="#22c55e" transform="rotate(-90, 11, 250)">loadGraphData</text>
|
|
|
|
<!-- Dashed: Take Snapshot → Server Storage -->
|
|
<line x1="320" y1="327" x2="558" y2="240" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrowhead-blue)"/>
|
|
</svg>
|
