Render Diagram

POST/visual/v1/render-diagram

What it does

Takes a Mermaid diagram definition as a string and renders it into SVG, PNG, ASCII art, or Unicode art. By default, success is a JSON wrapper. Set responseFormat: "file" for raw SVG or PNG responses. ASCII and Unicode stay JSON-only in v1. Supports 5 diagram types: flowchart, sequenceDiagram, stateDiagram, classDiagram, and erDiagram.

Why use it?

No browser needed. Traditional Mermaid rendering requires a headless browser (Puppeteer, Playwright). This API does it server-side in ~100 ms.
Consistent output. Every render looks the same — no OS font differences, no viewport quirks.
CI/CD integration. Generate architecture diagrams from code during your build and embed them in READMEs or wikis automatically.
ASCII for terminals. Need diagrams in CLI tools, Slack bots, or plain-text logs? ASCII and Unicode output have you covered.

Examples

Minimal example

curl -X POST https://api.creatornode.io/visual/v1/render-diagram \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_KEY" \
  -d '{
    "definition": "graph LR\n  A[User] --> B[API] --> C[Database]"
  }'

That's it — by default you'll get a JSON wrapper with the rendered SVG in data and metadata in meta.

Raw file response

curl -X POST https://api.creatornode.io/visual/v1/render-diagram   -H "Content-Type: application/json"   -H "X-API-Key: YOUR_KEY"   -d '{
    "definition": "graph LR
  A[User] --> B[API] --> C[Database]",
    "format": "svg",
    "responseFormat": "file"
  }'   --output architecture.svg

Full-featured example

{
  "definition": "sequenceDiagram\n  Client->>API: POST /render\n  API->>Mermaid: parse & render\n  Mermaid-->>API: SVG output\n  API-->>Client: JSON response",
  "format": "png",
  "theme": "dracula",
  "options": {
    "colors": {
      "background": "#282a36",
      "primaryColor": "#bd93f9"
    },
    "font": "Inter, system-ui, sans-serif",
    "png": {
      "width": 1200,
      "quality": 95
    }
  }
}

Available themes

Category	Themes
Light	`zinc-light` (alias `light`), `github-light` (alias `neutral`), `slate-light`
Dark	`tokyo-night` (alias `dark`), `github-dark`, `zinc-dark`, `slate-dark`, `dracula`, `monokai`, `nord`
Colorful	`rose-pine`, `catppuccin-latte`, `catppuccin-mocha`, `solarized-light`, `solarized-dark`

💡 Tip: Free tier users have access to 3 themes: light, neutral, and dark. Upgrade to unlock all 15 themes plus custom color overrides.

Output formats in detail

Format	Best for	Notes
`svg`	Web, docs, scalable graphics	Default. Crisp at any zoom. Smallest file size.
`png`	Social media, presentations, email	Base64 encoded. Up to 2048×2048 (premium).
`ascii`	Terminal, plain text, Slack	Works best with `flowchart`. Other types have limited support.
`unicode`	Terminal, richer text rendering	Box-drawing characters (┌─┐). Same limitations as ASCII.

Tips & tricks

Use file mode only for SVG or PNG. Requests with format: "ascii" or format: "unicode" must stay in the default JSON transport.
Keep diagrams under 200 nodes. The API has an internal complexity guard. If your diagram is huge, split it into smaller sub-diagrams.
Use Inter for PNG. Custom fonts like JetBrains Mono or Fira Code look great in SVG but may fall back to system fonts in PNG (server-side rendering). Stick to Inter (default) or system-ui for consistent PNG output.
Override just the colors you need. You don't have to customize all 7 color properties — set only background and primaryColor to match your brand, and the theme handles the rest.
ASCII is perfect for ChatOps. If you're building a Slack/Discord bot that generates architecture diagrams, ASCII format renders in any monospaced environment without image hosting.
Check the response headers. X-Processing-Time-Ms tells you exactly how long rendering took. X-Cache-Hit shows if you got a cached result.
Use direction override for flowcharts. Instead of changing your Mermaid source, pass "options": { "direction": "LR" } to switch a top-down flowchart to left-right without editing the definition.

⚠️ Security note: SVG output may contain user-supplied text. If you embed SVGs directly in the DOM, always sanitize with a library like DOMPurify to prevent XSS.

Cost & Limits

Feature	Detail
Credit cost	2 credits per request
Output formats	SVG, PNG, ASCII, Unicode

Tier Limits

Limit	Free	Premium
Diagram themes	3 basic (light, neutral, dark)	All 15 themes
Custom color overrides	—	✓
Max definition size	30 KB	100 KB
Max PNG resolution	800 × 800	2048 × 2048

Other Endpoints

POST/visual/v1/render-code