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).

Image image 7


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.


Leave a comment

Feedback usabilla icon