Visual API Guide
Turn diagrams, source code, and event data into polished images — ready for docs, social media, presentations, and automated pipelines.
https://api.creatornode.io/visualWhat is the Visual API?
The Visual API lets you render Mermaid diagrams, source code snippets, code diffs, and timeline infographics into high-quality images via a simple REST call. No browser, no headless Chrome, no Puppeteer — just send JSON, get SVG or PNG back.
It's designed for developers and teams who need to generate visuals programmatically: CI/CD pipelines, documentation generators, blog platforms, chatbots, or any app where you want beautiful rendering without client-side complexity.
🎨 15 Themes
Light, dark, and colorful themes — from GitHub and Dracula to Catppuccin and Solarized.
📐 Multiple Formats
SVG, PNG, ASCII, and Unicode. Diagrams, code, diffs, and timelines.
📏 Auto-sizing
Omit width or height and the API calculates optimal dimensions automatically.
🔑 Free Tier
20 requests/day with no API key required. Perfect for testing and prototyping.
Endpoints
Click an endpoint to see the full guide — examples, tips & tricks, and limits.
Render Code
Render syntax-highlighted code snippets as SVG or PNG images.
Render Code Diff
Render before/after code diffs with line-level highlighting.
Render Diagram
Render Mermaid diagrams to SVG, PNG, ASCII, or Unicode.
Render Timeline
Render event timelines and roadmap infographics as SVG or PNG.
Render Chem
Render chemistry molecules from SMILES notation as SVG or PNG.
Render Chem Reaction
Render chemical reaction schemes (reactants → products) as SVG or PNG.
Credit Costs
Visual APICode, diagrams, diffs, timelines & chemistry
| Endpoint | Cost | Description | |
|---|---|---|---|
/visual/v1/render-code | 2 credits | Render a code snippet to a styled image. Fixed cost per request. | Full guide → |
/visual/v1/render-code-diff | 1 credit | Render a before/after code comparison with diff highlighting. Fixed cost per request. | Full guide → |
/visual/v1/render-diagram | 2 credits | Render a Mermaid diagram to an image. Fixed cost per request. | Full guide → |
/visual/v1/render-timeline | 2 credits | Render an event timeline as an SVG or PNG infographic. Fixed cost per request. | Full guide → |
/visual/v1/render-chem | 3 credits | Render a SMILES string to a 2D structural diagram (SVG or PNG). Fixed cost per request. | Full guide → |
/visual/v1/render-chem-reaction | 5+ credits | Render a chemical reaction scheme (reactants → products) as SVG or PNG. Base cost + 1 credit per extra item beyond 3. | Full guide → |
See the Pricing page for credit packages and tier comparison.
Usage Examples
Generate diagrams in CI/CD
Keep Mermaid sources in your repo (docs/architecture.mmd) and render them during the build.
# GitHub Actions example
- name: Render architecture diagram
run: |
curl -s -X POST https://api.creatornode.io/visual/v1/render-diagram \
-H "Content-Type: application/json" \
-H "X-API-Key: ${{ secrets.CREATORNODE_KEY }}" \
-d "{\"definition\": \"$(cat docs/architecture.mmd)\"}" \
| jq -r '.data' > docs/architecture.svgSocial media code cards
Automatically generate Open Graph images for your blog posts or documentation pages:
// Node.js example
const response = await fetch('https://api.creatornode.io/visual/v1/render-code', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.CREATORNODE_KEY,
},
body: JSON.stringify({
code: codeSnippet,
language: 'typescript',
format: 'png',
theme: 'github-dark',
options: { preset: 'og', filename: 'example.ts' },
}),
});
const { data } = await response.json();
// data = base64-encoded PNG → save to file or upload to CDNTimeline roadmap generation
Generate a branded roadmap image from structured milestones:
// Node.js — generate a dark-theme roadmap PNG
const response = await fetch('https://api.creatornode.io/visual/v1/render-timeline', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.CREATORNODE_KEY,
},
body: JSON.stringify({
title: 'Q1 2026 Roadmap',
events: milestones, // [{ date, title, text }]
theme: 'dark',
accentColor: '#10b981', // brand green
format: 'png',
width: 1200,
height: 630,
}),
});
const { data } = await response.json();
// data = base64-encoded PNG → save or upload to CDNSlack / Discord bot diagrams
Use ASCII format for instant rendering in chat — no image hosting needed:
const { data } = await renderDiagram({
definition: userInput,
format: 'ascii',
});
// data = plain text, wrap in ``` and post to channel
await slack.chat.postMessage({
channel, text: `\`\`\`\n${data}\n\`\`\``
});