👁 MD2UI - Markdown to Images & Code & Emails avatar

MD2UI - Markdown to Images & Code & Emails

Pricing

Pay per event + usage

👁 MD2UI - Markdown to Images & Code & Emails

MD2UI - Markdown to Images & Code & Emails

Turn Markdown into shareable images and email-ready HTML — directly from Claude. Render tables, code blocks, and Mermaid diagrams as PNG, or Gmail-compatible HTML. 9 themes included. No design tools needed.

Pricing

Pay per event + usage

Rating

0.0

(0)

Developer

👁 Treplit

Treplit

Maintained by Community

Actor stats

Bookmarked

Total users

Monthly active users

4 months ago

Last modified

MD2UI - Markdown to Visual Output MCP Server

Give your AI agents the power to create beautiful visuals, not just text.

Transform Markdown into shareable images, styled HTML, and email-ready output. Perfect for AI agents that need to generate charts, diagrams, code snippets, and visual reports.

Try the Web Editor | Browse Themes | View on Apify

👁 MD2UI Editor - Transform Markdown to Visual Output

The Problem

AI agents are incredible at generating text. But when it comes to creating visual output, they hit a wall:

Claude can write a perfect Mermaid flowchart... but can't render it as an image
Your LangGraph agent generates a beautiful report... as raw Markdown nobody wants to read
You need to share analysis results on Slack/WhatsApp... but plain text looks unprofessional
Sending base64 images back to the LLM eats thousands of tokens

MD2UI solves this. It's an MCP server that takes any Markdown and returns a beautiful, shareable image URL in milliseconds.

Mermaid Diagram Support

Full Mermaid 11.x support with server-side rendering:

```mermaid
flowchart LR
 A[User Query] --> B{AI Agent}
 B --> C[Generate Markdown]
 C --> D[MD2UI]
 D --> E[Beautiful Image]
 E --> F[Share Anywhere]
```

Supported diagrams: flowchart, sequence, pie, sankey, timeline, quadrant, class, state, ER, gantt, mindmap, and more.

👁 Chart Gallery - Line charts, pie charts, sankey diagrams, and more

Features

Multiple Output Formats - HTML, PNG, JPEG, WebP, Email HTML
Email Rendering - Generate email-client compatible HTML (Gmail, Outlook, Apple Mail)
9 Professional Themes - Match your brand or use familiar styles
Mermaid Diagrams - All diagram types rendered server-side
Syntax Highlighting - Beautiful code blocks in any language
URL Response - Get shareable links instead of base64 blobs
Smart Caching - Mermaid diagrams and SVG conversions cached for performance
Fast Cold Start - Standby mode keeps the server warm (~150-700ms)
MCP Native - Works with any MCP-compatible client

Themes

Choose from 9 built-in themes or create custom ones:

Theme	Style	Best For
`default`	Clean blue, professional	General purpose
`dark`	Dark mode	Developer content, night mode
`notion`	Notion-inspired	Documentation, notes
`anthropic`	Claude-style warm tones	AI assistant outputs
`google`	Material Design colors	Reports, presentations
`perplexity`	Modern turquoise	Search results, summaries
`whatsapp`	Chat-bubble green	Messaging, notifications
`minimal`	Content-focused, serif	Long-form reading
`corporate`	Business blue	Enterprise documents

👁 Theme Gallery - 9 professional built-in themes

Quick Start

MCP Endpoint

https://treplit--md2ui-mcp.apify.actor/mcp?token=YOUR_APIFY_TOKEN

Get your token at console.apify.com/settings/integrations.

Claude Code

Add to ~/.claude/settings.json:

{
"mcpServers":{
"md2ui":{
"url":"https://treplit--md2ui-mcp.apify.actor/mcp?token=YOUR_APIFY_TOKEN"
}
}
}

MCP Tools

