How To Export a Teams Call Flow to PNG

Update 29.01.2023

This blog post is now obsolete. The M365 Call Flow Visualizer is now able to directly export PNG files using the -ExportPng $true parameter. Please make sure to install the prerequisites.

/Update

Back then, when I thought about making the M365 Call Flow Visualizer a reality I was looking for a way to generate a diagram from code. And Mermaid-JS was the answer. If you’re unfamiliar with Markdown, outputting diagrams to either Markdown, Mermaid or HTML files might look like an odd decision. However, my endgame always was to programmatically generate call flow diagrams and render them on a documentation website built with DocFx.

HTML Output was only added later down the line because I thought that having an option to easily share these files with other, maybe non-tech-savvy people (who wouldn’t know what to do with a *.md file) would be a good option. Having clickable greeting nodes is another benefit of the HTML output option.

But of course, sometimes images are the easiest way of sharing things or including them in other documents or services such as Email, Word, or OneNote. While I haven’t found a way to automatically export a Teams Call Flow directly to an image, I’m going to show you what I think is the easiest way for the time being.

Export to PNG

First, install the VS Code Extension Mermaid Editor from the Marketplace. Once installed, go to the extension settings, and configure them as you see fit. I suggest Type: “png” with a transparent background for the best results.

Next, run the M365CallFlowVisualizerV2.ps1 script with the -DocType Mermaid parameter. This will output a Mermaid file instead of Mermaid code inside a Markdown file.

1

. .\M365CallFlowVisualizerV2.ps1 -theme custom -ObfuscatePhoneNumbers $true -DocType Mermaid

In the above exmaple, I’m using the fairly new -ObfuscatePhoneNumbers parameter as well. This way, I can share call flow diagrams without worrying about getting spam calls to my test numbers.

In VS Code, navigate to your .\Output folder and look for the generated *.mmd (Mermaid) file and open it. You will now see an eye icon in the top right corner of VS Code. Click it.

This will preview the diagram in split-view.

Now switch back to the *.mmd file and notice how a little download icon appears next to the eye icon.

Click this icon to generate a PNG image from the Mermaid file. The image will be saved to the same directory as the original file.

Now you have a nice PNG file, including a transparent background of your call flow.

Appendix

I am aware that https://mermaid.ink offers an API to directly output to SVG since I already made use of that to render Teams User Calling Settings. From what I can tell right now, it looks like an encoded call flow is just too big for the API to handle. I’m also looking into Mermaid CLI to see if this can be used in some form or another to make outputting images a little bit easier in the future. I still hope that exporting to PNG gives you more flexibility, even though it’s a manual process.