PPTX
Lines and Connectors
Add lines and connector shapes between elements
Use the line property for straight lines and the connector property for lines with arrowheads.
Line Shape
Lines use start/end point coordinates:
{
"slides": [
{
"children": [
{
"line": {
"x1": 50,
"y1": 120,
"x2": 800,
"y2": 120,
"outline": { "color": "4472C4", "width": 2 }
}
}
]
}
]
}
{
children: [
{
line: {
x1: 50,
y1: 120,
x2: 800,
y2: 120,
outline: { color: "4472C4", width: 2 },
},
},
],
}
Vertical Line
{
"slides": [
{
"children": [
{
"line": {
"x1": 200,
"y1": 150,
"x2": 200,
"y2": 450,
"outline": { "color": "ED7D31", "width": 2 }
}
}
]
}
]
}
{
children: [
{
line: {
x1: 200,
y1: 150,
x2: 200,
y2: 450,
outline: { color: "ED7D31", width: 2 },
},
},
],
}
Diagonal Line
{
"slides": [
{
"children": [
{
"line": {
"x1": 250,
"y1": 150,
"x2": 750,
"y2": 450,
"outline": { "color": "70AD47", "width": 3 }
}
}
]
}
]
}
{
children: [
{
line: {
x1: 250,
y1: 150,
x2: 750,
y2: 450,
outline: { color: "70AD47", width: 3 },
},
},
],
}
Connector with Arrowheads
Connectors support arrowhead endpoints:
{
"slides": [
{
"children": [
{
"connector": {
"x1": 50,
"y1": 130,
"x2": 400,
"y2": 130,
"outline": { "color": "4472C4", "width": 2, "tailEnd": { "type": "triangle" } }
}
},
{
"connector": {
"x1": 50,
"y1": 200,
"x2": 400,
"y2": 200,
"outline": {
"color": "ED7D31",
"width": 2,
"headEnd": { "type": "triangle" },
"tailEnd": { "type": "triangle" }
}
}
}
]
}
]
}
{
children: [
{
connector: {
x1: 50,
y1: 130,
x2: 400,
y2: 130,
outline: { color: "4472C4", width: 2, tailEnd: { type: "triangle" } },
},
},
{
connector: {
x1: 50,
y1: 200,
x2: 400,
y2: 200,
outline: {
color: "ED7D31",
width: 2,
headEnd: { type: "triangle" },
tailEnd: { type: "triangle" },
},
},
},
],
}
Arrowhead Types
Arrowheads are set via the type field of outline.headEnd (start) / outline.tailEnd (end):
| Value | Description |
|---|---|
"triangle" | Filled triangle |
"stealth" | Stealth arrow |
"diamond" | Diamond shape |
"oval" | Oval circle |
"arrow" | Open arrow |
"none" | No arrowhead |
Arrowheads also support size control:
{
"slides": [
{
"children": [
{
"connector": {
"x1": 500,
"y1": 410,
"x2": 800,
"y2": 410,
"outline": {
"color": "ED7D31",
"width": 2,
"tailEnd": { "type": "triangle", "width": "large", "length": "large" }
}
}
}
]
}
]
}
{
children: [
{
connector: {
x1: 500,
y1: 410,
x2: 800,
y2: 410,
outline: {
color: "ED7D31",
width: 2,
tailEnd: { type: "triangle", width: "large", length: "large" },
},
},
},
],
}
Line Options
| Property | Type | Description |
|---|---|---|
x1 | number | Start X position |
y1 | number | Start Y position |
x2 | number | End X position |
y2 | number | End Y position |
fill | FillOptions | Line fill |
outline | OutlineOptions | Outline (color, width, dash, headEnd, tailEnd, ...) |
Connector Options
| Property | Type | Description |
|---|---|---|
x1 | number | Start X position |
y1 | number | Start Y position |
x2 | number | End X position |
y2 | number | End Y position |
fill | FillOptions | Line fill |
outline | OutlineOptions | Outline (color, width, dash, headEnd, tailEnd, ...) — arrows via headEnd/tailEnd |
OutlineOptions
| Property | Type | Description |
|---|---|---|
type | "noFill" | "solidFill" | "gradFill" | "pattFill" | Fill type (omitted → solidFill when color is present) |
color | string | SolidFillOptions | Color (sRGB hex string sugar, e.g. "4472C4") |
width | number | UniversalMeasure | Line width |
dash | "solid" | "dash" | "dot" | "dashDot" | ... | Preset dash style |
headEnd | { type?, width?, length? } | Start arrowhead |
tailEnd | { type?, width?, length? } | End arrowhead |