alro65/AR-MarineWire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
AR-MarineWire/MarineWire_ClaudeCode_Prompt.md
T

31 KiB
Raw Permalink Blame History

MarineWire — Claude Code Prompt

Build a full-stack web application called MarineWire — a professional marine electrical wiring diagram tool with a realistic, drag-and-drop component library of 250+ components, each with accurate real-world terminals and connections.

Stack

Frontend

  • React 18 + Vite
  • @xyflow/react (React Flow v12) — drag & drop canvas, nodes, edges
  • Tailwind CSS v3
  • Zustand — state management
  • i18next — bilingual UI (English / Spanish, toggle in toolbar)
  • html2canvas + jsPDF — export

Backend

  • Node.js + Express
  • PostgreSQL + Prisma ORM
  • JWT authentication
  • REST API

Database entities: User, Client, Vessel, Project (diagram), Component (library), DiagramNode, DiagramEdge

Core concept

The user builds marine electrical diagrams by dragging realistic SVG components onto a React Flow canvas and connecting them with color-coded wires. Every component SVG is drawn to resemble its real-world appearance — NOT schematic symbols. Each terminal/pin on a component is a named React Flow Handle with a specific type (source/target), position, and label matching real-world wiring standards (ABYC E-11, DIN 72552, IEC 60364).

Authentication & multi-tenancy

  • Login / register
  • Each user has Clients → each Client has Vessels → each Vessel has Projects (diagrams)
  • Users can share projects (read-only link)
  • Project autosave every 30 seconds to DB

Component Library — 250+ components

All components are React Flow custom nodes. Each has:

  • id, category, subcategory, label_en, label_es
  • svgComponent — realistic SVG drawing
  • handles[] — array of { id, type, position, label, pinNumber, wireColor, awgRecommended }
  • properties — editable fields shown in Properties Panel
  • connectionRules — what this terminal connects to (validation)

REAL TERMINAL DEFINITIONS (critical — build these accurately)

Relay SPDT 5-pin (DIN 72552)

Handles:

  • Pin 85 → Coil − (GND) | 18AWG black
  • Pin 86 → Coil + (12/24V trigger) | 18AWG red
  • Pin 30 → Common (input power) | sized to load
  • Pin 87 → Normally Open (NO) | sized to load
  • Pin 87a → Normally Closed (NC) | sized to load

Relay SPST 4-pin

  • Pin 85 → Coil −
  • Pin 86 → Coil +
  • Pin 30 → Common
  • Pin 87 → Normally Open

Alternator (marine, internal regulator)

  • B+ → Battery output (heavy, 4–2AWG red) — to fusible link → battery +
  • B− / GND → Engine block ground
  • S → Sense wire (14AWG, direct to battery +, never through ignition)
  • L → Charge lamp (to ignition switch warning light)
  • P → Tachometer pulse output (to tach)
  • IG → Ignition enable (some models, to IGN switch)
  • F → Field (external regulator only)

Alternator (external regulator — Balmar style)

  • All above PLUS:
  • REG+ → Regulator B+
  • REG− → Regulator GND
  • REG_S → Regulator sense
  • REG_F → Field output to alternator F terminal
  • REG_L → Lamp terminal

Motor DC (generic brushed)

  • A+ → Armature positive
  • A− → Armature negative / GND
  • F+ → Field positive (if separately excited)
  • F− → Field negative

Motor Starter (with solenoid)

  • BAT → Battery + (heavy cable)
  • MTR → To starter motor terminal
  • S / ST → Solenoid trigger (from ignition switch, 16AWG)
  • GND → Engine block

Battery Switch 1-2-Both-Off

  • BAT1 → Battery 1 positive
  • BAT2 → Battery 2 positive
  • COMMON → Output to distribution
  • (4 large stud terminals, no polarity on switch body)

ACR / VSR (Blue Sea style)

  • A → Battery bank 1 (or alternator side)
  • B → Battery bank 2
  • GND → (some models)
  • AUX → Remote on/off (some models)

Shore Power Inlet 30A (NEMA L5-30)

  • L → Line / Hot (black, 10AWG)
  • N → Neutral (white, 10AWG)
  • G → Ground (green, 10AWG)

