DOCX
SmartArt
Create SmartArt graphics with built-in layouts and data models
Add SmartArt graphics to documents using SmartArtCollection and SmartArtRun.
Basic SmartArt
import { Document, Paragraph, SmartArtRun, SmartArtCollection } from "@office-open/docx";
const doc = new Document({
sections: [
{
children: [
new Paragraph({
children: [
new SmartArtRun({
collection: new SmartArtCollection({
data: {
name: "Process",
modelId: "process1",
// Define nodes and their relationships
ptLst: [
{
modelId: "node1",
spPr: {},
t: "Step 1",
},
{
modelId: "node2",
spPr: {},
t: "Step 2",
},
{
modelId: "node3",
spPr: {},
t: "Step 3",
},
],
},
width: 500,
height: 300,
}),
}),
],
}),
],
},
],
});
Layout Types
SmartArt supports various built-in layouts via the modelId property. Common layout IDs include:
| Category | Layout IDs |
|---|---|
| Process | process1, process2, process3 |
| List | list1, list2, list3 |
| Cycle | cycle1, cycle2, cycle3 |
| Hierarchy | hierarchy1, hierarchy2 |
| Relationship | relational1, relational2 |
| Matrix | matrix1, matrix2 |
| Pyramid | pyramid1, pyramid2 |
Data Model
The SmartArt data model consists of:
name— The display name of the SmartArtmodelId— The built-in layout identifierptLst— Array of data points (nodes), each with:modelId— Unique node identifiert— Display textspPr— Shape properties (optional)
Consult the built-in definitions in the source for available layout IDs and their required data structures.