DOCX

SmartArt

使用内置布局和数据模型创建 SmartArt 图形

使用 SmartArtCollectionSmartArtRun 向文档中添加 SmartArt 图形。

基本 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",
                                    // 定义节点及其关系
                                    ptLst: [
                                        {
                                            modelId: "node1",
                                            spPr: {},
                                            t: "Step 1",
                                        },
                                        {
                                            modelId: "node2",
                                            spPr: {},
                                            t: "Step 2",
                                        },
                                        {
                                            modelId: "node3",
                                            spPr: {},
                                            t: "Step 3",
                                        },
                                    ],
                                },
                                width: 500,
                                height: 300,
                            }),
                        }),
                    ],
                }),
            ],
        },
    ],
});

布局类型

SmartArt 通过 modelId 属性支持各种内置布局。常见的布局 ID 包括:

类别布局 ID
流程process1, process2, process3
列表list1, list2, list3
循环cycle1, cycle2, cycle3
层次结构hierarchy1, hierarchy2
关系relational1, relational2
矩阵matrix1, matrix2
棱锥图pyramid1, pyramid2

数据模型

SmartArt 数据模型由以下部分组成:

  • name — SmartArt 的显示名称
  • modelId — 内置布局标识符
  • ptLst — 数据点(节点)数组,每个节点包含:
    • modelId — 唯一节点标识符
    • t — 显示文本
    • spPr — 形状属性(可选)

请参阅源码中的内置定义以获取可用的布局 ID 及其所需的数据结构。

Copyright © 2026