# Diagram Renderer: Mermaid, PlantUML, Graphviz, LaTeX to PNG/SVG (`jumblemog/diagram-renderer`) Actor

Render Mermaid diagrams, PlantUML, Graphviz DOT graphs, Vega-Lite and Vega charts, and LaTeX math to PNG, SVG or PDF files. Built for AI agents and automations: send the code, get a download link, or the exact error message to fix the code.

- **URL**: https://apify.com/jumblemog/diagram-renderer.md
- **Developed by:** [Jumble Mog](https://apify.com/jumblemog) (community)
- **Categories:** Developer tools, AI, Automation
- **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: No ratings yet

## Pricing

Pay per event

This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events.

Learn more: https://docs.apify.com/actors/running/actors-in-store.md#pay-per-event

## What's an Apify Actor?

An Actor is a serverless cloud program that runs on the Apify platform. It has two run modes.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.

Apify vocabulary and the platform model are defined once, in the agent quickstart at https://apify.com/agents.md.

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.

Do not guess an integration path. Every one of them is in the agent quickstart at https://apify.com/agents.md: the Apify MCP server, Agent Skills with the Apify CLI, the JavaScript and Python clients, the REST API, and the account-free path for an agent with no human to sign in. It also carries the rule on stating cost before the first paid run.

For examples already wired to this Actor's own input schema, see the [API](#api) section below.

Each client library has reference documentation the quickstart does not restate: [JavaScript/TypeScript](https://docs.apify.com/api/client/js/docs.md) (`npm install apify-client`) and [Python](https://docs.apify.com/api/client/python/docs.md) (`pip install apify-client`).

# README

## Diagram Renderer: Mermaid, PlantUML, Graphviz, LaTeX to PNG/SVG

**Turn diagram code into image files.** Send [Mermaid](https://mermaid.js.org) code (flowcharts, sequence, class, state and ER diagrams, Gantt charts, mindmaps, timelines and more), [PlantUML](https://plantuml.com) diagrams, [Graphviz](https://graphviz.org) DOT graphs, [Vega-Lite](https://vega.github.io/vega-lite/) and [Vega](https://vega.github.io/vega/) chart specs, or LaTeX math, and get back a **PNG, SVG or PDF** with a download link. When the code has a mistake, you get the renderer's **exact error message** (line, position and what it expected), so a person or an AI agent can fix it and try again. Many diagrams per run, pay per diagram, and failed ones are free.

![Examples rendered by this Actor: a Mermaid flowchart, sequence diagram and mindmap, a Graphviz graph, a Vega-Lite bar chart and a LaTeX formula](https://api.apify.com/v2/key-value-stores/Km5b4PG3kYHdZSb1E/records/diagram-renderer-examples.png?signature=EtxG4kiiYU1ZAhaZnvCU)

### What it does

- **Mermaid**: all the diagram types built into Mermaid 12.2, such as flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, gitGraph, user journey, quadrant, Sankey, XY chart, block, packet, kanban, architecture, C4, requirement, radar and treemap. Themes: default, dark, forest, neutral, and base for your own colors.
- **PlantUML**: sequence, use case, class, activity, component, state, deployment and timing diagrams, mind maps, WBS, Gantt charts and more, including the bundled standard library (such as C4 with `!include <C4/C4_Context>`) and `!include` from https URLs.
- **Graphviz**: DOT graphs with the dot, neato, fdp, sfdp, circo and twopi layout engines.
- **Charts**: Vega-Lite and Vega JSON specs, including data loaded from a URL.
- **LaTeX math**: formulas rendered with MathJax, with or without `$$ ... $$` around them.
- **Detects the kind of code** automatically, or set it yourself. Code wrapped in Markdown fences (` ```mermaid ... ``` `), the way AI models usually write it, works as it is, even with text around it.
- **PNG, SVG or PDF**: PNG at 1× to 4× pixel density, PDF sized to the diagram, and SVG with fixed pixel sizes. Mermaid SVG files use real SVG text instead of HTML inside the SVG, so the labels also show up in design tools, office apps and image converters, not only in browsers.
- **Any background**: white, transparent or any color, in every format. The dark theme comes with a matching dark background.
- **Useful errors**: syntax errors come back in the `error` field with the renderer's own message, and aren't charged.
- **Batch rendering**: send a list of diagrams, each with its own name, format, theme and background.
- **Image straight from the API**: the first file is also the run's `OUTPUT`, so the run-sync endpoint answers with the image itself.
- **No outside services**: Mermaid, PlantUML, Graphviz and MathJax are built into the Actor, so nothing is sent to a third-party rendering API.

### Who it's for

- **AI agents and LLM apps** that write Mermaid, PlantUML, DOT, chart specs or LaTeX and need a picture to show, send or put in a document.
- **Automation builders** in n8n, Make or Zapier who generate reports, docs or emails with diagrams and charts.
- **Developers** who want diagrams as code in docs, wikis, tickets and slides without installing Mermaid CLI, PlantUML, Java, Graphviz or a headless browser.
- **Teachers and writers** turning formulas and diagrams into images for slides, worksheets and posts.

### How to use it

1. Paste your diagram code into **Diagram code**, or put several diagrams in **More diagrams**.
2. Pick the file format (PNG by default) and, if you like, a theme and background.
3. Click **Start**. Each diagram appears in the **Output** tab with a download link, or with the error message if it couldn't be drawn.

You can also run it through the [Apify API](https://docs.apify.com/api/v2), on a schedule, or from Make, n8n, Zapier and other integrations.

### Input

| Field | What it does |
| --- | --- |
| `code` | One diagram's code: Mermaid, PlantUML, Graphviz DOT, a Vega-Lite or Vega spec, or LaTeX. |
| `diagrams` | More diagrams: a list of code strings, or objects with `code` and optional `name`, `type`, `format`, `theme` and `background`. |
| `type` | `auto` (default), `mermaid`, `plantuml`, `graphviz`, `vegalite`, `vega` or `math`. |
| `format` | `png` (default), `svg` or `pdf`. |
| `theme` | `default`, `dark`, `forest`, `neutral` or `base`. `dark` also styles charts and math. PlantUML uses `!theme` in its own code. |
| `background` | `white`, `transparent`, a color name such as `lightgray`, or a hex color such as `#f5f5f5`. Empty (default): white, or dark gray with the dark theme. |
| `scale` | PNG pixel density, 1 to 4 (default 2). |
| `graphvizEngine` | `dot` (default), `neato`, `fdp`, `sfdp`, `circo` or `twopi`. |
| `mermaidConfig` | Extra Mermaid settings, such as `{"fontFamily": "Arial"}` or `{"theme": "base", "themeVariables": {"primaryColor": "#ffcc00"}}`. |
| `includeSvg` | `true` also puts the SVG code into each result (default `false`). |
| `maxDiagrams` | Stop after this many diagrams (default 100). |

Example with a batch:

```json
{
  "format": "svg",
  "diagrams": [
    {"name": "login-flow", "code": "sequenceDiagram\n  User->>App: Log in\n  App->>Auth: Check password\n  Auth-->>App: OK\n  App-->>User: Welcome"},
    {"name": "services", "code": "digraph { rankdir=LR; web -> api -> db; api -> cache; }"},
    {"name": "classes", "code": "@startuml\nCustomer \"1\" -- \"*\" Order : places\n@enduml"},
    {"name": "formula", "code": "$$E = mc^2$$", "format": "png"}
  ]
}
```

### Output

Each diagram becomes one dataset item, and the files are saved in the run's key-value store:

```json
{
  "index": 1,
  "name": "login-flow",
  "type": "mermaid",
  "format": "svg",
  "status": "ok",
  "error": null,
  "fileUrl": "https://api.apify.com/v2/key-value-stores/<store>/records/001-login-flow.svg?signature=...",
  "fileName": "001-login-flow.svg",
  "width": 650,
  "height": 371,
  "sizeBytes": 21384,
  "processingSeconds": 0.42
}
```

When the code has a mistake, the item says so and isn't billed:

```json
{
  "index": 2,
  "type": "mermaid",
  "status": "failed",
  "error": "Parse error on line 3:\n...t LR  A[Start] -->\n---------------------^\nExpecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'",
  "fileUrl": null
}
```

Download your files within your plan's data retention period, or copy them to your own storage, because run storage expires.

### Pricing

You pay per **diagram rendered**, at the price shown on this page. Diagrams that fail to render are never charged. If you set a maximum cost per run, the Actor stops when the next diagram wouldn't fit.

### Speed

Rendering is fast: measured on Apify at the default 2 GB of memory, a batch of 8 diagrams (Mermaid, Graphviz, LaTeX and a Vega-Lite chart with 400 points) finished in 7 seconds once the run had started, and each diagram after the first took 0.2 to 0.7 seconds. The first PlantUML diagram in a run takes about 4 seconds while Java starts, and the next ones about 0.3 seconds each. Starting a run adds a few seconds, more when a server downloads the Actor for the first time. For many diagrams, one run with a batch is much quicker than one run per diagram.

### Tips and limits

- Mermaid runs with its strict security level: links and HTML in labels are sanitized, and scripts don't run.
- PlantUML runs with its internet security profile: `!include` works for https URLs and the standard library, not for local files. Ditaa and LaTeX formulas inside PlantUML aren't part of this build; use the `math` type for formulas. PlantUML code without `@startuml` is wrapped automatically.
- Vega and Vega-Lite specs can load data from public URLs; relative paths such as `data/cars.json` load the [Vega example datasets](https://github.com/vega/vega-datasets). Graphviz images (`image` attributes and `<IMG>` in labels) aren't supported, because the Actor doesn't read local files.
- Chinese, Japanese and Korean text and emoji are supported. For a specific font, set it in `mermaidConfig` or in the DOT or chart code; fonts that aren't installed fall back to a similar one.
- Very large graphs can take a while in Graphviz; the sfdp engine is the fastest for thousands of nodes. Each diagram has a 60-second limit.
- Code can be up to 200,000 characters per diagram.

### For AI agents and developers

This Actor works with the [Apify MCP server](https://mcp.apify.com), so AI agents can call it as a tool: pass `code` (or `diagrams`) and read `fileUrl` from each dataset item. Code can come straight from a model's answer, Markdown fences and all. If `status` is `failed`, the `error` field holds the renderer's message: fix the code and call again. For a direct API call that waits for the result:

```bash
curl -X POST "https://api.apify.com/v2/acts/jumblemog~diagram-renderer/run-sync-get-dataset-items?token=YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"code": "flowchart LR\n  A[Idea] --> B[Prototype] --> C[Launch]", "format": "png"}'
```

To get the image itself as the response, call `run-sync` instead. It returns the run's `OUTPUT`, which is the first rendered file (or the error as JSON):

```bash
curl -X POST "https://api.apify.com/v2/acts/jumblemog~diagram-renderer/run-sync?token=YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"code": "digraph { rankdir=LR; idea -> prototype -> launch }"}' \
  -o diagram.png
```

### Credits

- [Mermaid](https://github.com/mermaid-js/mermaid) (MIT), [PlantUML](https://plantuml.com) (its MIT-licensed build, run with OpenJDK), [Graphviz](https://graphviz.org) (EPL), [vl-convert](https://github.com/vega/vl-convert) with Vega and Vega-Lite (BSD-3-Clause), and [MathJax](https://www.mathjax.org) (Apache-2.0), drawn in headless Chromium through [Playwright](https://playwright.dev). This Actor isn't affiliated with these projects.

# Actor input Schema

## `code` (type: `string`):

Mermaid (flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline and more), PlantUML (@startuml ... @enduml), Graphviz DOT, a Vega-Lite or Vega JSON spec, or LaTeX math. The kind is detected automatically, and code inside Markdown fences (`mermaid ... `) is fine.

## `diagrams` (type: `array`):

A list of diagrams to render in the same run. Each entry is a code string, or an object with "code" and optionally "name", "type", "format", "theme" and "background", which override the settings below for that diagram.

## `type` (type: `string`):

auto detects the kind of code. Set it when detection guesses wrong.

## `format` (type: `string`):

png for documents, chats and slides; svg for sharp scaling on the web; pdf for print and reports.

## `theme` (type: `string`):

Mermaid theme (base is the one to customize with themeVariables in the Mermaid configuration). dark also gives Vega and Vega-Lite charts and LaTeX math a dark style. PlantUML uses !theme in its own code.

## `background` (type: `string`):

white, transparent, a color name such as lightgray, or a hex color such as #f5f5f5. Leave it empty for the theme's own background: white, or dark gray with the dark theme. Applies to PNG, SVG and PDF.

## `scale` (type: `integer`):

Pixel density of PNG files: 2 (default) is sharp on high-resolution screens, 1 gives smaller files, 4 suits print.

## `graphvizEngine` (type: `string`):

dot for hierarchies and flows (default), neato and fdp for undirected networks, sfdp for very large graphs, circo for circles, twopi for radial layouts.

## `mermaidConfig` (type: `object`):

Extra Mermaid settings, for example {"fontFamily": "Arial", "flowchart": {"curve": "linear"}} or {"theme": "base", "themeVariables": {"primaryColor": "#ffcc00"}}. The security level always stays strict.

## `includeSvg` (type: `boolean`):

Also put the SVG code of each diagram into its dataset item, for embedding directly in a web page or document.

## `maxDiagrams` (type: `integer`):

Stop after this many diagrams, so the cost of a run stays predictable.

## Actor input object example

```json
{
  "code": "flowchart LR\n    A[AI agent writes Mermaid] --> B(Diagram Renderer)\n    B --> C{Format?}\n    C -->|PNG| D[Image link]\n    C -->|SVG| E[Vector link]\n    C -->|PDF| F[Document link]",
  "type": "auto",
  "format": "png",
  "theme": "default",
  "scale": 2,
  "graphvizEngine": "dot",
  "includeSvg": false,
  "maxDiagrams": 100
}
```

# Actor output Schema

## `results` (type: `string`):

One item per diagram: file link, size and type, or the renderer's error message.

## `files` (type: `string`):

The PNG, SVG and PDF files saved in the run's key-value store.

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "code": `flowchart LR
    A[AI agent writes Mermaid] --> B(Diagram Renderer)
    B --> C{Format?}
    C -->|PNG| D[Image link]
    C -->|SVG| E[Vector link]
    C -->|PDF| F[Document link]`
};

// Run the Actor and wait for it to finish
const run = await client.actor("jumblemog/diagram-renderer").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = { "code": """flowchart LR
    A[AI agent writes Mermaid] --> B(Diagram Renderer)
    B --> C{Format?}
    C -->|PNG| D[Image link]
    C -->|SVG| E[Vector link]
    C -->|PDF| F[Document link]""" }

# Run the Actor and wait for it to finish
run = client.actor("jumblemog/diagram-renderer").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "code": "flowchart LR\\n    A[AI agent writes Mermaid] --> B(Diagram Renderer)\\n    B --> C{Format?}\\n    C -->|PNG| D[Image link]\\n    C -->|SVG| E[Vector link]\\n    C -->|PDF| F[Document link]"
}' |
apify call jumblemog/diagram-renderer --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,jumblemog/diagram-renderer"
        }
    }
}
```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/GB9cD377UzV7XzuKc/builds/kpccSKWq6kCYo6AbG/openapi.json