MCP For Claude Marketplace
Diagrams

Diagrams MCP Connector for Claude

A+

Turn text into diagrams — flowcharts, UML, graphs and charts — rendered from Mermaid, PlantUML, D2 and more, with no key.

5 tools Official Updated Oct 1, 2026 Official Vinkius Partner
More Details Connect to Claude

Connect any AI agent to the public Kroki and mermaid.ink rendering services and let it produce real diagrams — the kind that go into a design doc, a slide, a ticket or a README. No key, no account.

What you can do

  • See what is possible — nine diagram languages, each with a one-line description of what it is good for, and the output formats it supports
  • Get a working starter — a minimal, valid example in any language, already rendered, ready to edit
  • Validate before you commit — check that source parses, with the renderer's own error message when it does not
  • Render to SVG or PNG — returns the shareable URL, and for SVG the markup itself, ready to paste into an HTML page, a doc or a slide
  • Render Mermaid to PNG — a second renderer for the raster PNG that slides, chat and some wikis need

Why it matters

A design doc that says "the flow is A then B then C" makes the reader draw it. This draws it. The agent writes the diagram source, gets back a URL that serves the image forever, and the reader sees the picture.

Languages

mermaid (flowcharts, sequence, Gantt), plantuml (full UML), graphviz (DOT), d2, excalidraw (hand-drawn), ditaa (ASCII art), nomnoml (compact UML), vega (charts from JSON), wavedrom (timing waveforms).

diagramsmermaidplantumlgraphvizd2krokiflowchartumlsvgvisualization

5 tools expose this connector's capabilities to your AI agent.

get_diagram_example

Use it to learn the syntax or as a skeleton to edit. Supports the same names as list_diagram_types. Get a working starter snippet for one diagram language

list_diagram_types

It lists every renderer (mermaid, plantuml, graphviz, d2, excalidraw, ditaa, nomnoml, erd, vega_lite, wavedrom) with a one-line description of what each is good for, plus the svg and png output formats. Everything renders through the public Kroki service with no key. List the diagram languages and output formats this server can render

render_diagram

Pass the source and the language; get back a public URL that serves the rendered image, plus — for svg — the markup itself, ready to paste into an HTML page, a doc or a slide. Output defaults to svg; choose png only where svg is not accepted. If the source does not parse, the error names the line; call get_diagram_example for a working starter. The URL is deterministic: the same source always yields the same image, so it is safe to embed permanently. Render diagram source to SVG or PNG and return it with a shareable URL

render_mermaid_image

Returns a stable public URL; the same source always renders the same image. Mermaid only; for other languages use render_diagram. Render a Mermaid diagram to a PNG image URL via the mermaid.ink service

validate_diagram

Cheaper than render_diagram when the goal is only to confirm syntax — for example before writing the diagram into a file that a build step renders. Check that diagram source parses, without rendering it

See how to talk to your AI agent using Diagrams.

Draw the deployment pipeline we just designed as a flowchart.

Rendered. I wrote the pipeline as a Mermaid flowchart — commit, build, test, staging, production, with the approval gate branching back — and rendered it to SVG. It comes back as a URL that serves the image permanently and the SVG markup, so you can paste it straight into the design doc. The same source always renders the same image, so the link will not rot.

I have our schema in a text file. Show it as a diagram.

Done. I read the schema and laid it out in Graphviz DOT with the tables as nodes and the foreign keys as edges, so the layout is automatic and stays tidy however many tables there are. It rendered to SVG with a permanent URL and the markup to paste in. If you would rather edit it by hand, Mermaid is friendlier to write and I can convert it.

Put this sequence into the slide deck as an image, not code.

Rendered to PNG. The slide strips raw SVG, so I used the raster path instead — Mermaid sequence diagram rendered through mermaid.ink. It returns a PNG URL that embeds anywhere an image goes, and the file is a real raster image at any zoom. The same diagram is also available as SVG if the deck ever accepts vectors.

Check this diagram renders before I commit it to the repo.

Checked — it does not parse yet. The renderer reports a syntax error and names the line, so I know which arrow is malformed. I validated it without rendering, which is the cheap way to iterate: fix the line, validate again, and only render once it comes back valid. Call for a starter example if you want a known-good skeleton to edit from.

No. This renders through the public Kroki and mermaid.ink services, which need no key or account.