Today I was reviewing an existing codebase and I had a hard time to get a good understanding about what was going on. I couldn't create a good mental picture in my head. But then I asked myself, maybe GitHub Copilot can help me out here and draw this picture for me. Let's give it a try...
Note: As we were using the Azure DevOps wiki, I decided to try to generate the visualization using Mermaid as this is supported directly in Azure DevOps.
Let me first shortly explain what Mermaid is before I dive into Copilot.
Introduction to Mermaid
Mermaid is a powerful JavaScript-based diagramming and charting tool that allows you to create and modify diagrams dynamically. It uses Markdown-inspired text definitions to render detailed diagrams and charts, making it easy to visualize complex information. Whether you're working on flowcharts, sequence diagrams, or Gantt charts, Mermaid has you covered.
Mermaid uses a simple syntax to define charts. Here is an example of a basic flowchart:
And this is how the rendered flowchart looks like:
Creating a Mermaid chart through Copilot
Ok, time for some action. Let’s see if and how Copilot can help us to navigate through this complex codebase. Our best friend here is the @workspace command. With this command you can ask Copilot Chat questions about your entire codebase. Based on the question, Copilot intelligently retrieves relevant files and symbols, which it then references in its answer as links and code examples.
A simple example:
Let’s now combine the power of the @workspace command with Mermaid and try to construct a prompt that returns us a good mermaid diagram. Here is the prompt I tried:
@workspace Create a sequence diagram showing the data flow of the app. Please create this in mermaid format so that I can render this in a markdown file.
And this is the result I got back:
Nice!
Remark: I used the o1-preview model to generate the example above. I would recommend to certainly also try other models and compare the results.
More information
Markdown syntax for files, widgets, wikis - Azure DevOps | Microsoft Learn
Wiki Mermaid Diagrams - Azure DevOps.tips