Shore Power Inlet 50A (NEMA SS2-50)

  • L1 → Line 1 (black, 6AWG)
  • L2 → Line 2 (red, 6AWG)
  • N → Neutral (white, 6AWG)
  • G → Ground (green, 6AWG)

Marine HVAC / Air Conditioner (self-contained, 115VAC)

  • L1 → Line 1 hot (black, 12AWG min)
  • N → Neutral (white, 12AWG)
  • G → Safety ground / bonding (green)
  • PUMP_OUT+ → Seawater pump power out (to pump, same voltage)
  • PUMP_OUT− → Pump neutral/return
  • CTRL_24V → 24VAC pump trigger (optional, for relay box)
  • BOND → Bonding terminal (to vessel bonding system, green/yellow)
  • DRAIN → Condensate drain (plumbing, not electrical — shown as dashed)

HVAC Seawater Pump (12VDC or 115VAC)

  • PWR+ → Power positive (from AC unit terminal strip or breaker)
  • PWR− / N → Power return
  • GND → Ground/bonding

HVAC Thermostat / Control

  • R → 24VAC power
  • C → Common (24VAC return)
  • Y → Cooling call
  • W → Heating call
  • G → Fan call
  • BUS+ / BUS− → Digital bus (some brands)

HVAC Pump Relay Box (multi-unit)

  • MAIN_PWR_L → Main AC power line
  • MAIN_PWR_N → Main neutral
  • PUMP_L → Pump line output
  • PUMP_N → Pump neutral
  • UNIT1_TRIG → Trigger from unit 1 (24VAC)
  • UNIT2_TRIG → Trigger from unit 2
  • UNIT3_TRIG → Trigger from unit 3 (up to 8)

Start Capacitor (motor)

  • T1 → Terminal 1 (AC line)
  • T2 → Terminal 2 (to start winding)
  • (cylindrical body, 125–330VAC, µF rating shown)

Run Capacitor (motor)

  • HERM → Hermetic (compressor)
  • FAN → Fan motor terminal
  • COM → Common

Dual Run Capacitor (HVAC)

  • C → Common
  • FAN → Fan terminal
  • HERM → Compressor hermetic terminal
  • (oval body, µF dual rating shown e.g. 45/5 µF)

Electrolytic Capacitor DC (filter/suppression)

    • → Positive (marked with stripe or +)
  • − → Negative
  • (cylindrical, voltage and µF shown)

Film Capacitor / Suppression Cap

  • T1, T2 → Non-polar terminals

Solenoid Valve (2/2 NC, 12VDC)

  • COIL+ → 12/24VDC positive (from relay or fuse)
  • COIL− → GND
  • PORT_IN → Fluid inlet (plumbing — dashed line)
  • PORT_OUT → Fluid outlet (dashed line)

Solenoid Valve (3/2)

  • COIL+, COIL−
  • P → Pressure port
  • A → Working port
  • T/R → Tank/return port

Linear Actuator DC

  • PWR+ → 12/24V positive (extend direction with H-bridge)
  • PWR− → Ground / reverse
  • (reversal via DPDT relay or H-bridge — show in connection rules)
  • LIMIT_EXT → Limit switch extend (internal, shown as dotted)
  • LIMIT_RET → Limit switch retract

Rudder Angle Indicator (RAI) — sender (potentiometer type)

  • +REF → Reference voltage (5–10VDC from display)
  • WIPER → Signal out (to display SIG input)
  • GND → Ground
  • (mechanical: follow-up arm connects to rudder quadrant)

RAI Display

  • PWR+ → 12VDC
  • PWR− → GND
  • SIG → Signal in from sender wiper
  • REF_OUT → Reference voltage out to sender

Rudder Angle Indicator (digital, NMEA)

  • PWR+, PWR−
  • NMEA2000_H → CAN High (blue)
  • NMEA2000_L → CAN Low (white)
  • SHIELD → CAN Shield (bare/drain)

Temperature Gauge (analog, resistive sender)

  • PWR+ → Ignition / 12V
  • GND → Ground
  • SEND → Sender signal input (from NTC/resistive sender)
  • ILL+ → Illumination (optional)

Temperature Sender (NTC resistive)

  • S → Signal (to gauge SEND)
  • GND → Ground / thread (engine block)

Pressure Gauge (analog)

  • PWR+, GND, SEND, ILL+ (same as temp gauge, different sender range)

