We are excited to announce that Visual Studio now supports rendering Mermaid diagrams in the Markdown editor, where you can provide your own Mermaid syntax or have Copilot generate it for you! This new feature lets you visualize complex data structures and workflows directly within your editor, which would previously require an extension.

For those who are not familiar with Mermaid, it is a popular text-based diagramming and charting tool that allows users to create flowcharts, sequence diagrams, Gantt charts, and many more using simple markdown-like syntax. Mermaid enables quick and easy visualization of complex processes or structures directly within documentation or code, making collaboration and understanding more efficient.

With Copilot’s assistance, this workflow is even smoother! Simply ask Copilot in the chat window to generate diagrams to help explain a codebase’s architecture or logic with visual aids. With the returned Mermaid markdown syntax in the Copilot Chat window, you can jump directly to the editor to preview the generated chart. If you already have some Mermaid syntax ready-to-go, the diagram is automatically rendered in the Markdown preview as well.

Generate Mermaid Diagrams with Copilot Chat

You can prompt Copilot to generate architectural, flowchart, sequence, class, Gantt diagrams, pie charts or any other kind of Mermaid diagram to visualize abstract concepts.

If you don’t have any ideas yet, try out the following prompts:

• Create a sequence diagram for the API call flow
• Visualize the relationships between entities in this schema
• Create a Mermaid state diagram for the lifecycle of a task
• I’m new to this project, visualize major components and their relationships to help me onboard

Copilot will read any attached references or related files in your codebase to grab necessary contexts and then return the Mermaid syntax in an embedded chat window. Simply click the Preview button, a new markdown file will open, and the Mermaid diagram will be displayed in preview. Feel free to save the markdown or the rendered chart for later use or share with your teammates!

Tip: You can give Copilot Chat specific context to better scope the results you receive. So you only receive a chart based on a specific method, class, file, or even the entire solution. See documentation.

Give it a try today and have Copilot help you better visualize your workflow using Mermaid! Please share any feedback and thoughts with us on Developer Community — we would love to hear from you.

Check out the new Visual Studio Hub

Stay connected with everything Visual Studio in one place! Visit the Visual Studio Hub for the latest release notes, YouTube videos, social updates, and community discussions.

Appreciation for your feedback

Your feedback helps us improve Visual Studio, making it an even more powerful tool for developers. We are immensely grateful for your contributions and look forward to your continued support. By sharing your thoughts, ideas, and any issues you encounter through Developer Community, you help us improve and shape the future of Visual Studio.