How to visualize Semantic Kernel & Azure OpenAI plans using Mermaid

Developer Support

Jordan Bean explores how to visualize Semantic Kernel & Azure OpenAI plans using Mermaid.

Using the function calling ability of Semantic Kernel/OpenAI is very exciting from an application development point of view. Instead of hard-coding paths though the system, Semantic Kernel & OpenAI can decide for themselves what plugins to call, the order of operations, parsing input & output, etc.

However, it can be challenging to understand why the system decided to go down a path & all of the operations, prompts, function calls, etc. that occurred.

Semantic Kernel provides a ChatHistory class that records “most” of the calls made, the associated role & the order of operations.

We can use this to generate a SequenceDiagram in Mermaid to visualize the system.

Here is how I visualized my OpenAI call plans for my Semantic Kernel sleeping bag example app (see the previous blog posts about how this example app works).

Mermaid

I used a JavaScript library called Mermaid to generate diagrams on the fly. Mermaid is a diagraming & charting tool that uses a “Markdown”-like text language for defining diagrams. The library then renders the diagram based upon the text. Mermaid also includes a live editor where you can play with the diagram before trying to embed it in your app.

Continued reading Jordan’s full post here.

Developer Support App Dev Customer Success Account Manager, Microsoft Developer Support

Follow