Pressure Sender (resistive, 10–180Ω)

  • S → Signal
  • GND → Body/thread ground

Tachometer (magnetic pickup)

  • PWR+, PWR−
  • SIG+ → Signal + from alternator P or magnetic pickup
  • SIG− → Signal −
  • ILL+ → Illumination

RPM Pickup (magnetic)

  • OUT+ → Signal positive
  • OUT− → Signal / shield ground

Voltmeter (panel)

  • PWR+ → Measured circuit + (or dedicated 12V)
  • PWR− → GND

Ammeter (with external shunt)

  • M+ → Shunt terminal 1 (millivolt signal +)
  • M− → Shunt terminal 2 (millivolt signal −)
  • PWR+ → 12V supply (backlighting)
  • PWR− → GND

Shunt (DC ammeter shunt)

  • BAT_SIDE → Battery side terminal
  • LOAD_SIDE → Load side terminal
  • S+ → Millivolt sense + (to ammeter M+)
  • S− → Millivolt sense − (to ammeter M−)

NMEA 2000 Backbone / Drop cable

  • CAN_H → CAN High (blue wire)
  • CAN_L → CAN Low (white wire)
  • PWR+ → Net power (red, 12V)
  • PWR− → Net ground (black)
  • SHIELD → Drain/shield (bare)

Fan (axial DC)

  • PWR+ → 12/24VDC red
  • PWR− → GND black
  • TACH → RPM pulse output (yellow, optional)
  • PWM → Speed control input (blue, optional)

Bilge Pump (auto)

  • PWR+ → Always-on 12V (bypasses main switch per ABYC)
  • PWR− → GND
  • FLOAT_IN → Float switch signal (auto mode)
  • MANUAL_IN → Manual override from panel switch

Float Switch

  • COM → Common
  • NO → Normally Open (pump trigger when float rises)
  • NC → Normally Closed

COMPONENT CATEGORIES (250+ total)

1. Power Distribution (30) Bus Bar DC+ (4/6/8/10/12/20 posts), Bus Bar DC− Ground, Bus Bar AC (L1/L2/N), Mega Bus Bar 600A, DualBus +/−, Bus Bar with cover IP44, Fuse ATC (all amperages with correct colors per SAE: 5A=tan, 7.5A=brown, 10A=red, 15A=blue, 20A=yellow, 25A=white, 30A=green, 40A=pink), Fuse ATM Mini, Fuse MAXI, Fuse ANL, Fuse MIDI, Fuse cylindrical AG, Fuse glass AGC, Fuse HRC cartridge, Fuse block ATC 4/6/8/12, Fuse block ATM, Fuse block MAXI, Fuse block cylindrical, Fuse block with LED indicators, Inline fuse holder (ANL, MIDI, ATC), Panel DC breakers 6/12/18 pos, Panel AC breakers, Panel DC+AC combined, Blue Sea style panel, Sub-panel 4/8

2. Batteries & Isolation (18) Battery 12V (AGM/GEL/LiFePO4 variants), Battery 24V, Battery 48V, Battery bank series/parallel, Battery Switch 1-2-Both-Off, Battery Switch DPDT, VSR/ACR, Battery Monitor (Victron style with shunt display), Shunt 500A, BMS, Cell balancer, Contactor DC (Kilovac), Contactor AC, Pre-charge resistor, Galvanic isolator, Isolation transformer, Diode split-charge, DC-DC charger (B2B)

3. Relays — All Types (20) Relay SPST NO (4-pin), Relay SPST NC, Relay SPDT (5-pin, Bosch cube), Relay DPDT (8-pin), Relay socket DIN, Relay power 100A, Relay power 200A, Relay bistable/latching, Relay time-delay ON, Relay time-delay OFF, Relay SSR DC, Relay SSR AC, Relay thermal bimetallic, Relay reverse-polarity H-bridge, Relay signal (mini PCB), Reed relay, Safety relay, Watchdog relay, Modular relay DIN rail, Relay motor reversing pair

4. Coils & Inductors (10) Solenoid coil 12VDC, Solenoid coil 24VDC, Relay coil (internal diagram view), Contactor coil, Electromagnetic brake coil, EMI filter choke, Ignition coil, Glow plug coil, RF toroid, Power inductor

