<schematicpath />

Overview

The <schematicpath /> element is a primitive drawing component used within <symbol /> to create connected line segments in custom schematic representations. It's ideal for zigzags, arrows, or any shape that requires multiple connected points.

note

<schematicpath /> can only be used inside a <symbol /> element.

Basic Path

Here's a simple example showing a zigzag path inside a symbol:

export default () => (
<board width="12mm" height="10mm">
  <chip
    name="U1"
    symbol={
      <symbol>
        <schematicpath
          strokeWidth={0.05}
          points={[
            { x: -1, y: -0.6 },
            { x: -0.3, y: 0.6 },
            { x: 0.4, y: -0.6 },
            { x: 1.1, y: 0.6 },
          ]}
        />
        <port name="in" direction="left" schX={-1.5} schY={0} />
        <port name="out" direction="right" schX={1.5} schY={0} />
      </symbol>
    }
  />
</board>
)

Arrow Path

You can use connected points to create custom arrows or indicators:

export default () => (
<board width="12mm" height="10mm">
  <chip
    name="U1"
    symbol={
      <symbol>
        <schematicpath
          strokeWidth={0.04}
          points={[
            { x: -1.2, y: 0 },
            { x: 0.6, y: 0 },
            { x: 0.6, y: 0.4 },
            { x: 1.2, y: 0 },
            { x: 0.6, y: -0.4 },
            { x: 0.6, y: 0 },
          ]}
          strokeColor="#1f78d1"
        />
        <port name="in" direction="left" schX={-1.5} schY={0} />
        <port name="out" direction="right" schX={1.5} schY={0} />
      </symbol>
    }
  />
</board>
)

SVG Path

You can use standard SVG path syntax with the svgPath prop for more complex shapes:

export default () => (
<board width="12mm" height="10mm">
  <chip
    name="U1"
    symbol={
      <symbol>
        {/* Star shape using SVG path */}
        <schematicpath
          points={[]}
          svgPath="M 0 -1 L 0.3 -0.3 L 1 -0.3 L 0.4 0.1 L 0.6 0.8 L 0 0.4 L -0.6 0.8 L -0.4 0.1 L -1 -0.3 L -0.3 -0.3 Z"
          strokeWidth={0.05}
          strokeColor="#e63946"
        />
        <port name="in" direction="left" schX={-1.5} schY={0} />
        <port name="out" direction="right" schX={1.5} schY={0} />
      </symbol>
    }
  />
</board>
)

Props

Property	Type	Required	Default	Description
points	array	Yes	-	Array of points defining the path. Each point is an object with x and y coordinates
svgPath	string	No	-	SVG path string (e.g., "M 0 0 L 1 1") for complex shapes
strokeWidth	distance	No	-	Width of the path stroke
strokeColor	string	No	"#840000"	Color of the path stroke