Building with the GitHub Copilot SDK, Part 4 – Building Mermaid.js Diagrams
In my previous post, we used the Copilot SDK to build a Tracking tab and earned value chart for Chad’s Copilot (WhenIsDone). Copilot read our project data, updated the data model, and built a working SVG chart without breaking anything that was already there.
In this post, I’m going to show you how I added Mermaid.js diagram generation to the Design tab.
Why Does This Matter?
If your architecture only lives in your head or in a draw.io file nobody can find, it might as well not exist.
Docs go stale. Screenshots lie. The only architecture diagram worth trusting is one you can version, review in a PR, and diff when things change.
That’s exactly what Mermaid.js gives you.
What Is Mermaid.js?
It’s diagrams as code. Simple text like this:
graph TD
A[User Request] --> B{AI Agent}
B -->|Code Changes| C[Filesystem]
B -->|Design Ideas| D[Mermaid Diagram]…gets rendered into a real diagram. Version it in git. Review it in PRs. Diff it when the design changes. It stays alive alongside your code, not abandoned as a dead PNG.
You MUST keep your diagrams in source control if you want them to reflect reality. Mermaid makes that possible.
How Does the Copilot SDK Fit In?
GitHub Copilot has been at the top of the developer tool stack for years. By 2026, it’s table stakes — not a differentiator.
I took that same engine and embedded it into the Mermaid Builder inside the Design tab. Here’s what the workflow looks like:
- Describe what you want in plain language. “Give me a class diagram of everything in my services folder” or “Show the auth flow, then suggest how to decouple the user service from payments.”
- The Copilot SDK reads your whole workspace — files, structure, existing code — so it doesn’t hallucinate. It knows what’s actually there.
- It generates valid Mermaid syntax on the fly.
- The preview updates live. Type “add error handling branch” and the diagram evolves.
Iterate until it’s right, then drop it straight into your README, architecture.md, or wherever it belongs.
No blank-canvas paralysis. No “I’ll diagram this later” procrastination. You don’t need to remember Mermaid syntax at all; just describe what you want.
Give It a Try
The project is open source: Chad’s Copilot on GitHub. Open the Design tab, throw a messy prompt at it about your current setup, and watch it produce a diagram you can actually commit to your repo.
I’d love to hear what you generate first. Reach out to me on X at @chadmichel.