5. Capacitors (12) Start capacitor (motor, cylindrical), Run capacitor (oval), Dual run capacitor (HVAC, oval), Electrolytic capacitor (DC filter), Film capacitor (AC suppression), Ceramic capacitor (signal), Supercapacitor / ultracap, Capacitor bank DC, Power factor correction cap (AC), Snubber capacitor (relay), X2 capacitor (EMI), Y capacitor (EMI)

6. Motors & Starters (18) Motor DC brushed (12/24V), Motor DC brushless BLDC, Motor AC single-phase, Motor AC 3-phase, Motor starter (with solenoid), Alternator 12V (55/70/100/130A), Alternator 24V, Alternator high-output 200A+ (Balmar), External voltage regulator, Bilge pump motor, Water pump motor, Fuel pump motor, Fan motor DC, Bow thruster motor, Stern thruster motor, Windlass/winch motor, Trim motor, Actuator motor

7. Actuators (14) Linear actuator DC (with limit switches), Rotary actuator, Trim tab actuator, Interceptor actuator, Hatch actuator, Seacock actuator, Servo motor + encoder, Stepper + driver, Anchor lock actuator, CPP pitch actuator, Fin stabilizer actuator, Joystick controller, Damper actuator, Mast actuator

8. Electrohydraulic Systems (14) Hydraulic power pack, Hydraulic pump DC, Hydraulic cylinder double-action, Hydraulic cylinder single-action, Directional valve 4/3, Directional valve 4/2, Relief valve, Check valve hydraulic, Hydraulic pressure gauge, Hydraulic pressure sensor, Hydraulic accumulator, Hydraulic filter, Autopilot hydraulic ram, Helm pump

9. Solenoid Valves (12) Valve 2/2 NC 12V, Valve 2/2 NO, Valve 3/2, Valve 4/2 hydraulic, Valve fuel, Valve freshwater, Valve seawater (seacock), Valve LPG gas safety, Valve bilge, Valve AC cooling, Motorized ball valve 24V, Butterfly valve electric

10. HVAC Marine (16) AC unit self-contained 115VAC, AC unit self-contained 230VAC, AC unit 12VDC (variable speed), Split system fan coil, Split system condensing unit, Seawater pump AC (115VAC), Seawater pump DC (12/24V), Seawater strainer, HVAC thermostat, HVAC control board, Pump relay box (multi-unit), Refrigerant compressor (standalone), Evaporator coil, Condenser coil (sea-cooled), Expansion valve, HVAC distribution blower

11. Fans & Cooling (10) Fan axial DC 12V (with RPM/PWM pins), Fan axial DC 24V, Fan centrifugal/blower, Engine room exhaust fan, Engine room intake fan, Fan with thermostat, PWM fan controller, Heat exchanger, Bimetallic thermostat, Electronic thermostat NTC

12. Alarms & Safety (18) Smoke detector photoelectric, Smoke detector ionization, CO detector, LPG gas detector, CNG/gasoline detector, Flame detector UV/IR, Temperature switch high, Audible alarm 100dB, Strobe alarm, Alarm panel 4/8/16 zones, Fire suppression trigger, Suppression system (FM200/CO2), Panic button / MOB, EPIRB electric, Bilge high water alarm, Flood sensor, Gas solenoid safety valve (auto close), Emergency stop

13. Sensors & Instrumentation (22) Oil pressure sensor (resistive), Oil pressure switch (on/off), Water temp sender (NTC), Fuel level sender (resistive 0–190Ω), Freshwater level sensor, Holding tank sensor, Float switch bilge NO/NC, Float switch tank, RPM pickup magnetic, Speed paddle wheel, Depth transducer, Ultrasonic wind sensor, Wind sensor potentiometer, Fluxgate compass, Rate gyro, Rudder feedback potentiometer, Rotary encoder, DC current sensor Hall effect, Voltage sensor, pH/salinity sensor, Exterior temp transducer, Trim position sensor

