Text on Curved Lines - Labels following curved connection paths

Curved Path Text Labels

Functional Overview

This example demonstrates text labels following curved paths between nodes. Instead of straight-line labels, text flows along the curve of the connection, creating more natural and visually appealing diagrams for organic or curved layouts.

Implementation of Key Features

Curved Line Text

const graphOptions: RGOptions = {
    defaultLineShape: RGLineShape.BezierCurve,
    defaultLineTextOnPath: true,
    // Text follows curve path
};

Custom SVG Text Path

const CurvedLineText: React.FC<RGLineSlotProps> = ({ line }) => {
    const pathData = `M${line.x1},${line.y1} Q${(line.x1 + line.x2) / 2},${(line.y1 + line.y2) / 2 - 50} ${line.x2},${line.y2}`;

    return (
        <g>
            <path d={pathData} stroke="#ccc" fill="none" />
            <text>
                <textPath href={`#path-${line.id}`}>
                    {line.text}
                </textPath>
            </text>
            <defs>
                <path id={`path-${line.id}`} d={pathData} />
            </defs>
        </g>
    );
};

Creative Use Cases

Organic Process Flows: Natural-looking workflow diagrams.

Mind Maps: Curved branches with flowing text labels.

Biological Pathways: Metabolic or signaling pathway visualizations.

Creative Diagrams: Artistic infographics and illustrations.

Geographic Maps: Curved routes with labels following paths.