How do I use diagram-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@diagram-mcp render a mermaid flowchart for a simple login process" 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.

diagram-mcp

by niradler

Overview Schema Related Servers Score Discussions

TypeScript

Diagram MCP Server

A Model Context Protocol (MCP) server that renders Mermaid diagrams and Plotly charts, converting them to various image formats.

Features

Mermaid Diagram Rendering: Convert Mermaid code to SVG, PNG, or PDF
Plotly Chart Rendering: Convert Plotly charts to SVG, PNG, or PDF
Image Conversion: Convert diagrams and charts to PNG, JPG, or PDF with customizable quality
Multiple Themes: Support for default, dark, and forest themes (Mermaid)
Customizable Output: Control dimensions, background colors, and quality settings
TypeScript: Fully typed with Zod validation

Related MCP server: Excalidraw MCP App Server

Installation

Local Installation

pnpm install

Docker Installation

# Build and run with Docker
docker build -t diagram-mcp .
docker run -p 3000:3000 diagram-mcp

Development

# Start development server
pnpm run dev

# Build the project
pnpm run build

# Run tests
pnpm test

# Run tests with coverage
pnpm run test:coverage

# Docker commands
pnpm run docker:build    # Build Docker image
pnpm run docker:run      # Run Docker container

Usage

Available Tools

1. `render_mermaid`

Renders a Mermaid diagram to SVG, PNG, or PDF format.

Parameters:

mermaidCode (string, required): The Mermaid diagram code
format (string, optional): Output format - 'svg', 'png', or 'pdf' (default: 'svg')
theme (string, optional): Theme - 'default', 'dark', or 'forest' (default: 'default')
backgroundColor (string, optional): Background color (default: '#ffffff')
width (number, optional): Custom width in pixels
height (number, optional): Custom height in pixels

Example:

{
  "mermaidCode": "graph TD\n  A[Start] --> B[End]",
  "format": "svg",
  "theme": "default"
}

2. `render_plotly`

Renders a Plotly chart to SVG, PNG, or PDF format.

Parameters:

plotlyCode (string, required): The Plotly chart code (JavaScript)
format (string, optional): Output format - 'svg', 'png', or 'pdf' (default: 'svg')
backgroundColor (string, optional): Background color (default: '#ffffff')
width (number, optional): Custom width in pixels
height (number, optional): Custom height in pixels
responsive (boolean, optional): Make chart responsive (default: true)
displayModeBar (boolean, optional): Show mode bar (default: false)
displaylogo (boolean, optional): Show Plotly logo (default: false)

Example:

{
  "plotlyCode": "Plotly.newPlot('plotly-chart', [{ x: [1,2,3], y: [1,2,4], type: 'scatter' }], { margin: { t: 0 } });",
  "format": "png",
  "width": 800,
  "height": 600
}

3. `convert_to_image`

Converts a Mermaid diagram to PNG, JPG, or PDF image format.

Parameters:

mermaidCode (string, required): The Mermaid diagram code
format (string, optional): Output format - 'png', 'jpg', or 'pdf' (default: 'png')
theme (string, optional): Theme - 'default', 'dark', or 'forest' (default: 'default')
backgroundColor (string, optional): Background color (default: '#ffffff')
width (number, optional): Custom width in pixels
height (number, optional): Custom height in pixels
quality (number, optional): Image quality 1-100 (default: 90)

Example:

{
  "mermaidCode": "graph LR\n  A[Input] --> B[Process] --> C[Output]",
  "format": "png",
  "theme": "dark",
  "quality": 95
}

MCP Configuration

Add this to your MCP client configuration:

{
  "mcpServers": {
    "diagram-mcp": {
      "command": "node",
      "args": ["dist/index.js"],
      "env": {}
    }
  }
}

sse: PORT=3919 TRANSPORT_TYPE=http npx diagram-mcp

{
  "mcpServers": {
      "diagram": {
        "command": "npx",
          "args": [   
              "-y",
              "mcp-remote",
              "http://localhost:3919/mcp",
              "--allow-http"
          ]
      }
  }
}

Supported Chart Types

Mermaid Diagrams

The server supports all Mermaid diagram types:

Flowcharts
Sequence diagrams
Class diagrams
State diagrams
Entity Relationship diagrams
User Journey diagrams
Gantt charts
Pie charts
Git graphs
C4 diagrams
Mindmaps

Plotly Charts

The server supports all Plotly chart types:

Scatter plots
Line charts
Bar charts
Histograms
Box plots
Violin plots
Heatmaps
3D plots
Contour plots
Surface plots
And many more...

Examples

Mermaid Flowchart

graph TD
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Great!]
  B -->|No| D[Debug]
  D --> B

