Skip to main content
tscircuit Essentials

System block diagrams

Use system blocks to explain what a circuit does. This wireless sensor node collects measurements, processes them, and transmits them through a radio.

Describe the system​

Start with a systemblock.page. Add a systemblock.component for each function, and use a systemblock.group to collect related functions. Connect the blocks with systemblock.connection elements that name the interfaces between them.

System block diagram
import { systemblock } from "tscircuit"

export default () => (
  <systemblock.page name="overview" displayName="Wireless sensor node" direction="down">
    <systemblock.group name="processing" displayName="Sensing and processing">
      <systemblock.component name="sensor" displayName="Environment sensor"
        description="Measures temperature and humidity" />
      <systemblock.component name="mcu" displayName="Microcontroller"
        description="Processes readings" />
    </systemblock.group>
    <systemblock.component name="radio" displayName="Radio module"
      description="Transmits measurements" />
    <systemblock.connection from="sensor" to="mcu" label="I2C" direction="both" />
    <systemblock.connection from="mcu" to="radio" label="SPI" direction="both" />
  </systemblock.page>
)

Here, the sensor and microcontroller belong to the same subsystem. The I2C and SPI connections have arrows at both ends to indicate two-way communication. The page's direction="down" arranges the flow vertically. Core chooses block sizes, positions, routes, and label positions automatically.

The preview is rendered from this TSX by svg.tscircuit.com using circuit-to-svg. Exported System SVGs work independently of the editor's available tabs. Save the example as system-blocks.circuit.tsx to use it in the export below.

Render an SVG​

The tscircuit package re-exports the systemblock namespace from @tscircuit/core.

import { Circuit } from "tscircuit"
import { convertCircuitJsonToSystemSvg } from "circuit-to-svg"
import SystemOverview from "./system-blocks.circuit"

const circuit = new Circuit()
circuit.add(<SystemOverview />)
await circuit.renderUntilSettled()
const json = circuit.getCircuitJson()
const svg = convertCircuitJsonToSystemSvg(json, {
  width: 1000,
})

This exports the first system block page. Pass the generated circuit output directly to the converter; no inspection or editing is needed.