Miro MCP: AI-Powered 'Code-to-Diagram' with GitHub Copilot

Miro

Oct 22, 2025

See how Model Context Protocol (MCP) and AI can turn complex codebases into clear, understandable diagrams. This demo showcases a powerful "code-to-diagram" workflow using VS Code and GitHub Copilot.

Watch two real-world scenarios:

Public Repo Visualization: See how to generate a complete architectural diagram for a public open-source project (SAP OpenUI5) just by giving the AI its GitHub URL.
Internal Codebase Analysis: Discover how the AI can analyze your entire local codebase in VS Code and instantly generate a detailed UML-style diagram on your Miro board, mapping out all the services, controllers, and their relationships.

This is perfect for documenting existing systems, understanding complex code, and accelerating new engineer onboarding.

Chapters

00:00 - Introduction: Code-to-Diagram Scenarios

00:40 - Scenario 1: Prompting AI to Visualize a Public GitHub Repo

01:05 - Calling the Miro MCP "Generate Diagram" Tool

01:20 - AI Fetches and Analyzes the Open-Source Project

01:42 - AI-Generated Architecture Diagram Appears in Miro

02:00 - Reviewing the Final Diagram (OpenUI5 Architecture)

02:12 - Scenario 2: Visualizing an Internal, Local Codebase

02:30 - Prompting AI to Analyze the Local VS Code Workspace

02:40 - AI Analyzes Local Files and Code Structure

03:15 - Reviewing the Internal Codebase Diagram