Tool	Description
`render`	Transform Markdown to HTML, PNG, JPEG, WebP images
`render_email`	Generate email-compatible HTML for Gmail, Outlook, Apple Mail
`theme_list`	List all 9 available themes
`theme_get`	Get full configuration of a theme
`theme_create`	Create a custom theme
`generate_component`	AI-powered: describe what you want, get Markdown/Mermaid code
`health`	Check server status

render Parameters

Parameter	Type	Required	Description
`markdown`	string	Yes	Markdown content to render (max 100KB)
`output_format`	enum	Yes	`html`, `png`, `jpeg`, `webp`
`theme_id`	string	No	Theme ID (default: `default`)
`options.width`	number	No	Width in pixels (default: 800)
`options.scale`	number	No	DPI multiplier 1-3 (default: 2)
`options.quality`	number	No	0-100 for JPEG/WebP (default: 90)
`options.transparentBackground`	boolean	No	Transparent PNG background

Response Format

{
"success":true,
"image":"data:image/png;base64,..."
}

render_email Parameters

Parameter	Type	Required	Description
`markdown`	string	Yes	Markdown content to render for email
`theme_id`	string	No	Theme ID (default: `default`)
`image_hosting`	enum	No	`hosted` (URL) or `base64` (embedded)

Email Features:

React Email components for universal email client support
Automatic font fallbacks (Inter → Helvetica, Fira Code → Courier)
Mermaid diagrams rendered as hosted PNG images
Cached diagram rendering for improved performance

Response Format (Email)

{
"success":true,
"html":"<!DOCTYPE html>...",
"uploadedImages":[
{"id":"mermaid-0.png","url":"https://..."}
]
}

Integration Examples

n8n Workflow

Use MD2UI in n8n workflows with LangChain or LangGraph agents:

// Initialize MCP Session
const response =await $http.request({
method:'POST',
url:'https://treplit--md2ui-mcp.apify.actor/mcp?token='+ $env.APIFY_TOKEN,
headers:{
'Content-Type':'application/json',
'Accept':'application/json, text/event-stream'
},
body:{
jsonrpc:'2.0',
id:1,
method:'initialize',
params:{
protocolVersion:'2024-11-05',
capabilities:{},
clientInfo:{name:'n8n-workflow',version:'1.0'}
}
}
});
const sessionId = response.headers['mcp-session-id'];

// Render Markdown to Image
const renderResponse =await $http.request({
method:'POST',
url:'https://treplit--md2ui-mcp.apify.actor/mcp?token='+ $env.APIFY_TOKEN,
headers:{
'Content-Type':'application/json',
'Accept':'application/json, text/event-stream',
'mcp-session-id': sessionId
},
body:{
jsonrpc:'2.0',
id:2,
method:'tools/call',
params:{
name:'render',
arguments:{
markdown: $input.first().json.content,
output_format:'png',
theme_id:'anthropic'
}
}
}
});

LangGraph Agent

from langchain_mcp_adapters.client import MultiServerMCPClient
asyncwith MultiServerMCPClient({
"md2ui":{
"url":"https://treplit--md2ui-mcp.apify.actor/mcp?token=YOUR_TOKEN",
"transport":"streamable_http"
}
})as client:
 tools = client.get_tools()
# Use tools in your LangGraph agent

Why MD2UI?

Without MD2UI	With MD2UI
AI generates Markdown nobody reads	AI creates shareable visuals
Mermaid code sits unrendered	Beautiful diagrams in seconds
Base64 images waste tokens	URL response saves 99% tokens
Plain text notifications	Professional formatted alerts
Manual diagram rendering	Automated visual pipeline

Performance

Scenario	Latency
Cold start (Standby wake)	~150-700ms
Warm HTML render	~50-100ms
Warm image render	~200-400ms
Warm email render	~250-450ms

The server uses a persistent Puppeteer browser instance in Standby mode. After the first render, subsequent requests reuse the warm browser—no cold start penalty per request.

Batch rendering: Use render_batch to render up to 10 documents in a single request, sharing the same browser session for optimal throughput.

URL Persistence

Image URLs are stored in Apify's key-value store:

Storage Type	Retention
Default (unnamed)	7 days
Named stores	Indefinitely