14. Instruments & Displays (38) Rudder angle indicator analog (dial, port/stbd scale), RAI digital display, RAI NMEA 2000, Trim tab indicator dual needle, Trim motor indicator, CPP pitch indicator, Inclinometer/clinometer, Rate of turn indicator, Compass illuminated, Thermometer analog (water/oil/exhaust), Thermometer digital, Temp multi-zone display 4/8ch, PID temperature controller, Pressure gauge analog (oil/fuel/hydraulic), Pressure gauge digital, Differential pressure indicator, Barometer, Tachometer analog (0–4000 RPM), Tachometer digital, Tach+hourmeter combo, RPM synchronizer dual engine, Speed indicator (knots), SOG display GPS, Fuel level gauge analog, Fuel level gauge digital, Multi-tank display 4/8ch, Fuel consumption display, Voltmeter analog DC, Voltmeter digital DC, Voltmeter AC, Ammeter (with external shunt), Wattmeter, Frequency meter Hz, Power factor meter, Insulation resistance meter, Battery SOC % display, Battery monitor multi-function, Hour meter, Cluster analog 4-gauge, Cluster analog 6-gauge, MFD 4"/7"/12"

15. Marine Electronics (22) VHF fixed mount, VHF extension handset, DSC controller, Chartplotter/MFD, Fishfinder/sonar, AIS Class B transponder, AIS receiver only, NMEA 2000 backbone segment, NMEA 2000 T-connector, NMEA 2000 hub 4/6/8 port, NMEA 2000 terminator 120Ω, NMEA 0183 converter, Autopilot computer, Autopilot display, Wind instrument display, GPS antenna (active), VHF antenna, Radar dome, AIS antenna splitter, SSB/HF radio, Satellite communicator, Depth/speed transducer

16. AC Shore Power & Generation (14) Shore inlet 30A NEMA L5-30, Shore inlet 50A NEMA SS2-50, Shore inlet 16A IEC 60309, Shore power monitor, Inverter DC→AC, Inverter/charger combo (Victron style), Battery charger AC 3-bank, Transfer switch ATS, Generator diesel marine, Generator gasoline, Generator control panel, AVR automatic voltage regulator, Shaft generator, Wind generator / Solar panel

17. Switches & Control (18) Switch toggle SPST, Switch toggle SPDT, Switch toggle DPDT, Switch rocker illuminated marine, Switch push button momentary, Switch rotary 4-pos, Foot switch, Magnetic reed switch, Limit switch, Proximity switch inductive, Kill switch motor, Ignition switch 3-pos, Trim switch panel, Joystick 2-axis, Potentiometer/rheostat, Manual encoder, Dimmer switch DC, Remote control 4-button

18. Connectors & Terminals (20) Ring terminal (by AWG: 22–4/0), Fork/spade terminal, Deutsch DT connector 2/4/6/8 pin, Weatherpack connector, Anderson SB 50/175/350A, PowerPole 30/45A, SAE inline connector, Marinco 12V outlet, DIN terminal block, Wago terminal block, Solder seal splice, Butt connector, Junction box, Grounding lug panel, M12 sensor connector, RJ45, Coax PL-259, MC4 solar connector, Shore power plug 30A, Shore power plug 50A

19. Lighting & Deck (12) Navigation lights (port/stbd/stern/masthead), All-around white light, Interior LED, Strobe/flash, Searchlight, Horn electric, Fog horn, Windlass anchor, Capstan, Electric winch, Bilge pump auto, Water heater electric

Wire / Edge System

Custom React Flow edge WireEdge:

Properties (shown in panel on click):

  • color (ABYC E-11 color picker with standard presets)
  • awg (selector: 22/20/18/16/14/12/10/8/6/4/2/1/0/00/000/0000)
  • label (circuit name)
  • length_ft / length_m (auto-converted)
  • wireType (ABYC boat cable / NMEA / coax / hydraulic hose / fuel line)
  • shielded (boolean)

Wire thickness by AWG:

  • 18AWG = 1.5px, 16AWG = 2px, 14AWG = 2.5px, 12AWG = 3px, 10AWG = 3.5px, 8AWG = 4px, 6AWG = 5px, 4AWG = 6px, 2AWG = 7px, 0AWG = 9px, 00AWG+ = 11px

ABYC E-11 colors (preset palette):

  • DC+ = Red
  • DC− = Black or Yellow
  • Ground/bonding = Green or Green/Yellow
  • AC Line (hot) = Black
  • AC Neutral = White
  • AC Ground = Green
  • Accessory feed = Orange
  • Tachometer = White
  • Alternator field = Blue
  • Instrument lights = Brown/Yellow
  • Fuel gauge = Pink
  • Bilge pump = Tan
  • NMEA+ = Blue
  • NMEA− = White (in pair)

