如何在draw.io/embed.diagrams.net中通过API实现水平流布局或触发已配置样式的布局更新？

我完全懂你遇到的困扰——已经给容器设置了childLayout=flowLayout;flowOrientation=west;的样式，但draw.io不会自动应用，只有手动编辑才生效，而且API里找不到对应的mxFHorizontalFlowLayout，用mxHierarchicalLayout又达不到想要的水平流效果。下面给你两个针对性的解决方案：

一、触发已配置的flowLayout样式生效 #

其实childLayout=flowLayout是draw.io中容器专属的内置子布局，不属于API文档里列出的那些全局布局类型。要让它生效，你不需要调用layout动作，而是可以通过发送消息触发容器重新应用其配置的子布局：

你可以先选中目标容器，再触发draw.io内置的"重新布局子元素"操作，具体代码如下：

function triggerFlowLayoutFromStyle() {
    var iframe = document.getElementById('drawio-iframe');
    // 1. 选中目标容器（替换成你的容器ID，若需批量处理可筛选所有带flowLayout的容器）
    var selectMessage = JSON.stringify({
        action: 'select',
        cells: ['YOUR_CONTAINER_CELL_ID']
    });
    iframe.contentWindow.postMessage(selectMessage, '*');

    // 2. 延迟触发内置子布局更新命令，确保选中操作完成
    setTimeout(() => {
        var relayoutMessage = JSON.stringify({
            action: 'execute',
            command: 'editLayout' // 该命令会触发容器应用其childLayout配置
        });
        iframe.contentWindow.postMessage(relayoutMessage, '*');
    }, 100);
}

如果不知道容器ID，也可以先发送getCells消息获取所有元素，筛选出带有childLayout=flowLayout样式的容器后再执行上述操作。

二、用现有API布局模拟水平流效果 #

如果一定要通过layout动作实现类似水平流的效果，推荐用mxStackLayout（最接近flowLayout的线性排列逻辑），或者调整mxHierarchicalLayout的配置：

方案1：使用mxStackLayout（推荐） #

mxStackLayout专门用于线性堆叠元素，完全匹配水平/垂直流的布局逻辑，配置示例如下：

function sendHorizontalFlowLayout() {
    var iframe = document.getElementById('drawio-iframe');
    var layoutMessage = JSON.stringify({
        action: 'layout',
        layouts: [
            {
                "layout": "mxStackLayout",
                "config": {
                    "orientation": "west", // 对应flowOrientation=west，元素从右向左水平排列
                    "spacing": 10, // 元素间的间距
                    "margin": 8, // 容器内边距
                    "fill": false // 不强制元素填满容器宽度，保持原有尺寸
                }                       
            }
        ]
    });
    iframe.contentWindow.postMessage(layoutMessage, '*');
}

方案2：调整mxHierarchicalLayout配置（效果接近但有差异） #

如果你坚持用mxHierarchicalLayout，可以通过调整参数缩小和flowLayout的差异，但要注意它本质是层级布局，无法完全复刻流式效果：

function sendAdjustedHierarchicalLayout() {
    var iframe = document.getElementById('drawio-iframe');
    var layoutMessage = JSON.stringify({
        action: 'layout',
        layouts: [
            {
                "layout": "mxHierarchicalLayout",
                "config": {
                    "orientation": "west",
                    "intraCellSpacing": 10,
                    "interRankCellSpacing": 10,
                    "interHierarchySpacing": 10,
                    "parallelEdgeSpacing": 0,
                    "ranker": "mxMedianCellRanker", // 调整排序算法让元素排列更紧凑
                    "directed": false // 若元素无层级连接关系，关闭定向布局逻辑
                }                       
            }
        ]
    });
    iframe.contentWindow.postMessage(layoutMessage, '*');
}

为什么mxHierarchicalLayout效果不同？ #

这是因为两者的布局逻辑完全不同：mxHierarchicalLayout是基于元素的层级/连接关系划分rank后排列，而flowLayout是纯粹的线性流式排列，不考虑元素间的连接，只按顺序堆叠，所以效果自然有差异。

备注：内容来源于stack exchange，提问作者Stefan