# Diagrams MCP turns text into visuals. AI Agent Connect

> Diagrams MCP connects your AI client to the Kroki and mermaid.ink rendering services. It lets your agent write code for flowcharts, sequence diagrams, Gantt charts, and more, then converts that code into shareable SVG or PNG images. You can use it to build design docs, READMEs, or slide decks without ever leaving your chat interface.

## Overview
- **Category:** productivity
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_WjnTtXIIStEIBv7Dip3Iv11w8BrK38LVzON4WJal/ai-agent-connect
- **Tags:** diagrams, mermaid, plantuml, graphviz, d2, kroki, flowchart, uml, svg, visualization

## Description

You shouldn't have to manually draw a flowchart just because your design doc describes a process in text. This MCP gives your AI client the ability to act as a visual designer. When you describe a system, a sequence, or a database schema, your agent uses this MCP to write the specific syntax for languages like Mermaid, PlantUML, or Graphviz. It then calls the renderer to produce a high-quality image. You get a permanent, deterministic URL for SVGs that you can paste into HTML or documentation, or a PNG for slides that need a standard image file. If you're iterating on a complex architecture, your agent can validate the syntax first to ensure the code is perfect before it ever tries to render the final image. It handles the heavy lifting of rendering through public services, so you don't need to manage local dependencies or API keys.

## Tools

### get_diagram_example
This tool provides a valid code snippet for a specific diagram language. Use it to give your agent a working skeleton to edit.

### list_diagram_types
This tool lists all available diagram languages and their supported output formats. It shows what each renderer is best suited for.

### render_diagram
This tool converts diagram source code into an SVG or PNG. It returns a shareable URL and, for SVGs, the raw markup for direct embedding.

### render_mermaid_image
This tool specifically targets Mermaid diagrams to produce a stable PNG URL via the mermaid.ink service.

### validate_diagram
This tool checks if the diagram source code is syntactically correct. It returns error messages and line numbers without performing a full render.

## Prompt Examples

**Prompt:** 
```
Draw the deployment pipeline we just designed as a flowchart.
```

**Response:** 
```
I wrote the pipeline as a Mermaid flowchart and rendered it to SVG. You can use the URL to view the image or paste the SVG markup directly into your design doc.
```

**Prompt:** 
```
I have our schema in a text file. Show it as a diagram.
```

**Response:** 
```
I laid this out in Graphviz DOT using nodes for tables and edges for foreign keys. The resulting SVG is ready for your documentation.
```

**Prompt:** 
```
Check this diagram renders before I commit it to the repo.
```

**Response:** 
```
The syntax is invalid. The renderer flagged an error on line 4, so I'll fix that arrow before we try to render the final version.
```

## Capabilities

### Multi-language rendering
Your agent can switch between Mermaid, PlantUML, D2, and other formats depending on the task.

### Syntax validation
The agent checks code for errors before attempting to generate an image.

### Permanent image URLs
The MCP provides deterministic URLs that serve the rendered images reliably.

### Vector and Raster output
You can choose between SVG markup for docs or PNG files for slide decks.

### Code scaffolding
The agent can pull working examples to use as templates for new diagrams.

## Use Cases

### System Architecture Documentation
Convert a text description of a microservices setup into a Graphviz or PlantUML diagram.

### Database Schema Visualization
Turn a SQL schema or text list of tables into a visual ERD.

### Presentation Deck Creation
Generate PNG images of sequence diagrams to drop directly into slide decks.

### CI/CD Pipeline Mapping
Visualize deployment workflows using Mermaid flowcharts.

## Benefits

- Eliminates manual drawing by converting text descriptions into code-based visuals.
- Provides permanent URLs for images so links in documentation do not break.
- Reduces iteration time by validating syntax before rendering.
- Supports a wide variety of specialized diagramming languages in one place.

## How It Works

The process moves from a text description to a rendered image through a few direct steps.

1. Connect the Diagrams MCP to your AI client via Vinkius.
2. Describe the process or system you want to visualize to your agent.
3. The agent writes the diagram code and validates the syntax.
4. The agent calls the rendering tool to generate the image.
5. You receive a URL or SVG markup to use in your documents or slides.

## Frequently Asked Questions

**Do I need an API key?**
No. This renders through the public Kroki and mermaid.ink services, which need no key or account.

**Which diagram language should I use?**
Mermaid for flowcharts, sequence and Gantt — it is the friendliest to write by hand. PlantUML for full UML. Graphviz when you need automatic layout of many nodes. D2 for modern styled diagrams. Vega for charts from JSON, and wavedrom for digital timing waveforms. Call list_diagram_types to see all nine with what each is for.

**Why does the tool hand back a URL — where is the image?**
The URL serves the rendered image directly and deterministically: the same source always produces the same image, so it is safe to embed permanently in a doc or slide. For SVG the tool also returns the markup itself, so you can paste it straight into an HTML page or a document that accepts raw SVG.

**Can I get a PNG?**
For mermaid, plantuml, graphviz and ditaa, pass output_format png to render_diagram — or use render_mermaid_image for a Mermaid-only PNG through mermaid.ink. d2, excalidraw, nomnoml, vega and wavedrom render SVG only; the tool refuses a format a language does not support rather than returning an error from the server.

**My diagram did not render. What now?**
The error message quotes the renderer's own parse error. Call get_diagram_example with the same diagram type to get a working starter, edit it towards your diagram, and use validate_diagram to check the syntax without committing to a render.