Mermaid Sequence Diagram

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

Plotly Scatter Plot

Plotly.newPlot(
  "plotly-chart",
  [
    {
      x: [1, 2, 3, 4, 5],
      y: [1, 2, 4, 8, 16],
      type: "scatter",
      mode: "lines+markers",
    },
  ],
  {
    title: "Exponential Growth",
    xaxis: { title: "X" },
    yaxis: { title: "Y" },
  }
);

Error Handling

The server provides detailed error messages for:

Invalid Mermaid syntax
Unsupported formats
Browser initialization failures
Screenshot generation errors

Dependencies

@modelcontextprotocol/sdk: MCP SDK
mermaid: Mermaid diagram rendering
puppeteer: Browser automation for image conversion
zod: Schema validation
dotenv: Environment variable management

License

MIT

Available Tools

2 tools

render_mermaidA

Render a Mermaid diagram to SVG, PNG, JPG, or PDF format with comprehensive styling and output options. Output options:

"link" (default): Returns a localhost URL for easy viewing (always show the user the link he can view the diagram in a browser)
"filepath": Saves to disk and returns the file path
"raw": Returns base64 data for images or raw SVG string

Examples:

Basic SVG: Just provide mermaidCode for raw SVG data
Localhost image: Set format='png' with output='link' (default) to get a localhost URL
Save to disk: Set output='filepath' to save and get file path
Base64 image: Set output='raw' to get base64 data for tags
Custom styling: Use theme, backgroundColor, and dimension options for tailored appearance

ParametersJSON Schema

Name	Required	Default
`theme`	No	default
`width`	No
`format`	No	svg
`height`	No
`output`	No	link
`quality`	No
`darkMode`	No
`filePath`	No
`fontSize`	No
`sequence`	No
`flowchart`	No
`fontFamily`	No
`htmlLabels`	No
`maxTextSize`	No
`mermaidCode`	Yes
`backgroundColor`	No

TDQS

A3.6/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations are minimal (only title) with no destructive or readOnly hints. The description adds value by explaining output behaviors (localhost URL, file saving, raw data) and hints at non-destructive rendering. However, it does not disclose potential side effects, authorization needs, or whether the tool modifies existing resources. With no annotations, the description carries the burden but is not fully transparent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise with a clear first sentence, followed by a bullet-like list of output options and examples. It front-loads the core purpose. The examples section is slightly lengthy but informative. Overall efficient with minimal redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given high complexity (16 parameters, nested objects, no output schema), the description is incomplete. It fails to explain most parameters, does not describe return value structure for each output type, and provides no guidance on sequencing with sibling tools. The examples help but do not compensate for the missing detail on half of the parameters.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0%, so the description must compensate. It mentions a few parameters (theme, backgroundColor, format, output) in examples but does not explain over 10 parameters (e.g., quality, darkMode, filePath, sequence, flowchart options). The description says 'comprehensive styling and output options' but lacks detail, leaving many parameters ambiguous.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states 'Render a Mermaid diagram' with specific output formats (SVG, PNG, JPG, PDF) and mentions styling options. The verb 'render' and resource 'Mermaid diagram' are specific and distinct from sibling tool 'render_plotly' which suggests Plotly charts.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context on output options (link, filepath, raw) and includes examples for common use cases. However, it does not explicitly state when to use this tool versus the sibling 'render_plotly', though the diagram type implies it. No explicit exclusions or alternatives are given.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_plotlyA

Render a Plotly chart to SVG, PNG, JPG, or PDF format with comprehensive styling and output options. Output options:

"link" (default): Returns a localhost URL for easy viewing
"filepath": Saves to disk and returns the file path
"raw": Returns base64 data for images or raw SVG string

Examples:

Basic chart: Provide plotlyCode with Plotly.newPlot() call
Localhost image: Set format='png' with output='link' (default) to get a localhost URL (always show the user the link he can view the diagram in a browser)
Save to disk: Set output='filepath' to save and get file path
Base64 image: Set output='raw' to get base64 data for tags
Custom styling: Use backgroundColor, width, height, and plotlyConfig options

Plotly Code Example: Plotly.newPlot('plotly-chart', [{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16], type: 'scatter' }], { margin: { t: 0 } });

ParametersJSON Schema

Name	Required	Default
`width`	No
`format`	No	svg
`height`	No
`output`	No	link
`quality`	No
`filePath`	No
`plotlyCode`	Yes
`responsive`	No
`displaylogo`	No
`displayModeBar`	No
`backgroundColor`	No
`modeBarButtonsToRemove`	No

TDQS