Hydraulic / plumbing lines (dashed, no AWG, shows bar/PSI):

  • Pressure = solid orange dashed
  • Return = dashed blue
  • Case drain = thin gray dashed

Canvas

  • React Flow with pan, zoom (mouse wheel + pinch), minimap (bottom right)
  • Grid snap toggle (10mm grid)
  • Multiple pages per project (tabs: "DC System", "AC System", "NMEA Network", "Engine Room", "Custom")
  • Right-click context menu: delete, duplicate, properties, add label, lock
  • Multi-select shift+click + drag box
  • Undo/redo stack (Ctrl+Z / Ctrl+Y), 50 levels
  • Auto-arrange layout option (dagre algorithm)
  • Alignment guides when dragging
  • Notes/annotation nodes (sticky notes)
  • Image nodes (upload custom image as reference)
  • Scale rule (feet or meters, set per diagram)

Left Sidebar — Component Library

  • Search bar (EN/ES)
  • Filter by category (collapsible accordion)
  • Each component shown as small SVG preview + label
  • Drag to canvas to instantiate
  • Recently used section
  • Favorites (star to save)
  • "My custom components" section (user can save modified components)

Properties Panel (right sidebar)

Opens when component or wire selected:

Component:

  • Label (editable)
  • Model/brand (text)
  • Voltage rating
  • Current rating / amperage
  • Notes
  • Component-specific fields (e.g., fuse: amperage, blown state toggle; bus bar: post count, rating; relay: coil voltage, contact rating; capacitor: µF, voltage, type)
  • Terminal list (read-only, shows all pins with their labels and recommended wire colors/AWG)
  • ABYC compliance note (auto-generated based on component type)

Wire:

  • AWG selector
  • Color picker (ABYC presets)
  • Circuit label
  • Length (ft/m)
  • Wire type
  • Fused? (boolean, links to fuse component)

Toolbar (top bar)

Left: MarineWire logo | New | Open | Save | Save As Center: Vessel name | Diagram name | Page tabs Right: Undo | Redo | Zoom | Grid | Language (EN/ES) | Export | Settings

Export options:

  • PDF (multi-page: diagram + wire list + component list)
  • PNG (high-res)
  • SVG
  • JSON (project backup)
  • CSV wire list

PDF Export content

Page 1: Diagram (full page) Page 2: Wire Schedule table

  • Circuit # | From component | From terminal | To component | To terminal | AWG | Color | Length | Notes Page 3: Component List

  • | Type | Label | Model | Rating | Location notes

Page 4: ABYC Compliance Checklist (auto-generated) Header on all pages: Vessel name | Owner | Date | Prepared by | Revision #

ABYC Validation Engine

Real-time warnings (yellow) and errors (red) shown as badges on components:

Errors:

  • Fuse missing on positive wire within 7 inches of source (per ABYC E-11)
  • Wire AWG too small for connected fuse rating (ampacity table)
  • Bilge pump not on always-on circuit
  • AC and DC grounds mixed
  • Shore power without isolation transformer or galvanic isolator (warning)

Warnings:

  • Wire run too long for AWG (voltage drop > 3%)
  • Fuse rating >125% of wire ampacity
  • Alternator S-sense wire routed through ignition switch

SVG Component Design Requirements

