mcp-media-forge
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-media-forgeCreate a mermaid flowchart for user registration"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Media Forge
MCP server that generates diagrams, charts, HTML pages, and slide decks from text DSLs -- designed for AI coding agents to embed into Markdown.
LLM agents call tools like render_mermaid, render_html_page, or render_slides with text input, and get back file paths to assets ready to embed in docs.
Output Gallery
Mermaid Flowchart
Mermaid Sequence Diagram
D2 Architecture Diagram
Graphviz Dependency Graph
Vega-Lite Bar Chart
Related MCP server: Diagram Bridge MCP Server
Tools
Diagram & Chart Renderers (Docker)
Tool | Input | Formats | Use Case |
| Mermaid code | SVG, PNG | Flowcharts, sequence, ER, state, Gantt, git graphs |
| D2 code | SVG, PNG | Architecture diagrams with containers and icons |
| DOT code | SVG, PNG | Dependency graphs, network diagrams |
| Vega-Lite JSON | SVG, PNG | Bar, line, scatter, area, heatmap charts |
HTML Generators (No Docker)
Tool | Input | Output | Use Case |
| HTML body + theme | Self-contained HTML | Technical docs, reports, dashboards |
| JSON slide array + theme | HTML slide deck | Presentations, status updates, walkthroughs |
Utilities
Tool | Description |
| Usage examples, anti-patterns, complexity limits per tool |
| List all generated files in the output directory |
Quick Start
1. Start the rendering container (for diagram tools)
cd docker
docker compose up -dHTML page and slide tools work without Docker.
2. Install the MCP server
Option A -- npx (no install)
npx mcp-media-forgeOption B -- Clone and build
git clone https://github.com/PavelGuzenfeld/mcp-media-forge.git
cd mcp-media-forge
npm install
npm run build3. Register with your MCP client
Any MCP-compatible client (Claude Code, Cursor, VS Code + Copilot, Cline, etc.) can use this server. The standard config:
{
"mcpServers": {
"media-forge": {
"command": "node",
"args": ["/path/to/mcp-media-forge/dist/index.js"],
"env": {
"PROJECT_ROOT": "/path/to/your/project"
}
}
}
}Where to add this depends on your client:
Claude Code:
~/.claude/settings.jsonCursor: MCP settings panel
VS Code (Copilot):
.vscode/mcp.jsonCline: MCP server configuration
4. Use it
Ask your AI assistant to generate diagrams, pages, or presentations:
"Create a sequence diagram showing the OAuth2 flow and embed it in the README"
"Generate an HTML page summarizing the API architecture with KPI cards"
"Make a slide deck with our Q1 metrics and architecture overview"
The agent calls the appropriate tool, gets back a file path, and embeds it in your markdown.
How It Works
AI Agent (any MCP client)
|
| MCP Protocol (JSON-RPC over stdio)
v
MCP Media Forge (Node.js on host)
|
|--- Diagrams: docker exec (sandboxed, no network)
| |
| v
| Rendering Container
| ├── mmdc (Mermaid CLI + Chromium)
| ├── d2 (D2 diagrams)
| ├── dot/neato (Graphviz)
| └── vl2svg (Vega-Lite via vl-convert)
|
|--- HTML/Slides: template engine (no Docker)
| |
| v
| CSS Design System (4 themes, depth tiers, components)
|
v
docs/generated/
mermaid-a1b2c3.svg
d2-7f8e9a.svg
html_page-d4e5f6.html
slides-8b9c0d.htmlKey design decisions:
Text in, file path out -- returns relative paths, never base64 blobs
Content-hash naming -- same input = same file = free caching + git-friendly
SVG preferred -- vector format, small files, diffs cleanly in git
Docker-contained -- diagram renderers run in a sandboxed container with
network_mode: noneSelf-contained HTML -- pages and slides have zero external dependencies (inline CSS/JS)
Input pre-validation -- catches common mistakes before Docker round-trips
Structured errors -- error responses include
error_type,error_message, andsuggestionto enable LLM self-correction
Tool Reference
get_tool_guide
Get usage guide for any tool before rendering. Returns examples, anti-patterns to avoid, complexity limits, and tips.
{ "tool_name": "mermaid" }Available guides: mermaid, d2, graphviz, vegalite, html_page, slides, or all for a summary.
render_mermaid
{
"code": "flowchart TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Done]",
"format": "svg",
"theme": "default"
}Parameter | Type | Default | Description |
| string | required | Mermaid diagram code (must start with diagram type) |
|
|
| Output format |
|
|
| Mermaid theme |
Pre-validation catches: missing diagram type, semicolons, HTML in labels, >25 nodes.
render_d2
{
"code": "client -> server -> database",
"format": "svg",
"layout": "dagre"
}Parameter | Type | Default | Description |
| string | required | D2 diagram code |
|
|
| Output format |
| number | -- | Theme ID (0=default, 1=neutral-grey, 3=terminal) |
|
|
| Layout engine |
Pre-validation catches: Mermaid/D2 syntax confusion, unbalanced braces, >3 nesting depth.
render_graphviz
{
"dot_source": "digraph G { A -> B -> C }",
"engine": "dot",
"format": "svg"
}Parameter | Type | Default | Description |
| string | required | Graphviz DOT source code |
|
|
| Layout engine |
|
|
| Output format |
Pre-validation catches: missing graph wrapper, -> in undirected graphs, unbalanced braces.
render_chart
{
"spec_json": "{\"$schema\":\"https://vega.github.io/schema/vega-lite/v5.json\",\"data\":{\"values\":[{\"x\":1,\"y\":10}]},\"mark\":\"bar\",\"encoding\":{\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"}}}",
"format": "svg"
}Parameter | Type | Default | Description |
| string | required | Vega-Lite JSON specification |
|
|
| Output format |
| number | 1 | Scale factor for PNG output |
Pre-validation catches: invalid JSON, missing $schema/data/mark, >500 inline data rows.
render_html_page
Generates a self-contained themed HTML page. No Docker required.
{
"title": "System Overview",
"body_html": "<section id=\"metrics\"><h2>Metrics</h2><div class=\"mf-grid mf-grid-3\">...</div></section>",
"theme": "swiss",
"description": "Q1 architecture overview",
"nav_sections": ["Metrics", "Architecture", "Roadmap"]
}Parameter | Type | Default | Description |
| string | required | Page title |
| string | required | HTML body content (inner content only, no |
|
|
| Visual theme |
| string | -- | Page description (meta tag + header) |
| string[] | -- | Section names for floating IntersectionObserver navigation |
Design system CSS classes:
Class | Purpose |
| Primary highlight section (large shadow) |
| Secondary highlight (medium shadow) |
| Bordered content card |
| De-emphasized content |
| Responsive 2-column grid |
| Responsive 3-column grid |
| Two equal columns |
| Key metric display |
| Status badges |
Themes:
Theme | Style | Best for |
| White, geometric, blue accent | Technical docs |
| Deep navy, serif, gold accent | Presentations |
| Cream paper, bold sans, terracotta | Reports |
| Dark, monospace, cyan accent | Developer content |
render_slides
Generates a self-contained HTML slide deck with keyboard/touch navigation. No Docker required.
{
"title": "Q1 Review",
"slides": "[{\"title\":\"Q1 Review\",\"content\":\"Engineering update\",\"type\":\"title\"},{\"title\":\"Metrics\",\"content\":\"<ul><li>99.9% uptime</li></ul>\",\"type\":\"content\"}]",
"theme": "midnight",
"author": "Engineering Team"
}Parameter | Type | Default | Description |
| string | required | Presentation title |
| string | required | JSON array of slide objects |
|
|
| Visual theme |
| string | -- | Author (shown on title slide) |
Slide types:
Type | Layout | Best for |
| Centered large text + subtitle | Opening/closing slides |
| Centered heading + description | Topic dividers |
| Heading + body (bullets, text) | Most content |
| Heading + two columns | Before/after, comparisons |
| Heading + code block | Code walkthroughs |
| Large blockquote + attribution | Testimonials, key quotes |
| Heading + auto-grid metrics | Dashboards, stats |
| Heading + centered image | Screenshots, diagrams |
Navigation: Arrow keys, Space, PageUp/PageDown, Home/End. Touch: swipe left/right. Click dots to jump.
list_assets
{ "directory": "" }Returns a JSON array of all generated files with name, path, size, and modification time.
Error Handling
All tools return structured errors that help LLMs self-correct:
{
"status": "error",
"error_type": "syntax_error",
"error_message": "First line must declare diagram type. Got: \"A --> B\"",
"suggestion": "Start with: flowchart TD, sequenceDiagram, erDiagram, ... See https://mermaid.js.org/syntax/"
}Error types: syntax_error, rendering_error, dependency_missing.
Pre-validation catches common LLM mistakes before hitting the renderer:
Mermaid: missing diagram type, semicolons, HTML tags, legacy
graphsyntaxD2: Mermaid syntax confusion (
-->,subgraph), unbalanced bracesGraphviz: missing
digraph/graphwrapper,->in undirected graphsVega-Lite: invalid JSON, missing required fields, oversized inline data
Environment Variables
Variable | Default | Description |
|
| Project root for output path resolution |
|
| Output directory relative to PROJECT_ROOT |
|
| Docker container name |
Development
npm install
npm run build # Build with tsup
npm run dev # Watch mode
npm test # Run all tests (95 total)
npm run test:unit # Unit tests only (no Docker needed)
npm run test:component # Integration tests (Docker tools need container)
npm run lint # Type-check with tscRunning integration tests
cd docker && docker compose up -d # Start renderer (diagram tools only)
cd .. && npm run test:component # All integration testsHTML page and slide integration tests run without Docker.
Examples
See examples/ for sample input files:
File | Tool | Description |
render_mermaid | Decision flowchart | |
render_mermaid | Client-server sequence | |
render_d2 | Backend architecture with containers | |
render_graphviz | npm dependency graph | |
render_chart | Tool performance comparison |
See examples/README.md for MCP tool call examples and expected responses.
License
Available Tools
8 toolsget_tool_guideA
Get usage guide for a rendering tool — includes examples, anti-patterns to avoid, complexity limits, and tips. Call this BEFORE your first render to avoid common mistakes. Available guides: mermaid, d2, graphviz, vegalite, html_page, slides (or "all" for a summary).
| Name | Required | Description | Default |
|---|---|---|---|
| tool_name | Yes | Tool to get guide for: "mermaid", "d2", "graphviz", "vegalite", "html_page", "slides", or "all" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so the description carries the full burden. It describes the content (examples, anti-patterns, etc.) and available tools but does not explicitly state it is read-only or has no side effects. However, the tone and purpose strongly imply it is a harmless guide retrieval.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two efficient sentences with a parenthetical list. No wasted words—every sentence earns its place. The key action and prerequisites are front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter tool with no output schema, the description fully covers purpose, content, usage timing, and available options. No gaps remain for an AI agent to resolve.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% (parameter tool_name has a description listing valid values). The main description reinforces these values, adding contextual meaning (e.g., 'or "all" for a summary'). This adds value beyond the schema's bare enumeration.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Get usage guide for a rendering tool' and specifies it includes examples, anti-patterns, complexity limits, and tips. It differentiates from sibling rendering tools by being a guide retrieval rather than a rendering action.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly advises 'Call this BEFORE your first render to avoid common mistakes,' providing clear when-to-use guidance. Also lists available tool names, helping the agent choose the correct parameter value.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_assetsB
List all generated media assets in the output directory.
| Name | Required | Description | Default |
|---|---|---|---|
| directory | No | Subdirectory to list (default: docs/generated) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided. The description implies a read-only operation but does not disclose potential errors (e.g., missing directory) or behavior like recursion, leaving significant gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Extremely concise single sentence with no wasted words. Information is front-loaded and easy to parse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple, single-parameter tool, the description is adequate but lacks details on return format or error handling. Could be slightly more informative.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with a clear parameter description. The tool description adds no extra meaning beyond the schema, meeting baseline expectations.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it lists all generated media assets in the output directory. It distinguishes from sibling tools (render tools) by focusing on listing rather than rendering.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool vs alternatives. It does not specify prerequisites or context, leaving the agent to infer usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_chartA
Render a Vega-Lite chart to SVG or PNG. Supports: bar, line, point (scatter), area, rect (heatmap), boxplot, and layered/composite charts. IMPORTANT: spec_json must be valid JSON with "$schema", "data", "mark", and "encoding" fields. Anti-patterns: missing $schema, omitting encoding types, >500 inline data rows. Call get_tool_guide('vegalite') for examples.
| Name | Required | Description | Default |
|---|---|---|---|
| scale | No | Scale factor for PNG (default: 1). Use 2 for retina-crisp output. | |
| format | No | Output format. SVG preferred. | svg |
| spec_json | Yes | Vega-Lite JSON spec (as string). Must include "$schema", "data", "mark", "encoding". Always specify encoding types (quantitative/nominal/temporal/ordinal). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations exist, so description must cover behavior. It does not mention any side effects, permissions, rate limits, or return format. The agent cannot infer safety or operational constraints.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four concise sentences, front-loaded with purpose. Every sentence contains essential information without fluff. Efficient use of space.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema and no annotations; the description covers core usage but omits return format and any behavioral context. Adequate but not thorough.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but description enriches semantics: clarifies scale usage for retina output, specifies required fields in spec_json, and warns about anti-patterns. Adds real value beyond schema definitions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it renders Vega-Lite charts to SVG or PNG, with a specific verb and resource. It distinguishes from sibling tools like render_mermaid by naming the charting library and formats.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Lists supported chart types and anti-patterns, and references get_tool_guide for examples. Provides context on when to use, but lacks explicit exclusion of alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_d2A
Render a D2 architecture diagram to SVG or PNG. Best for: architecture diagrams with containers, nested groups, icons, and complex layouts. IMPORTANT: D2 syntax is NOT Mermaid. Use '->' for arrows (not '-->'), containers with 'name: { ... }' (not 'subgraph'). Anti-patterns: Mermaid syntax, unbalanced braces, >3 nesting levels. Call get_tool_guide('d2') for examples.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | D2 diagram code. Use '->' for arrows, 'name: { ... }' for containers. NOT Mermaid syntax. | |
| theme | No | D2 theme ID: 0=default, 1=neutral-grey, 3=terminal, 100=neutral-default | |
| format | No | Output format. SVG preferred. PNG is slower (requires Chromium conversion). | svg |
| layout | No | Layout engine. dagre=hierarchical (default), elk=complex layouts with many crossings | dagre |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description bears full burden. It discloses performance characteristics (PNG slower via Chromium), syntax restrictions (no Mermaid, limited nesting), and error-prone patterns. Missing details on error messages, output size limits, or throttling.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Extremely concise: four sentences front-loading purpose, best-for, syntax, anti-patterns, and guidance. No wasted words; every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with 4 parameters (no output schema), the description is remarkably complete. It covers purpose, syntax, format selection, layout guidance, common mistakes, and points to examples. The agent can use this without confusion.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers all parameters (100%), so baseline is 3. Description adds value by explaining the ordering of layout engines ('dagre=hierarchical', 'elk=complex') and highlighting PNG speed tradeoff. These enrich the schema's enum descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Render a D2 architecture diagram to SVG or PNG' with a specific verb and resource. It distinguishes itself from siblings like render_mermaid by emphasizing D2's unique syntax and suitability for complex architecture diagrams.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides clear context: 'Best for: architecture diagrams with containers, nested groups, icons, and complex layouts.' Includes explicit anti-patterns and a reference to get_tool_guide for examples. Could be improved by explicitly stating when not to use (e.g., if the goal is a sequence diagram, use Mermaid).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_graphvizA
Render a Graphviz DOT diagram to SVG or PNG. Best for: dependency graphs, network diagrams, tree structures, large auto-layout graphs (100+ nodes). IMPORTANT: Source must be wrapped in 'digraph G { ... }' or 'graph G { ... }'. Use '->' with digraph, '--' with graph. Engine guide: dot=hierarchical, neato=spring, fdp=force-directed, sfdp=large graphs, circo=circular, twopi=radial. Call get_tool_guide('graphviz') for examples.
| Name | Required | Description | Default |
|---|---|---|---|
| engine | No | Layout engine: dot=hierarchical, neato=spring, fdp=force-directed, sfdp=large, circo=circular, twopi=radial | dot |
| format | No | Output format. SVG preferred. | svg |
| dot_source | Yes | Graphviz DOT source. Must start with 'digraph G {' or 'graph G {'. Use '->' for directed, '--' for undirected. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Discloses syntax requirements (digraph G, -> vs --) and engine options with their typical uses. With no annotations, it carries the burden well, though tips on error handling or limits are missing.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Very concise: single paragraph with logical flow from purpose to use cases to important notes to engine guide to additional resources. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema and moderate complexity (3 params), description covers syntax, engines, and use cases adequately. Minor omission: difference between SVG and PNG output.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers all parameters (100%), but description adds extra context: engine guide (e.g., 'sfdp=large graphs') and syntax rules. Adds value beyond schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States exactly what it does: 'Render a Graphviz DOT diagram to SVG or PNG.' Differentiates from siblings like render_mermaid and render_d2 by specifying Graphviz format.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides clear use cases: dependency graphs, network diagrams, tree structures, large auto-layout graphs. Also mentions calling get_tool_guide for examples, but does not explicitly exclude scenarios.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_html_pageA
Render a self-contained themed HTML page from body content. No Docker required. Wraps your HTML in a design system with typography, depth tiers, cards, grids, KPIs, badges, and section navigation. IMPORTANT: body_html is the INNER content only — do NOT include , , or tags. Use mf- prefixed CSS classes: mf-hero, mf-elevated, mf-card, mf-grid, mf-kpi, mf-badge-success, etc. Themes: swiss (clean docs), midnight (presentations), warm (reports), terminal (dev content). Call get_tool_guide('html_page') for design system reference and examples.
| Name | Required | Description | Default |
|---|---|---|---|
| theme | No | Visual theme: swiss=clean docs, midnight=dark editorial, warm=cream reports, terminal=dev monospace | swiss |
| title | Yes | Page title (shown in header and browser tab) | |
| body_html | Yes | HTML body content (inner content only, no <html>/<head>/<body>). Use mf- prefixed classes for styling. | |
| description | No | Page description (shown below title and in meta tag) | |
| nav_sections | No | Section names for floating navigation. Must match id attributes on <section> elements in body_html. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It reveals that the tool wraps HTML in a design system, requires specific mf- prefixed CSS classes, and warns against including outer tags. It also mentions the themes and references get_tool_guide for details. No discussion of auth or rate limits, but those are less critical for a rendering tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured paragraph with no redundant information. Key points are front-loaded (what it does, no Docker) and all details are relevant. Every sentence adds value, making it concise yet comprehensive.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has 5 parameters and no output schema. The description covers the main input constraints and provides a reference for more details. It could have mentioned the return value format (a complete HTML string), but overall it is sufficiently complete for the tool's simplicity and supported by the schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but the description adds value by explaining usage beyond schema: e.g., body_html is 'inner content only', themes are expanded with contexts, nav_sections must match id attributes. This clarifies semantics beyond the schema descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool renders a self-contained themed HTML page from body content, mentioning key features like themes and CSS classes. It distinguishes from sibling tools like render_mermaid or render_slides by focusing on HTML page rendering and referencing get_tool_guide for design system details.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear when-to-use guidance (rendering a themed HTML page) and notes no Docker required. It gives important instructions about body_html content. However, it does not explicitly exclude use cases or list alternatives beyond the sibling tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_mermaidA
Render a Mermaid diagram to SVG or PNG. Supports: flowchart, sequenceDiagram, erDiagram, stateDiagram-v2, gantt, pie, gitGraph, classDiagram, journey, mindmap. IMPORTANT: Code must start with diagram type (e.g., 'flowchart TD'). Do NOT use semicolons. Do NOT use HTML tags in labels. Anti-patterns: 'graph' (use 'flowchart'), unquoted special chars in labels, >25 nodes without subgraphs. Call get_tool_guide('mermaid') for examples and full anti-pattern list.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Mermaid diagram code. Must start with diagram type declaration (e.g., 'flowchart TD', 'sequenceDiagram'). No semicolons. | |
| theme | No | Mermaid theme. 'neutral' best for docs, 'forest' for dark backgrounds | default |
| format | No | Output format. SVG preferred (smaller, git-friendly diffs) | svg |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. It discloses required syntax, anti-patterns (33+25 node warning), and output format preferences. This gives clear behavioral expectations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences plus bullet-like anti-pattern list. Front-loaded with purpose. Every sentence earns its place, no fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers purpose, constraints, and output format. No output schema, but typical render tool returns image data. Could specify if output is base64 or file, but enough for agent to infer. Omits nothing critical.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers all 3 parameters with descriptions (100% coverage). Description adds value: suggests SVG for git-friendly diffs, theme use-cases (neutral for docs, forest for dark). Adds meaningful guidance beyond schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Render a Mermaid diagram to SVG or PNG' and lists 10 supported diagram types, matching the tool name and distinguishing it from siblings like render_d2 or render_graphviz.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides explicit constraints: code must start with diagram type, no semicolons, no HTML tags, and warns against anti-patterns. Also directs to get_tool_guide for examples. Lacks explicit when-not-to-use vs alternatives, but sibling names imply context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_slidesA
Render a self-contained HTML slide deck with keyboard/touch navigation, progress bar, and transitions. No Docker required. Supports 8 slide types: title, content, split, code, quote, kpi, image, section. IMPORTANT: slides is a JSON array string of objects with title, content (HTML), and optional type. Content density limits: max 6 bullets per slide, max 10 code lines, max 25 words for quotes, max 30 slides total. Call get_tool_guide('slides') for slide type reference and examples.
| Name | Required | Description | Default |
|---|---|---|---|
| theme | No | Visual theme for the slide deck | swiss |
| title | Yes | Presentation title | |
| author | No | Author name (shown on title slide) | |
| slides | Yes | JSON array of slide objects: [{"title": "...", "content": "HTML...", "type": "content|title|split|code|quote|kpi|image|section"}] |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries full burden. Discloses key behaviors: self-contained output, navigation, transitions, and content density limits (max bullets, code lines, quote words, total slides). Does not cover error handling or idempotency, but provides useful constraints.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences front-loaded with purpose and key features. No redundant words. Efficiently conveys essential information, with a call to action for additional details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Covers purpose, constraints, and references external guide. Lacks details on output format (though implied) and error handling for limit violations. Given no output schema and 4 parameters, description is adequate but could be more thorough on edge cases.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, baseline 3. Description adds value by explaining that 'slides' is a JSON array string with specific structure and optional type, and includes content density limits per slide type, which go beyond the schema description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states the tool renders a self-contained HTML slide deck with specific features (keyboard navigation, progress bar). The verb 'render' and resource 'slide deck' are explicit. Distinguishes from sibling tools like render_mermaid and render_chart by focusing on slides.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Mentions 'No Docker required' as a contextual note, suggesting alternatives might require Docker. Directs users to call get_tool_guide('slides') for more info, but does not explicitly state when to avoid this tool or compare directly with siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each rendering tool targets a distinct output format (Mermaid, D2, Graphviz, Vega-Lite, HTML, slides), with no overlapping purposes. get_tool_guide and list_assets have clearly separate roles.
All rendering tools follow the 'render_<format>' pattern, with 'get_tool_guide' and 'list_assets' using a consistent verb_noun structure. Naming is uniform and predictable.
8 tools cover a broad range of media types and supporting functions (guide, listing). This is well-scoped for a media rendering server without being excessive or minimal.
The tool surface covers key generation tasks for multiple formats and includes guidance and asset listing. Minor gap: no tool to delete or update assets, but this aligns with a generate-focused server.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Create, read and live-edit visual boards, Kanban plans, Gantt timelines and diagrams with AI agents.
Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…
Related MCP Servers
- AlicenseBqualityDmaintenanceEnables AI assistants to generate and render Mermaid diagrams (flowcharts, sequence diagrams, etc.) as PNG/SVG images with local file saving and HTTP access URLs. Supports batch processing and intelligent caching for efficient diagram creation.1121MIT
- AlicenseNot gradedqualityCmaintenanceBridges LLMs and diagram creation by providing intelligent format selection, format-specific instruction generation, and professional diagram rendering across 9+ formats including Mermaid, PlantUML, C4 Model, and GraphViz.14MIT
- AlicenseAqualityCmaintenanceEnables AI agents to programmatically generate, edit, and view Excalidraw diagrams with real-time browser synchronization. It provides a suite of tools for adding shapes, text, and arrows to diagrams through natural language interactions.112,783100MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to generate stylized images from text and code, with syntax highlighting and markdown formatting support.MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/PavelGuzenfeld/mcp-media-forge'
If you have feedback or need assistance with the MCP directory API, please join our Discord server