PPTX

Lines and Connectors

Add lines and connector shapes between elements

Use LineShape for straight lines and ConnectorShape for lines that connect shapes.

Line Shape

Draw a simple straight line:

import { Slide, LineShape } from "@office-open/pptx";

new Slide({
    children: [
        new LineShape({
            x: 1,
            y: 1, // Start position
            width: 5, // Length in inches (horizontal)
            height: 0, // Height (0 for horizontal line)
            color: "2E74B5",
            width: 2, // Line thickness in points
        }),
    ],
});

Vertical Line

new LineShape({
    x: 3,
    y: 1,
    width: 0,
    height: 4, // Vertical length
    color: "ED7D31",
    width: 2,
});

Diagonal Line

new LineShape({
    x: 1,
    y: 1,
    width: 4, // Horizontal distance
    height: 3, // Vertical distance
    color: "70AD47",
    width: 1.5,
});

Line Style Options

new LineShape({
    x: 1,
    y: 1,
    width: 6,
    height: 0,
    color: "2E74B5",
    width: 2,
    dashStyle: "dash", // "solid" | "dash" | "dashDot" | "dot" | "lgDash" | "sysDash"
    beginArrow: "triangle", // "none" | "triangle" | "open" | "stealth" | "diamond" | "oval"
    endArrow: "stealth",
});

Connector Shape

Connect two shapes with a connector line:

import { Slide, Shape, ConnectorShape } from "@office-open/pptx";

new Slide({
    children: [
        new Shape({
            x: 1,
            y: 1,
            width: 3,
            height: 2,
            text: "Shape A",
        }),
        new Shape({
            x: 6,
            y: 1,
            width: 3,
            height: 2,
            text: "Shape B",
        }),
        new ConnectorShape({
            x: 4,
            y: 2,
            width: 2,
            height: 0,
            color: "2E74B5",
            width: 2,
            beginType: "none", // "none" | "triangle" | "circle" | "square"
            endType: "triangle",
        }),
    ],
});

Connector with Routing

new ConnectorShape({
    x: 2,
    y: 3,
    width: 0,
    height: 2,
    color: "ED7D31",
    width: 1.5,
    beginType: "circle",
    endType: "triangle",
    style: "straight", // "straight" | "bent" | "curved"
});

Full Example — Flowchart Connector

import {
    Presentation,
    Slide,
    Shape,
    Paragraph,
    TextRun,
    LineShape,
    Packer,
} from "@office-open/pptx";
import fs from "node:fs";

const pres = new Presentation({
    slides: [
        new Slide({
            children: [
                new Shape({
                    x: 3,
                    y: 0.5,
                    width: 4,
                    height: 1.2,
                    geometry: "roundRect",
                    fill: { type: "solid", color: "2E74B5" },
                    paragraphs: [
                        new Paragraph({
                            alignment: "center",
                            children: [
                                new TextRun({
                                    text: "Start",
                                    color: "FFFFFF",
                                    bold: true,
                                    fontSize: 18,
                                }),
                            ],
                        }),
                    ],
                }),
                new LineShape({
                    x: 5,
                    y: 1.7,
                    width: 0,
                    height: 0.8,
                    color: "2E74B5",
                    width: 2,
                    endArrow: "triangle",
                }),
                new Shape({
                    x: 3,
                    y: 2.5,
                    width: 4,
                    height: 1.2,
                    geometry: "diamond",
                    fill: { type: "solid", color: "ED7D31" },
                    paragraphs: [
                        new Paragraph({
                            alignment: "center",
                            children: [
                                new TextRun({
                                    text: "Decision?",
                                    color: "FFFFFF",
                                    bold: true,
                                    fontSize: 16,
                                }),
                            ],
                        }),
                    ],
                }),
            ],
        }),
    ],
});

const buffer = await Packer.toBuffer(pres);
fs.writeFileSync("flowchart.pptx", buffer);