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:

CategoryLayout IDs
Processprocess1, process2, process3
Listlist1, list2, list3
Cyclecycle1, cycle2, cycle3
Hierarchyhierarchy1, hierarchy2
Relationshiprelational1, relational2
Matrixmatrix1, matrix2
Pyramidpyramid1, pyramid2

Data Model

The SmartArt data model consists of:

  • name — The display name of the SmartArt
  • modelId — The built-in layout identifier
  • ptLst — Array of data points (nodes), each with:
    • modelId — Unique node identifier
    • t — Display text
    • spPr — Shape properties (optional)

Consult the built-in definitions in the source for available layout IDs and their required data structures.

Copyright © 2026