Skip to content
Antoine Boucher

Options

Profiles

← All articles
Project introduction

uml-mcp — UML diagrams from chat via MCP

3 min read

Listen to the audio story

Diagrams from chat with uml-mcp · 1:44 · AI-written script, synthetic voices

Transcript

Ava: You ask a chat assistant for a sequence diagram, and instead of pasting text you can't read, you get a real rendered image. How?

Andrew: I'm guessing there's a tool behind it.

Ava: There is. It's uml-mcp, an open-source M C P server by Antoine. The assistant sends Mermaid, PlantUML or another supported diagram source, and the server returns the rendered output plus useful links.

Andrew: Why M C P instead of templates?

Ava: He started with ChatGPT plugins and prompt templates. Both worked, but editors wanted native tools: enable a server once, call it from the agent, and save the source and the S V G beside the post.

Andrew: So the plugin idea, on a different host.

Ava: Exactly. The repository documents five tools and around thirty-seven Kroki-backed diagram types. Antoine notes those are counts of the interface, not a benchmark.

Andrew: What's the clever bit?

Ava: One module builds a JSON state, compresses it with zlib and encodes it as URL-safe base64. That gives both an image link and an editable mermaid dot live link.

Andrew: And a gotcha?

Ava: The code separates S V G from PNG, J P E G and WebP endpoints. Hit the wrong one and a perfectly valid diagram breaks before the syntax is even the problem.

Andrew: Setup?

Ava: Add the server to Cursor's M C P settings, then ask for a diagram type explicitly. There's a hosted endpoint too.

Andrew: Any warnings?

Ava: Models still invent syntax sometimes, so render before publishing. And keep secrets out of prompts.

Andrew: The full write-up has the sequence diagram and install steps.

A Mermaid client/server sequence rendered in chat, from the repository
Table of contents

GitHub stars[1]

uml-mcp[1] gives an MCP client real diagram tools: an assistant supplies Mermaid, PlantUML, or another supported diagram source, and the server returns rendered output and useful links. The current repository documents five tools and a catalog of roughly 37 Kroki-backed types. Those counts describe the documented interface, not a rendering benchmark.

sequenceDiagram
  participant C as MCP client
  participant U as UML-MCP
  participant R as Renderer
  C->>U: generate_uml with source and type
  U->>U: Check request
  U->>R: Build rendering request
  R-->>U: Rendered diagram
  U-->>C: URL, editor link or image

tools/kroki/mermaid.py[2] builds JSON state, compresses it with zlib, and encodes it as URL-safe base64. That state supports both an image link and an editable mermaid.live link.

The module distinguishes SVG at /svg/ from PNG/JPEG/WebP at /img/?type=.... A wrong endpoint can break a perfectly valid diagram before its syntax ever becomes the problem.

The repository also exposes generate_uml_image, validate_uml, list_diagram_types, and generate_uml_batch. Choose the tool for inline preview, source checks, format discovery, or multiple independent renders.

2. There is an operations side too

The current README documents uml-mcp admin, metrics, and a Kroki playground. They help separate invalid source, unavailable renderers, and configuration problems. A successful request still needs a human check that the diagram represents the intended system.

For the same diagram-source idea inside a node editor, see ComfyUI-UML.

3. Why MCP instead of copy-paste templates?

I started with ChatGPT plugins (D2C OpenAI diagram plugin) and AIPRM sequence templates. Both work, but editors wanted native tools: enable a server once, call generate_uml from the agent, save .mmd + SVG beside the post. MCP is that layer — same idea as the plugin, different host.

4. What it supports

BackendGood for
MermaidGitHub-native flows, quick sequences
PlantUMLClassic UML, deployments, strict notation
KrokiUnified render path when you mix formats

Hosted endpoint: uml-mcp.vercel.app/mcp[3]. Docs site: antoinebou12.github.io/uml-mcp[4].

5. Cursor setup (short)

  1. Clone or install from github.com/antoinebou12/uml-mcp[1] (README has the MCP config block).
  2. Add the server to Cursor MCP settings.
  3. Ask for a diagram type explicitly — e.g. “Mermaid sequence: user, React, FastAPI, Postgres, login with cache miss.”

I use it across this blog for pipeline and career diagrams; see AI figurines post or software engineering journey for examples.

6. Limits

  • Models still hallucinate syntax sometimes — always render locally before publishing.
  • Secrets belong out of prompts; diagram user/service names, not production credentials.
  • OpenAI plugin churn moved the ChatGPT story toward Custom GPT + MCP; treat the D2C plugin post as historical context with a live successor.

7. Project page

More badges and links: uml-mcp project page.

References

  1. antoinebou12. (). uml-mcp. [Software repository] github.com.
  2. antoinebou12. (). tools/kroki/mermaid.py. [Source file or documentation] github.com.
  3. uml-mcp.vercel.app/mcp. (). [Web page] uml-mcp.vercel.app.
  4. antoinebou12.github.io/uml-mcp. (). [Web page] antoinebou12.github.io.

References use this article’s publication date.