For most use cases, 7 days is plenty. URLs work immediately for Slack, email, or any sharing. If you need permanent URLs, download the image and host it yourself.

Tip: The response includes expires_in (seconds) so your agent knows the URL lifetime.

Self-Hosting

MD2UI is optimized for Apify but can run elsewhere:

Docker image available: Built on apify/actor-node-puppeteer-chrome with Chromium pre-installed.

# Clone and build
docker build -t md2ui .
docker run -p8080:8080 md2ui

Limitations when self-hosting:

No Actor.charge() billing (pricing features disabled)
No automatic key-value store URLs (returns base64 only)
You handle scaling, uptime, and browser management

Recommended: Use Apify for production. The Standby mode, managed scaling, and pay-per-use pricing make it simpler than self-hosting Puppeteer.

Links

Built by Treplit for AI agents that need to show, not just tell.

👁 HTML to Markdown avatar

HTML to Markdown

web.harvester/html-to-markdown

Convert HTML to clean Markdown. Supports GFM tables, code blocks, and custom rules. Perfect for content migration and documentation.

👁 User avatar

Web Harvester

👁 Mermaid Diagram Actor avatar

Mermaid Diagram Actor

lolletto/mermaid-diagram-actor

Convert Text description or Mermaid code to PNG, SVG, or PDF images. Flowcharts, sequence diagrams, Gantt charts, ER diagrams and more.

👁 User avatar

Lorenzo De Martinis

👁 Mermaid Diagram Actor avatar

Mermaid Diagram Actor

salesmart-srl/mermaid-diagram-actor

Convert Text description or Mermaid code to PNG, SVG, or PDF images. Flowcharts, sequence diagrams, Gantt charts, ER diagrams and more.

Salesmart Srl

👁 HTML to Markdown Converter - Bulk Web Content to MD avatar

HTML to Markdown Converter - Bulk Web Content to MD

santamaria-automations/html-to-markdown

Extract main article content from any website and convert to clean Markdown including headings, links, images, tables, and code blocks. Perfect for LLM training, AI pipelines, and documentation. Export data, run via API, schedule and monitor runs, or integrate with other tools.

👁 User avatar

Ale

Markdown API

vivid_astronaut/markdown

👁 User avatar

Fabio Suizu

👁 Markdown Maker: HTML to Markdown 📝 avatar

Markdown Maker: HTML to Markdown 📝

shahidirfan/Markdown-Maker

Instantly convert complex HTML into clean, structured Markdown. This lightweight actor is optimized to render web content into a format that is easily readable for AI LLMs, reducing token usage and improving context. Perfect for RAG pipelines and preparing data for training.

👁 User avatar

Shahid Irfan

👁 Web Page to Markdown Extractor avatar

Web Page to Markdown Extractor

fetch_cat/web-page-to-markdown-extractor

Convert public URLs into clean Markdown, text, metadata, links, images, and optional HTML for AI agents, RAG, support, and automation workflows.

👁 User avatar

Hanna Nosova

Document Structure Extractor — Markdown to JSON outline

shoebill-dev27/doc-structure-extractor

Turn Markdown documents into structured JSON: nested heading tree with section text, fenced code blocks, links, parsed tables, and size statistics. Pure parsing, no LLM cost.

👁 User avatar

Shinobu Otani

HTML to Markdown — clean conversion, boilerplate stripping

shoebill-dev27/html-to-markdown

Convert scraped HTML into clean Markdown and plain text: headings, nested lists, links, images, code blocks, blockquotes, and tables. Drops scripts, styles, and structural boilerplate (nav/footer/aside) so only content remains. Pure parsing, no LLM cost.

👁 User avatar

Shinobu Otani

👁 Html to Markdown Converter avatar

Html to Markdown Converter

antonio_espresso/html-to-markdown-converter

Crawl a target URL and convert its HTML content into clean, structured Markdown with optional heading-based chunking.

👁 User avatar

Antonio Blago

URL: https://apify.com/treplit/md2ui-mcp