All components MUST look realistic:

  • Metallic surfaces: linearGradient copper (#e8a830 → #c87d1a → #a05c0a), nickel (#d0d0d0 → #888 → #606060), steel (#b0b0b0 → #777 → #505050)
  • Plastic bodies: dark (#282828), with subtle highlight line on top edge
  • Hexagonal bolts: polygon points, with face gradient and center circle (washer)
  • Fuse ATC blade: correct color per amperage rating, transparent window with filament path, terminal blades bottom and top
  • Relay cube: Bosch-style square body, pin numbers printed on base, coil diagram on side
  • Capacitors: Start cap = cylindrical blue/black; Run cap = oval gray; Electrolytic = cylindrical with stripe for negative; dual run cap = oval with 3 terminals labeled C/FAN/HERM
  • Alternator: Side view with pulley, B+ stud, terminal connector block showing S/L/P labels
  • HVAC unit: Front panel with display, knobs, water inlet/outlet ports shown
  • Instruments/gauges: Circular dial face with scale, needle, bezel ring, backlight glow
    • Analog style: realistic clockface, numbered scale, pointer needle
    • Digital style: 7-segment LCD display, dark background, lit digits
    • Dual-style: both variants available per component (user selects in properties)
  • Gauges specifically:
    • RPM gauge: 0–4000 RPM scale, red zone >3500
    • Temp gauge: 40–120°C, red zone >100°C, color-coded arc (blue=cold, green=normal, red=hot)
    • Pressure gauge: 0–10 bar, with red zone
    • Rudder angle: center-zero dial, PORT (P) left, STBD (S) right, ±35° or ±45° scale, large clear needle
    • Voltmeter: 10–15V for 12V system, 20–30V for 24V
    • Ammeter: center-zero, ±100A or ±500A
  • Terminal handles on SVG: Each React Flow Handle renders as a small colored dot/square at the exact terminal location on the SVG, with tooltip showing pin label + recommended wire

Database Schema (Prisma)

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  password  String
  clients   Client[]
  createdAt DateTime @default(now())
}

model Client {
  id       String   @id @default(cuid())
  name     String
  contact  String?
  phone    String?
  email    String?
  userId   String
  user     User     @relation(fields: [userId], references: [id])
  vessels  Vessel[]
}

model Vessel {
  id       String    @id @default(cuid())
  name     String
  type     String?
  length   Float?
  year     Int?
  hull_id  String?
  clientId String
  client   Client    @relation(fields: [clientId], references: [id])
  projects Project[]
}

model Project {
  id          String   @id @default(cuid())
  name        String
  description String?
  vesselId    String
  vessel      Vessel   @relation(fields: [vesselId], references: [id])
  pages       Page[]
  updatedAt   DateTime @updatedAt
  createdAt   DateTime @default(now())
}

model Page {
  id        String        @id @default(cuid())
  name      String
  projectId String
  project   Project       @relation(fields: [projectId], references: [id])
  nodes     DiagramNode[]
  edges     DiagramEdge[]
  order     Int           @default(0)
}

model DiagramNode {
  id           String  @id @default(cuid())
  pageId       String
  page         Page    @relation(fields: [pageId], references: [id])
  componentId  String
  positionX    Float
  positionY    Float
  properties   Json
}

model DiagramEdge {
  id           String  @id @default(cuid())
  pageId       String
  page         Page    @relation(fields: [pageId], references: [id])
  sourceNodeId String
  sourceHandle String
  targetNodeId String
  targetHandle String
  properties   Json
}

File Structure

marinewire/
├── client/                          # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── nodes/               # One file per component SVG
│   │   │   │   ├── power/
│   │   │   │   │   ├── BusBarDC.jsx
│   │   │   │   │   ├── BusBarGround.jsx
│   │   │   │   │   ├── FuseATC.jsx
│   │   │   │   │   ├── FuseBlock.jsx
│   │   │   │   │   ├── FuseANL.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── batteries/
│   │   │   │   │   ├── Battery12V.jsx
│   │   │   │   │   ├── BatterySwitch.jsx
│   │   │   │   │   ├── ACR.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── relays/
│   │   │   │   │   ├── RelaySPDT.jsx
│   │   │   │   │   ├── RelaySPST.jsx
│   │   │   │   │   ├── RelayPower.jsx
│   │   │   │   │   ├── RelaySSR.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── capacitors/
│   │   │   │   │   ├── CapacitorStart.jsx
│   │   │   │   │   ├── CapacitorDualRun.jsx
│   │   │   │   │   ├── CapacitorElectrolytic.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── motors/
│   │   │   │   │   ├── MotorDC.jsx
│   │   │   │   │   ├── MotorStarter.jsx
│   │   │   │   │   ├── Alternator.jsx
│   │   │   │   │   ├── AlternatorBalmar.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── hvac/
│   │   │   │   │   ├── ACUnit.jsx
│   │   │   │   │   ├── SeawaterPump.jsx
│   │   │   │   │   ├── HVACThermostat.jsx
│   │   │   │   │   ├── PumpRelayBox.jsx
│   │   │   │   │   ├── Compressor.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── instruments/
│   │   │   │   │   ├── GaugeRPM.jsx          # analog + digital variants
│   │   │   │   │   ├── GaugeTemp.jsx
│   │   │   │   │   ├── GaugePressure.jsx
│   │   │   │   │   ├── RudderAngleIndicator.jsx
│   │   │   │   │   ├── TrimIndicator.jsx
│   │   │   │   │   ├── Voltmeter.jsx
│   │   │   │   │   ├── Ammeter.jsx
│   │   │   │   │   ├── Tachometer.jsx
│   │   │   │   │   ├── GaugeCluster4.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── electronics/
│   │   │   │   │   ├── VHFRadio.jsx
│   │   │   │   │   ├── Chartplotter.jsx
│   │   │   │   │   ├── AISTransponder.jsx
│   │   │   │   │   ├── NMEA2000Hub.jsx
│   │   │   │   │   └── ...
│   │   │   │   ├── sensors/
│   │   │   │   ├── valves/
│   │   │   │   ├── actuators/
│   │   │   │   ├── switches/
│   │   │   │   ├── alarms/
│   │   │   │   └── connectors/
│   │   │   ├── edges/
│   │   │   │   └── WireEdge.jsx
│   │   │   ├── panels/
│   │   │   │   ├── ComponentLibrary.jsx     # left sidebar
│   │   │   │   ├── PropertiesPanel.jsx      # right sidebar
│   │   │   │   ├── Toolbar.jsx
│   │   │   │   └── PageTabs.jsx
│   │   │   ├── canvas/
│   │   │   │   └── DiagramCanvas.jsx
│   │   │   └── auth/
│   │   │       ├── Login.jsx
│   │   │       └── Register.jsx
│   │   ├── store/
│   │   │   ├── diagramStore.js
│   │   │   ├── authStore.js
│   │   │   └── uiStore.js
│   │   ├── lib/
│   │   │   ├── componentRegistry.js       # all 250+ component definitions
│   │   │   ├── abyc.js                    # ABYC E-11 constants, validation
│   │   │   ├── din72552.js                # relay terminal standards
│   │   │   ├── wireCalc.js                # voltage drop, ampacity
│   │   │   ├── export.js                  # PDF/PNG/CSV
│   │   │   └── i18n/
│   │   │       ├── en.json
│   │   │       └── es.json
│   │   └── App.jsx
├── server/                          # Node.js backend
│   ├── src/
│   │   ├── routes/
│   │   │   ├── auth.js
│   │   │   ├── clients.js
│   │   │   ├── vessels.js
│   │   │   └── projects.js
│   │   ├── middleware/
│   │   │   └── auth.js
│   │   └── index.js
│   └── prisma/
│       └── schema.prisma
└── package.json (monorepo with workspaces)

Build Order

  1. Scaffold monorepo (client + server)
  2. Backend: Prisma schema, auth routes, CRUD for clients/vessels/projects
  3. Component registry (componentRegistry.js) — define all 250+ components with their handles, properties, and SVG references
  4. Build first 20 SVG nodes — one per category, as proof of concept:
    • BusBarDC, FuseATC, FuseBlock, RelaySPDT, Battery12V, BatterySwitch, Alternator, CapacitorDualRun, ACUnit, SeawaterPump, GaugeRPM (analog), GaugeTemp, RudderAngleIndicator, VHFRadio, NMEA2000Hub, FloatSwitch, SolenoidValve, LinearActuator, HydraulicCylinder, ShoreInlet30A
  5. Canvas with React Flow, those 20 nodes, WireEdge
  6. Left sidebar — component library with search + categories
  7. Properties panel right sidebar
  8. Toolbar + page tabs
  9. Remaining 230+ SVG nodes — complete all categories
  10. ABYC validation engine
  11. PDF/PNG/CSV export
  12. Auth UI (login/register)
  13. Client/Vessel/Project management UI

Critical Quality Rules

  • Every SVG component must look like the real thing — use gradients, realistic proportions, and detail
  • Every Handle must be positioned exactly where the real terminal is on the component
  • Every terminal must have the correct label (B+, S, L, 85, 86, 87, etc.)
  • Wire colors must default to ABYC E-11 standard when connecting specific terminal types
  • The app must work in both English and Spanish — every label, tooltip, and panel text
  • Mobile-responsive is NOT required — this is a desktop professional tool
  • Minimum canvas size: 3000×2000px virtual space
Reference in New Issue View Git Blame Copy Permalink