name: schematic-creator description: Create interactive schematic visualizations for breakout boards, driver boards, and other PCB designs. Renders as interactive HTML in the Gallia Viewer viewer with pan/zoom, hover tooltips, net highlighting, and color-coded wiring. Use when the user asks to "show the schematic", "create a schematic", "visualize the circuit", "wire diagram", or wants to see how components connect together on a board.
Schematic Creator
Create interactive schematic visualizations and display them in the Gallia Viewer viewer. These are visual HTML schematics — not KiCad .kicad_sch files. They show how components connect together on a board with color-coded nets, hover tooltips, and pan/zoom navigation.
When to Use
- User asks to "show the schematic" or "create a schematic visualization"
- User wants to see how components wire together on a breakout/driver board
- After creating component symbols, user wants to see the overall board design
- User asks to "visualize the circuit" or "show the wiring"
Output
A single self-contained HTML file saved to the project schematics directory:
/home/adom/project/project-content/schematics/BOARD_NAME-schematic.html
Displayed in Gallia Viewer via gv_display_file.
Hydrogen Color Scheme
All schematic visualizations MUST match the Hydrogen dark theme. These are the exact colors:
Backgrounds & Borders
| Element | Color |
|---|---|
| Body background | #0f1218 |
| Component body fill | #161b22 |
| Component body stroke | #30363d |
| Component hover fill | #1c2530 |
| Component hover stroke | #00b8b1 (teal accent) |
| Bar/panel background | rgba(13, 17, 23, 0.95) |
| Bar border | #21262d |
Text Colors
| Element | Color |
|---|---|
| Primary text (labels) | #e6edf3 |
| Secondary text (sublabels) | #7d8590 |
| Muted text (info labels) | #7d8590 |
| Pin names | #8b949e |
| Passive values | #c9d1d9 |
| Reference designators | #00b8b1 (teal) |
| Group labels | #f47067 (same as power wire color) |
Wire/Net Colors
| Net Type | Color | Use For |
|---|---|---|
| Power (VCC, VIN, VSYS, 3.3V, 5V) | #f47067 | Supply rails, regulator I/O |
| Ground (GND, VSS) | #6cb6ff | Ground bus, ground connections |
| Signal (SDA, SCL, data, control) | #57ab5a | I2C, SPI, GPIO, interrupts |
| Secondary power (1.8V, VCORE) | #daaa3f | Secondary voltage rails |
Badges (tooltips)
| Type | Background | Text |
|---|---|---|
| IC | #1a3040 | #00b8b1 |
| Passive | #302a1a | #daaa3f |
| Connector | #1a3020 | #57ab5a |
Junction Dots
Junction dots at wire intersections should match their wire color:
- Power junctions:
#f47067 - Ground junctions:
#6cb6ff - Signal junctions:
#57ab5a - Secondary power:
#daaa3f
Fonts
- UI text:
-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif - Pin names / net labels / passive values:
'SF Mono', 'Fira Code', 'Consolas', monospace
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>/* Hydrogen theme CSS */</style>
</head>
<body>
<div id="title-bar"><!-- Board name, subtitle, controls hint --></div>
<div id="zoom-controls"><!-- +, -, fit buttons --></div>
<div id="schematic-container">
<svg id="schematic" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<!-- Component groups, wiring, passives, labels -->
</svg>
</div>
<div id="info-bar"><!-- Design summary, hover details --></div>
<div id="tooltip"></div>
<script>/* Pan/zoom, tooltips, zoom-to-fit on load */</script>
</body>
</html>
Critical: SVG Sizing
The SVG MUST use width="100%" height="100%" — NOT fixed pixel dimensions like width="5000". Fixed dimensions break rendering inside the Gallia Viewer iframe.
Critical: Zoom-to-Fit on Load
The schematic MUST call zoomFit() at the end of the script to auto-frame all content on load. The zoomFit() function uses svg.getBBox() to calculate the content bounding box and sets the viewBox accordingly with padding and aspect ratio correction.
function zoomFit() {
var bbox = svg.getBBox();
var pad = 30;
viewBox.x = bbox.x - pad;
viewBox.y = bbox.y - pad;
viewBox.w = bbox.width + pad * 2;
viewBox.h = bbox.height + pad * 2;
var containerAspect = container.clientWidth / container.clientHeight;
var svgAspect = viewBox.w / viewBox.h;
if (svgAspect > containerAspect) {
var newH = viewBox.w / containerAspect;
viewBox.y -= (newH - viewBox.h) / 2;
viewBox.h = newH;
} else {
var newW = viewBox.h * containerAspect;
viewBox.x -= (newW - viewBox.w) / 2;
viewBox.w = newW;
}
updateViewBox();
}
// MUST be called at end of script
zoomFit();
Component Rendering
ICs (U-prefixed)
Rendered as rounded rectangles (rx="4") with:
- Reference designator (teal
#00b8b1) above the body - Part name (white) centered in body
- Sublabel (gray) below part name
- Pin stubs as short lines extending from body edges
- Pin names in monospace next to each stub
- Group labels in red (
#f47067) inside the body
<g id="U1" data-component="U1" data-desc="Part description for tooltip.">
<rect x="750" y="140" width="160" height="340" class="comp-body" rx="4"/>
<text x="830" y="168" text-anchor="middle" class="comp-label">PART_NAME</text>
<text x="830" y="182" text-anchor="middle" class="comp-sublabel">Description</text>
<text x="830" y="135" text-anchor="middle" class="comp-ref">U1</text>
<!-- Group labels -->
<text x="760" y="205" class="group-label">GROUP NAME</text>
<!-- Pins -->
<line x1="730" y1="215" x2="750" y2="215" class="pin-line"/>
<text x="755" y="218" class="pin-name">PIN_NAME</text>
<circle cx="730" cy="215" r="2" class="pin-dot" data-pin="PIN_NAME" data-desc="Pin tooltip"/>
</g>
Capacitors (C-prefixed)
Two parallel lines (plates) with leads. Top lead must be at least 8-10 SVG units (from rail to first plate) and GND stub must be at least 9-12 SVG units (from bottom lead to first GND bar). This ensures clear visual separation between the rail wire, cap body, and GND symbol.
When stacking multiple caps vertically (e.g. decoupling caps on adjacent supply pins), the supply pins must be spaced far enough apart that each cap+GND symbol has at least 20 units clearance to the next cap above/below. A cap+GND takes ~36 units total height (10 top lead + 3 plates + 7 bottom lead + 10 GND stub + 6 GND bars). So pins need ~56+ units apart for comfortable spacing.
<g data-component="C1" data-desc="Capacitor description.">
<line x1="X" y1="RAIL_Y" x2="X" y2="RAIL_Y+10" class="cap-body"/> <!-- top lead (10 units) -->
<line x1="X-7" y1="RAIL_Y+10" x2="X+7" y2="RAIL_Y+10" class="cap-body"/> <!-- top plate -->
<line x1="X-7" y1="RAIL_Y+13" x2="X+7" y2="RAIL_Y+13" class="cap-body"/> <!-- bottom plate -->
<line x1="X" y1="RAIL_Y+13" x2="X" y2="RAIL_Y+20" class="cap-body"/> <!-- bottom lead (7 units) -->
<text class="passive-value">1u</text>
<text class="passive-label">C1</text>
</g>
<!-- GND symbol with 12-unit stub -->
<line x1="X" y1="RAIL_Y+20" x2="X" y2="RAIL_Y+32" stroke="#6cb6ff" stroke-width="1.5"/>
<line x1="X-5" y1="RAIL_Y+32" x2="X+5" y2="RAIL_Y+32" stroke="#6cb6ff" stroke-width="1.5"/>
<line x1="X-3" y1="RAIL_Y+35" x2="X+3" y2="RAIL_Y+35" stroke="#6cb6ff" stroke-width="1.5"/>
<line x1="X-1" y1="RAIL_Y+38" x2="X+1" y2="RAIL_Y+38" stroke="#6cb6ff" stroke-width="1.5"/>
Resistors (R-prefixed)
Small rectangle body with leads:
<g data-component="R1" data-desc="Resistor description.">
<line x1="X" y1="Y" x2="X" y2="Y+10" class="res-body"/> <!-- top lead -->
<rect x="X-5" y="Y+10" width="10" height="20" class="res-body"/> <!-- body -->
<line x1="X" y1="Y+30" x2="X" y2="Y+40" class="res-body"/> <!-- bottom lead -->
<text class="passive-value">47k</text>
<text class="passive-label">R1</text>
</g>
Connectors (J-prefixed)
Same rounded rectangle as ICs but with connector-specific badge color in tooltips.
Adom machine contacts (default): In the Adom factory, boards use machine contacts instead of standard 2.54mm pin headers. Machine contacts are:
- 2mm pitch (not 2.54mm)
- 0.8mm through-hole diameter
- 3-finger contacts press-fit into the holes
- Machine pins are inserted by robot pincers to complete wired connections
When creating schematics for Adom boards, label connectors as "MC" (Machine Contacts) instead of "HDR" (Header). Example: "1x7 MC" instead of "1x7 HDR". Set the sublabel to "Machine Contacts" and include the pitch/hole specs in the data-desc tooltip.
Standard pin headers (2.54mm) should only be used when the user explicitly requests them or when the board is not intended for the Adom factory.
Wiring
Wire Classes
.wire { stroke-width: 1.5; fill: none; }
.wire-power { stroke: #f47067; }
.wire-gnd { stroke: #6cb6ff; }
.wire-signal { stroke: #57ab5a; }
.wire-1v8 { stroke: #daaa3f; } /* or any secondary rail */
Routing
- Use
<polyline>for multi-segment wires with 90-degree bends - Use
<line>for straight single-segment connections - Place net labels using
<text>with the appropriate.net-label .net-*classes - Add junction dots (
<circle>with inlinestyle="fill:COLOR"matching the wire) at T-junctions
CRITICAL: No Wires Through Component Bodies
Wires must NEVER cross through a component body rectangle. This is a fundamental schematic design rule. Always route wires AROUND components, not through them.
Verification step: After placing all wires, check every wire segment against every component body bounding box. If a wire's path intersects a component rectangle, reroute it.
Common violation patterns and fixes:
Horizontal rail through an IC body — Route the rail above or below the IC body, then drop a vertical segment down/up to reach the target pin on the far side.
Signal wire from one IC's pin to another IC, passing through an intermediate IC — Route the wire out of the pin, go UP (or DOWN) to clear the intermediate IC body, run horizontally past it, then drop back to the target pin's Y level.
Multiple wires needing to pass the same IC — Fan them out at staggered Y positions above (or below) the IC body, then drop each down at staggered X positions on the far side. Space parallel wires ~7 SVG units apart for readability.
Routing pattern for wires that need to get past an IC body:
Pin A ← wire goes left from pin
↑ up above IC body (y < body_top - 5)
→ horizontal past IC (x > body_right + 10)
↓ down to target pin Y
→ right to target Pin B
Example — routing 4 signals above a body with top at y=230:
<!-- Stagger Y positions: 215, 208, 201, 194 -->
<polyline points="400,295 378,295 378,215 730,215" class="wire wire-signal"/>
<polyline points="400,315 373,315 373,208 665,208 665,235 730,235" class="wire wire-signal"/>
<polyline points="400,335 368,335 368,201 670,201 670,330 730,330" class="wire wire-signal"/>
<polyline points="400,355 358,355 358,194 675,194 675,350 730,350" class="wire wire-signal"/>
Ground Symbols (No GND Bus)
Do NOT draw a horizontal GND bus or long GND wires. Instead, use inline GND symbols placed directly at each component's GND pin. This keeps the schematic clean and avoids cluttering with dozens of ground wires crossing the drawing.
The standard GND symbol is 3 horizontal lines of decreasing width, forming a triangle shape, placed at the end of a short stub wire from the pin:
<g class="gnd-symbol">
<line x1="X" y1="PIN_Y" x2="X" y2="PIN_Y+12" class="wire wire-gnd"/>
<line x1="X-6" y1="PIN_Y+12" x2="X+6" y2="PIN_Y+12" stroke="#6cb6ff" stroke-width="1.5"/>
<line x1="X-4" y1="PIN_Y+15" x2="X+4" y2="PIN_Y+15" stroke="#6cb6ff" stroke-width="1.5"/>
<line x1="X-2" y1="PIN_Y+18" x2="X+2" y2="PIN_Y+18" stroke="#6cb6ff" stroke-width="1.5"/>
</g>
Place one GND symbol at every GND pin: IC GND pins, capacitor ground leads, resistor pull-down grounds, connector GND pins. The symbol hangs directly below the pin with a short 12-unit stub wire.
For capacitors, the GND symbol attaches to the bottom lead. For ICs with bottom GND pins, the symbol hangs below. For ICs with side GND pins, the stub wire extends out from the pin then turns down to the symbol.
Net Legend
Place a legend in the bottom-left showing all net types with colored line samples.
CRITICAL: Legend placement must be verified last. After all wiring is complete, find the maximum Y coordinate of any wire, GND symbol, or component in the schematic. Place the legend at least 20 SVG units below that maximum Y value. Signal wires often route far below the main components (e.g. y=550), so the legend must be placed below ALL of them — not just below the component bodies.
<!-- Example: lowest wire is at y=550, so legend goes at y=575 or lower -->
<g transform="translate(40, 575)">
<text fill="#7d8590" font-size="8px" font-weight="600">NETS:</text>
<line stroke="#f47067" stroke-width="2"/>
<text class="net-label net-power">Power</text>
<!-- ... more net types ... -->
</g>
Interactivity
Pan & Zoom
- Pan: Click and drag to pan the schematic
- Zoom: Mouse wheel to zoom in/out (centered on cursor)
- Zoom controls: +, -, fit buttons in top-right corner
- Zoom to fit: Uses
svg.getBBox()for accurate content framing
Tooltips
Every <g> with data-component and data-desc attributes shows a tooltip on hover:
- IC components get a teal "IC" badge
- Passives get a gold "Passive" badge
- Connectors get a green "Connector" badge
Pin dots with data-pin and data-desc also show tooltips with pin-specific info.
The info bar at the bottom updates on hover to show a brief component summary.
JavaScript Compatibility
Use var instead of const/let for the broadest iframe compatibility. Use function(){} instead of arrow functions. Avoid template literals — use string concatenation.
Layout Guidelines
Component Placement (left to right)
[Connector] → [Regulators] → [Level Shifter] → [Main IC]
J1 U2, U3 U4 U1
Signal flow goes left-to-right. Power regulation is between the connector and the main IC.
Vertical Organization
- Power rails run horizontally across the top portion
- Signal lines run horizontally through the middle
- Ground bus runs along the bottom
- Decoupling capacitors sit near their IC supply pins (right side of schematic)
- Pull-up/pull-down resistors sit between the level shifter and main IC
Spacing
- IC bodies: at least 100 SVG units apart horizontally
- Pin pitch within an IC: ~20 SVG units (matching 2.54mm grid feel)
- Group gaps: ~30 SVG units between pin groups
- Typical canvas: ~1100 x 600 SVG units for a small breakout board
Workflow
- Gather component data — Know all ICs, passives, connectors, and their pin connections from the design discussion
- Plan layout — Sketch component positions mentally: connector left, regulators center-left, level shifters center, main IC right
- Build SVG — Create each component group with pins, then wire everything together
- Verify wire routing — Check every wire against every component body rectangle. No wire may pass through a component body. Reroute any violations around the body (above/below/left/right).
- Add metadata —
data-component,data-desc,data-pinattributes for all interactive elements - Test zoom-to-fit — Verify
zoomFit()is called at end of script - Send to Gallia Viewer — Use
gv_display_fileto preview - Iterate — Fix layout issues, adjust spacing, refine tooltips based on user feedback
Reference Schematic
Working example:
/home/adom/project/project-content/schematics/VL53L8CX-breakout-schematic.html
This is an 18-component breakout board (VL53L8CX ToF sensor + 2x LDOs + level shifter + 11 caps + 2 resistors + 1x7 machine contacts) with full interactivity.
Common Pitfalls
- NEVER route wires through component bodies — This is the #1 schematic design rule. Every wire must route AROUND IC bodies, not through them. After wiring, verify every wire segment against every component bounding box. Route above/below/around any IC that's in the path. See the "No Wires Through Component Bodies" section under Routing for patterns.
- Maintain clearance around ALL symbols — Every component symbol (IC body, capacitor, resistor, GND symbol, connector) must have at least 15 SVG units of clear space around it where no unrelated wires pass. This includes passive symbols like caps and GND markers, not just IC bodies. After wiring, check every wire against every symbol bounding box. If a wire passes within 15 units of a symbol it doesn't connect to, reroute it. An EE expects clean visual separation between all elements.
- SVG width/height must be 100% — Fixed pixel dimensions (e.g.
width="5000") break rendering in the Gallia Viewer iframe - Must call zoomFit() on load — Without this, the schematic may render outside the visible viewport
- Use string concatenation, not template literals — Some iframe environments don't support ES6
- Junction dots must match wire color — Use inline
style="fill:#COLOR"on junction circles, not the generic.junctionclass - Use GND symbols, not a GND bus — Place inline 3-line GND symbols at each GND pin instead of drawing long wires to a bus. This keeps the schematic clean
- Legend overlapping wires — Always verify the legend position LAST, after all wiring is complete. Find the lowest Y of any wire/component and place the legend at least 20 units below it. Signal wires often route far below IC bodies.
- No overlapping labels — Component value texts and reference designator labels must never overlap with each other, with wires, or with any other element. When two caps are close together, ensure their labels point AWAY from each other (e.g. left cap labels go left, right cap labels go right). See the Mandatory Overlap Check section below — this is not optional.
- EN pin wiring — For LDOs with enable pins, explicitly wire EN to VIN (or show the tie) so the schematic is complete
Mandatory Overlap Check (BLOCKING — run before every display)
Any overlap of text labels with wires is a failed schematic. These are drawn for human consumption. Before displaying the schematic to the user, you MUST run this check. If any overlap is found, fix it and re-check before displaying. Loop until all overlaps are resolved.
Algorithm
For EVERY <text> element (passive-value, passive-label, net-label, comp-label, comp-ref, group-label):
Compute the text bounding box:
x_start: Fortext-anchor="end"→x - (charCount × 4.2). Fortext-anchor="middle"→x - (charCount × 2.1). For default (start) →x.x_end:x_start + (charCount × 4.2)(at font-size 7px monospace, each char ≈ 4.2 SVG units wide)y_top:y - fontSize(text draws ABOVE its baseline)y_bottom:y- Add 2-unit padding on all sides for visual breathing room
Check against EVERY wire segment (decompose polylines into individual segments):
- For horizontal wire at
y_wirefromx1tox2: overlap ify_top ≤ y_wire ≤ y_bottomAND x-ranges intersect - For vertical wire at
x_wirefromy1toy2: overlap ifx_start ≤ x_wire ≤ x_endAND y-ranges intersect
- For horizontal wire at
Check against EVERY other text element — bounding boxes must not intersect
Check against EVERY symbol body (cap plates, resistor bodies, GND bars, IC rects) — text bounding box must not intersect symbol bounding box
Fixing Overlaps
When an overlap is found:
- Move labels to the opposite side of the component (left↔right, or below GND symbol)
- Never move labels into another wire's path — re-check after every move
- Preferred label positions (in order): right of component, left of component (text-anchor="end"), below GND symbol
- If all sides have wires, increase component spacing first, then re-place labels
When to Run
- After initial wiring is complete (before first display)
- After ANY edit that moves wires, components, or labels
- Before EVERY
gv_display_filecall — no exceptions - No Unicode in data attributes — Use "uF", "kOhm" etc. in
data-descattributes instead of Unicode symbols to avoid encoding issues in some viewers