Easy way to document your Power Automate Flow

Because the Power Automate user interface an excellent way to document a flow, I struggled to find a way to print or save it. Parsing an export proved to be very difficult, but I found that when you expand all controls and simply save the page as Webpage, complete (CTRL+S), this Python script cleans it right up. In a nutshell: it deletes the script, iframe and Flow interface tags. The expressions even still work when hovering over them!

  # Importing BeautifulSoup class from the bs4 module
            from bs4 import BeautifulSoup
            # Importing the HTTP library
            import requests
            from requests_file import FileAdapter
            dfs = requests.Session()
            dfs.mount('file://', FileAdapter())
            Web = dfs.get('file:///D:/Data/2021/20210506Pyhton-Tutorial/Flows/DTS Sample - SharePoint Library Browser.html')
            soup = BeautifulSoup(Web.text, 'html.parser')
            for div in soup.find_all("div", {'class':'react-flow-appsidebar'}):
            div.decompose()
            for div in soup.find_all("div", {'class':'fl-ContextualHelp-root'}):
            div.decompose()
            for elem in soup.find_all("header"):
            elem.decompose()
            for elem in soup.find_all("react-action-heading"):
            elem.decompose()
            for elem in soup.find_all("iframe"):
            elem.decompose()
            for script in soup.find_all("script"):
            script.decompose()
            for script in soup.find_all("button"):
            script.decompose()
            with open("Flows/DTS Sample - SharePoint Library Browser Clean.html", "w", encoding='utf-8') as file:
            file.write(str(soup))

‌When saving a complete webpage, a folder is created with all the scripts and assets. In case of a flow page, only the CSS files (three in the example below) and the images (1 in the example below: apart from the SharePoint icon all icons are embedded) are needed.

Alternatively the generated HTML can be bundled as well with this script - currently external png's get lost though. This makes it better distributable and when the result is to be stored on SharePoint instead of a storage account, this works better.

# Parse the result of a Save Web page (complete) action of an expanded flow in the UI
            # Take the root HTML file and find the references stylesheets
            # Merge those stylesheets
            # Create a result file, starting with 
            # Add the contents of the stylesheets
            # append the HTML node with the class "main-container" containing the flow diagram
            # Clean up
            CONST_PATH="file:///D:/Data/2021/20210506Python-Tutorial/Flows/"
            CONST_MAINFILE="DTS Error Handler.html"
            from bs4 import BeautifulSoup
            # Importing the HTTP library
            import requests
            from requests_file import FileAdapter
            dfs = requests.Session()
            dfs.mount('file://', FileAdapter())
            Web = dfs.get(CONST_PATH+CONST_MAINFILE)
            mainhtml = BeautifulSoup(Web.text, 'html.parser')
            resulthtml = BeautifulSoup('
', "html.parser")
            resulthtml.find("style").string=""
            for elem in mainhtml.find_all("link",href=lambda href: href and ".css" in href):
                print("Get styles from " + elem['href'].replace('./',''))
                stylesheet=dfs.get(CONST_PATH+elem['href'].replace('./',''))
                resulthtml.find("style").string+=stylesheet.text
            print("Append flow diagram")
            resulthtml.find("div", {'class':'body-container'}).append(mainhtml.find("div", {'class':'content-container'}))
            print("Remove links, buttons and scripts")
            for elem in resulthtml.find_all({"link","button","script","react-action-heading"}): 
                elem.decompose()
            with open("Flows/" + CONST_MAINFILE.replace("."," Bundled."), "w", encoding='utf-8') as file:
                file.write(str(resulthtml))

The result below is shown in an iframe. Click here to open the source html file in a new window.