Mastering Mermaid: Automating Process Diagrams with Copilot Studio

Watch the session

About this session

Creating process diagrams is a manual, slow, friction-filled task. This session eliminates that entirely: build a 'Mermaid Pro' declarative agent in Copilot Studio Lite that converts any natural language description of a process into valid, semantically styled Mermaid.js diagram code. The agent handles flowcharts, Gantt charts, mind maps, user journey maps, and requirement diagrams. It refines diagrams iteratively through conversation. The entire capability lives in a single, carefully engineered system prompt - no connectors, no flows, no code.

Inside the demo

• Build a declarative agent in Copilot Studio Lite in under 10 minutes - nothing but a system prompt.
• Ask: 'Create a flowchart for a purchase approval process with a rejection loop.' - the agent returns styled, ready-to-render Mermaid code.
• Ask: 'Make a Gantt chart for a 6-week MS-900 study plan.' - an immediate structured timeline with task dependencies.
• Ask: 'Generate a mind map of Microsoft 365 topics.' - a high-level concept map with semantic color coding.
• Refine iteratively: 'Add more detail to the Security and Compliance section.' - the agent expands the existing diagram without starting over.
• Ask: 'User journey for an admin setting up MFA.' - a stage-by-stage journey map with touchpoints and emotions.
• The system prompt enforces semantic color conventions across all types: green for start/end, yellow for user actions, red for errors, teal for decisions.

Prompts to try

Point an agent at your own Process Mining data and adapt these:

• ›Create a flowchart for a purchase order approval process with a rejection loop.
• ›Make a Gantt chart for a 4-week project with 3 workstreams.
• ›Generate a mind map of Power Platform capabilities.
• ›Draw a user journey for an employee submitting an IT support ticket.
• ›Create a CI/CD pipeline diagram with a rollback branch on failure.
• ›Add more detail to the error handling section.

Build it yourself

1. 1

   Create a declarative agent in Copilot Studio Lite

   Open Copilot Studio Lite (available with Microsoft 365 licenses). Create a new agent and give it a focused name and description - 'Mermaid Diagram Generator' is enough.

   Customize Microsoft 365 Copilot behavior→
2. 2

   Engineer the system prompt

   The system prompt is the entire product. It defines the persona as a Mermaid expert, enforces output format (code block only, no explanation), sets the semantic color style guide, and covers all diagram types. Copy the full instructions from the project page.

   Full system instructions on the project page→
3. 3

   Enforce output constraints

   Critical: instruct the agent to return ONLY the Mermaid code block - no surrounding prose, no markdown padding. This makes output directly pasteable into any Mermaid renderer without cleanup.

4. 4

   Test across diagram types

   Test with flowcharts, Gantt charts, mind maps, and user journey maps. Each type uses different Mermaid syntax - the system prompt handles all of them if written correctly. Test edge cases like loops and rollback paths.

   Mermaid.js syntax reference→
5. 5

   Publish to Microsoft Teams

   Publish the agent to Teams so teammates can generate diagrams in any channel or chat. Paste the Mermaid output into the Mermaid Live Editor or any rendering tool to preview and export.

   Publish to Microsoft Teams→

Resources