A4.3/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations beyond title, the description effectively discloses key behaviors: output types (link returns localhost URL, filepath saves to disk, raw returns base64), custom styling options, and examples. It does not mention error cases or side effects, but the rendering behavior is well explained.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with bullet points and examples. It is relatively long but each section adds value: purpose, output options, multiple examples. Front-loaded with the main purpose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has 12 parameters and no output schema, the description covers the required plotlyCode, output formats, styling, and return behavior for each output type. It could mention that the localhost URL is temporary or that file path requires write permissions, but overall is complete enough.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Despite 0% schema description coverage, the description adds significant meaning by explaining output options, format, and styling parameters (backgroundColor, width, height). The example code illustrates the required plotlyCode structure, compensating for the lack of per-parameter descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it renders Plotly charts to multiple formats (SVG, PNG, JPG, PDF). It distinguishes from sibling tool render_mermaid by focusing on Plotly, a different charting library.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit usage guidance through examples for different output options (link, filepath, raw) and mentions the required plotlyCode. It implicitly differentiates from render_mermaid but does not explicitly state when not to use this tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A4/5.0

Disambiguation5/5

The two tools serve clearly distinct purposes: one renders Mermaid diagrams, the other renders Plotly charts. There is no overlap in functionality, so an agent can easily select the correct tool based on the desired output type.

Naming Consistency5/5

Both tools follow a consistent 'render_' prefix naming pattern, clearly indicating their action and distinguishing them by the library they support (mermaid vs plotly). This makes the naming predictable and easy to understand.

Tool Count4/5

With only two tools, the count is on the lower side but appropriate for a server focused on rendering two distinct visualization libraries. Each tool is justified by the different input formats and rendering engines, so the count feels reasonable for the scope.

Completeness4/5

The server covers the core functionality for rendering diagrams from two popular libraries. While it could include additional libraries or a generic render tool, the current set is sufficient for its stated purpose and has no obvious gaps in the rendering workflows.

Maintenance

ActivityInactive

ResponsivenessSyncing

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

ChartPane
io.github.ahmadsl
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Developer Tools Data Platforms
21
blinkpdf
io.blinkpdf
Render Markdown and LLM output into accessible PDF/UA-1 PDFs. No headless Chromium.
Developer Tools
2
mcp A
io.github.pictify-io
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Image & Video Processing Multimedia Processing
262
Aspicio A
io.github.frontsail-ai
DXF and PDF/X-4 for AI agents: structured facts, PNG renders, an interactive in-chat viewer.
Design Tools Workplace & Productivity
834

Related MCP Servers

Mermaid MCP Server
Developer Tools Software Architecture
wwwzhouhui
A
license
A
quality
B
maintenance
A Model Context Protocol server that converts Mermaid diagram code into various image formats (PNG, JPG, SVG, PDF) with theme customization options for AI clients.
Updated 11 days ago (2026-08-23 08:55 UTC)
3
9
MIT
Excalidraw MCP App Server
Software Architecture Developer Tools App Automation
functionstackx
F
license
Not graded
quality
D
maintenance
Enables users to create and interact with hand-drawn sketches and architecture diagrams directly within chat interfaces using Excalidraw. It leverages the Model Context Protocol to provide interactive HTML visualizations with smooth viewport control and fullscreen editing capabilities.
Updated 7 months ago (2026-02-07 01:51 UTC)
UML-MCP
Software Architecture Developer Tools
antoinebou12
A
license
A
quality
A
maintenance
Generates UML and other diagrams (30+ types) via the Model Context Protocol, supporting multiple output formats and deployment options.
Updated a day ago (2026-09-02 02:55 UTC)
4
97
MIT
Draw.io MCP Server
Design Tools Software Architecture
Geoffrey-Fang
A
license
C
quality
D
maintenance
Enables AI models to create and manage various types of diagrams (flowcharts, UML, network diagrams, etc.) via the Model Context Protocol.
Updated a year ago (2025-07-24 01:14 UTC)
26
91
6
ISC

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

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/niradler/diagram-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

Diagram MCP Server

Features

Installation

Local Installation

Docker Installation

Development

Usage

Available Tools

1. render_mermaid

2. render_plotly

3. convert_to_image

MCP Configuration

Supported Chart Types

Mermaid Diagrams

Plotly Charts

Examples

Mermaid Flowchart

Mermaid Sequence Diagram

Plotly Scatter Plot

Error Handling

Dependencies

License

Available Tools

TDQS

TDQS

TDQS

Maintenance

Resources

Looking for Admin?

Related MCP Connectors

Related MCP Servers

Mermaid MCP Server

Excalidraw MCP App Server

UML-MCP

Draw.io MCP Server

Latest Blog Posts

MCP directory API

1. `render_mermaid`

2. `render_plotly`

3. `convert_to_image`