<systemblock.connection />

systemblock.connection connects two systemblock.component elements on the same systemblock.page. It represents a functional interface without creating electrical traces or nets.

import { systemblock } from "tscircuit"

export default () => (
  <systemblock.page name="overview" direction="down">
    <systemblock.component name="supply" displayName="3.3 V supply" />
    <systemblock.component name="sensor" displayName="Sensor" />
    <systemblock.component name="controller" displayName="Controller" />
    <systemblock.connection
      from="supply"
      to="controller"
      kind="power"
      label="3.3 V"
    />
    <systemblock.connection
      from="sensor"
      to="controller"
      label="I2C"
      direction="both"
    />
  </systemblock.page>
)

See the system block diagrams guide for connections in a complete, rendered diagram.

Connection properties

Property	Description
from	Required source component name on the same page.
to	Required destination component name on the same page.
name	Optional connection name; must be unique among connections on the page.
label	Label displayed along the route, such as I2C or 3.3 V.
kind	signal (default) or power.
direction	Arrowheads: forward (default), both, or none.

Use component names such as sensor, rather than pin selectors. Components may belong to different groups on the same page. Parallel interfaces, feedback cycles, and self-loops are supported.

Signal connections are solid blue; power connections are dashed orange. direction="forward" points from from to to; both adds arrows at both ends, and none removes arrowheads. This setting is independent of the page's layout direction.

tscircuit places the connection route and label automatically.