How to send layout action to embed.diagrams.net?

Question

I use embed mode of diagrams.net and try to post a layout action. However, the layout event does not occur in the lifecycle.

=> How to correctly send the layout action to initialize the layout for my xml content?

• I tried to send the message after ready event but got

  INFO Error undefined undefined undefined Error: Not a diagram file (error on line 1 at column 1: Start tag expected, '<' not found)

=> After ready event, the message seems to be expected as xml, not as json.

• I also tried to enable the layout action similar to the configure action with layout=1 as url parameter. But there does not seem such an url parameter.

  window.addEventListener('message', function(event) { //...
  if (event.data.includes('layout')) { var iframe = document.getElementById('drawio-iframe'); console.log('layout'); var layoutMessage = JSON.stringify({ action: 'layout', layouts: [ { type: 'horizontalFlow', animate: true } ] }); iframe.contentWindow.postMessage(layoutMessage, '*');

  })

Related:

• https://www.drawio.com/doc/faq/embed-mode
• How to automatically apply flow layout when opening xml file in draw.io / diagrams.net?
• How to reproduce horizontal flow layout as custom layout?

Answer 1

Just found out, that there are several modes for the protocol used by diagrams.net. That can be confusing for beginners.

In order to send layout actions, one needs to enable the json protocal first, using the url attribute proto=json. Then the event lifecycle changes and instead of a "ready" event, an "init" event occurs.

After that "init" event it is possible to send load and layout actions.

function sendLayoutMessage() {{
            // applies a horizontal flow layout
            
            /* available layouts:
        https://www.drawio.com/doc/faq/apply-layouts#custom-layouts

        0 : "mxHierarchicalLayout"
        1 : "mxCircleLayout"
        2 : "mxCompactTreeLayout"
        3 : "mxEdgeLabelLayout"
        4 : "mxFastOrganicLayout"
        5 : "mxParallelEdgeLayout"
        6 : "mxPartitionLayout"
        7 : "mxRadialTreeLayout"
        8 : "mxStackLayout
        */
        
            console.log('layout');
            var iframe = document.getElementById('drawio-iframe');
            var layoutMessage = JSON.stringify({{
                action: 'layout',
                layouts: [
                    {{
                        "layout": "mxHierarchicalLayout",
                        "config": {{
                          "orientation": "west",
                          "intraCellSpacing": 0.1,
                          "interRankCellSpacing": 0.1,
                          "interHierarchySpacing": 0.1,
                          "parallelEdgeSpacing": 0.1
                        }}                       
                    }}
                ]
            }});
            iframe.contentWindow.postMessage(layoutMessage, '*');
        }}

Related follow-up question:

How to reproduce horizontal flow layout as custom layout?