Convert Processes into Diagrams Using Copilot and Mermaid.js

In this video from the Microsoft Community Learning channel, Rabia Williams, a cloud developer advocate at Microsoft, is joined by Andrew Jolly, an information management practice lead at Engage Squared. Andrew demonstrates how to use Copilot to convert a business process into a diagram using mermaid.js. This tool is particularly useful for developers and tech enthusiasts who want to add visual elements to their documentation or work management systems.

Andrew starts by explaining how he uses Copilot for web settings to generate diagrams. He often uses voice input to describe processes, which helps him manage RSI (repetitive strain injury). He pastes a process description into Copilot and demonstrates how he organizes this information into a clear set of steps. This organized set of steps can then be reviewed and refined before generating the final diagram.

The key to creating the diagram is using a specific prompt that instructs Copilot to prepare the process using the syntax for mermaid.js diagrams. Mermaid.js is an online tool for creating flowcharts and diagrams. Andrew shows how to copy the generated text from Copilot, paste it into Mermaid Live, and instantly create a visual diagram. This diagram can then be downloaded or saved in various formats such as PNG or SVG for use in documentation.

Rabia and Andrew discuss the benefits of using generative AI to streamline the process of creating diagrams, emphasizing how it saves time and improves communication. They highlight the importance of reviewing and refining the steps before generating the diagram to ensure accuracy and clarity.

The video concludes with Rabia expressing interest in creating a series of videos showcasing more of Andrew’s ideas and Copilot prompts, indicating the potential for further exploration of practical uses of AI in everyday tasks.