ArrowHead

import { ArrowHead } from "cx-diagrams"

The ArrowHead component is a child element for StraightLine, TwoSegmentLine, and ThreeSegmentLine components, adding arrow heads to line ends for visual directionality cues.

Available shape options:

"triangle" (default) - solid triangular arrow
"line" - two lines forming a V shape
"vback" - triangular arrow with a V-shaped notch

Use reverse to flip the arrow direction, and position="middle" to place it at the line’s midpoint.

<Svg class="w-auto h-full bg-white">
    <Diagram unitSize={48} showGrid center>
        <Flow direction="down">
            <Flow direction="down" gap={4}>
                <Flow gap={5}>
                    <Cell width={3}>
                        <Shape id="scm" text="SCM" shapeClass="fill-green-300 stroke-green-800" />
                    </Cell>
                    <Cell width={3}>
                        <Shape id="ghw" shapeClass="fill-green-300 stroke-green-800" text="GIT Webhook" />
                    </Cell>
                </Flow>
                <Flow gap={2}>
                    <Cell width={3}>
                        <Shape id="docker" text="Docker Build" shapeClass="fill-green-300 stroke-green-800" />
                    </Cell>
                    <Cell width={3}>
                        <Shape id="publish" text="Publish Image" shapeClass="fill-red-300 stroke-red-800" />
                    </Cell>
                    <Cell width={3}>
                        <Shape id="run" text="Run app" shapeClass="stroke-red-800" />
                    </Cell>
                </Flow>
            </Flow>
        </Flow>
        <StraightLine from="scm" to="ghw" stroke="black">
            <ArrowHead size={7} class="fill-red-600 stroke-black" />
        </StraightLine>
        <ThreeSegmentLine direction="down" from="ghw" to="docker" stroke="black">
            <ArrowHead position="middle" stroke="black" fill="white" size={7} />
        </ThreeSegmentLine>
        <StraightLine from="docker" to="publish" stroke="black">
            <ArrowHead shape="line" stroke="black" size={7} />
        </StraightLine>
        <StraightLine from="publish" to="run" stroke="black">
            <ArrowHead fill="black" size={10} shape="vback" />
            <ArrowHead fill="black" size={10} reverse shape="vback" />
        </StraightLine>
    </Diagram>
</Svg>

Configuration

Property	Description	Type
aspectRatio	Aspect ratio of the arrow shape. Default is 1.	number
fill	Fill color of the arrow head.	string
position	Available positions are `start`, `middle` and `end`. Default is `end`.	string
reverse	Use reverse (to-to-from) direction.	boolean
shape	Available shapes are `triangle`, `line` and `vback`.	string
size	Size of the arrow head.	string
stroke	Stroke color of the arrow head.	string
class	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object