Click on "Deploy 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., "@diagram-mcp Render a flowchart showing signup -> verify -> welcome as a PNG"
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 server that renders diagram-as-code text to PNG files on your disk. No browser, no network, no external service. Useful for generating flowcharts to drop into docs, tickets or READMEs.
render_diagram: code to a PNG, returns the file path
preview_diagram: draws the diagram as text art, straight into the conversation, writes no file
validate_diagram: parse and report errors with line numbers, writes nothing
diagram_syntax: the language reference
Related MCP server: diagrams-mcp
Requires Node 20.12+.
git clone https://github.com/JVmano/diagram-mcp.git
cd diagram-mcp
npm install
npm run buildThen register it with Claude Code:
claude mcp add diagram --scope user \
--env DIAGRAM_MCP_OUTPUT_DIR=$HOME/Documents/diagram-renders \
-- node "$(pwd)/dist/index.js"Or add it by hand to .mcp.json / your user config:
{
"mcpServers": {
"diagram": {
"type": "stdio",
"command": "node",
"args": ["/absolute/path/to/diagram-mcp/dist/index.js"],
"env": { "DIAGRAM_MCP_OUTPUT_DIR": "/absolute/path/to/renders" }
}
}
}Restart the session, then ask for a diagram. Run npm run build again after pulling changes.
title "Reward approval flow"
direction TB
node event "Conversion recorded" shape=rounded
node auto "Auto-approve?" shape=diamond size=200x100
node queue "Manual review queue"
event -> auto
auto -> queue "no"Shapes: rect, rounded, ellipse, diamond, hexagon. Connections: from -> to ["label"] [style=solid|dashed]. Positions with at=x,y are optional. Leave them out and the layout places the shapes. Call diagram_syntax for the full reference.
All optional, all with defaults. See .env.example. Renders go to DIAGRAM_MCP_OUTPUT_DIR (default ~/Documents/diagram-renders). An explicit outputPath must stay inside that directory or the working directory unless DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH=true.
npm test # unit tests
npm run test:e2e # builds, then drives the server over stdio
npm run verify # typecheck, test, build, e2eThe parser, layout and SVG generation in src/core are shared with a local diagram editor project; npm run check:sync diffs them against it when it is checked out next door.
MIT
Return the full diagram-as-code language reference, with shapes, options and a worked example.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark it read-only, idempotent, and non-destructive, so the description only needs to add context; it does by specifying the returned content (shapes, options, worked example). It doesn't describe output format or size, but that is not a contradiction and the safety profile is already covered.
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?
Single sentence, front-loaded with the action, no filler. Every component 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 zero-parameter read-only reference tool, the description is nearly complete: it states the resource and its contents. It could clarify the output representation (e.g., Markdown vs plain text), but the annotations and simple call contract make this a minor gap.
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?
There are zero parameters, so the schema imposes no burden; the description's content reference (shapes, options, example) indirectly explains what a caller would receive, but no parameter-specific meaning is needed. Baseline 4 applies.
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 a specific verb ('Return') and resource ('full diagram-as-code language reference'), and enumerates contents (shapes, options, worked example). The reference nature clearly separates it from sibling tools that render, validate, or preview 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?
No explicit when-to-use or exclusion of siblings, but the purpose is self-evident: call when the agent needs the language reference rather than operating on a diagram. The description implies usage but does not name alternatives or conditions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Draw the diagram as text art so it can be shown directly in the conversation. Writes no file. Use render_diagram when a PNG is needed.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Diagram source code. Call diagram_syntax for the language reference. | |
| maxCols | No | Width of the drawing in characters. Default 110. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover read-only, idempotent, and non-destructive traits. The description adds the meaningful behavioral guarantee 'Writes no file' and clarifies the output medium, going beyond the structured annotations without contradicting them.
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 with no filler; the core behavior is stated first, the side-effect guarantee second, and the alternative routing last. 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?
The tool is simple, the schema documents both parameters, and annotations cover safety. The description supplies the missing pieces (text output, no file write, alternative for PNG), making it fully callable without further inference.
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?
Input schema coverage is 100%: both code and maxCols have descriptions including the default width. The tool description itself adds no parameter-level meaning, so the schema carries the burden; baseline 3 is appropriate.
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 states a specific verb ('draw') and resource ('diagram'), and defines the output form as text art for direct conversation display. It also explicitly distinguishes itself from render_diagram, so an agent can tell them apart.
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?
It gives an explicit when-to-use context (when text display is needed in conversation) and names the alternative (render_diagram) for the PNG case. This is enough routing guidance for siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Render diagram-as-code text to a PNG file and return the path. Runs locally with no browser and no network. Returns an error listing the offending line numbers if the code does not parse.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Diagram source code. Call diagram_syntax for the language reference. | |
| name | No | Base name for the file, without extension. Defaults to the diagram title. | |
| scale | No | Pixel density multiplier. Default 2. | |
| padding | No | Margin around the diagram in pixels. Default 40. | |
| overwrite | No | Replace an existing file with the same name. Default false, which adds a numeric suffix. | |
| background | No | Default white. Use transparent for docs with a dark theme. | |
| outputPath | No | Exact path to write, ending in .png. Must sit inside the render directory or the working directory unless DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH is set. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations are all false and convey little, so the description carries the burden. It adds meaningful behavior: local/offline rendering, returning a file path, and reporting parse errors with offending line numbers. It does not detail overwrite/persistence behavior, but that is covered by the overwrite parameter schema.
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 dense, front-loaded sentences: the first names the action and result, the second gives execution environment and error behavior. There is no filler or redundant restatement.
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?
Even without an output schema, the description explains the return value ('return the path') and error case ('error listing the offending line numbers'). Combined with full parameter schema coverage, the agent has enough information to invoke the tool correctly and interpret results.
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 description coverage is 100%, so the description does not need to compensate for undocumented parameters. It adds only general context like 'diagram-as-code text,' which maps to the code parameter but does not go beyond what the schema already provides.
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 a specific verb and resource: 'Render diagram-as-code text to a PNG file and return the path.' It clearly distinguishes itself from the sibling tools: validate_diagram checks code, preview_diagram probably shows a preview, and diagram_syntax is a language reference.
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 implies the use case — produce a PNG file on disk — and adds environment context ('Runs locally with no browser and no network'). However, it does not explicitly say when to prefer render_diagram over validate_diagram or preview_diagram, nor does it mention any exclusion criteria.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Parse diagram code and report errors and warnings with line numbers, without writing any file.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Diagram source code. Call diagram_syntax for the language reference. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already mark the tool as readOnly, idempotent, and non-destructive; the description reinforces this with 'without writing any file' and adds the useful behavioral detail that diagnostics include line numbers. It doesn't contradict the annotations and adds meaningful context beyond the structured hints.
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?
A single front-loaded sentence states the core behavior and side-effect profile with no filler. Every part carries information: parse, report errors/warnings, line numbers, no file write.
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 one-parameter, read-only validation tool with annotations covering safety, the description is nearly complete: purpose, diagnostic behavior, and side-effect profile are all present. It loses a point because there is no output schema and the description does not specify the exact diagnostic return shape or how success with no errors is represented.
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?
The only parameter 'code' is fully documented in the schema, including a pointer to diagram_syntax for language reference. The tool description itself adds no parameter-level detail, so the baseline of 3 applies.
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 uses a specific verb ('parse') and resource ('diagram code'), and clearly states the outcome: report errors and warnings with line numbers. This distinguishes it from siblings render_diagram and preview_diagram by focusing on validation, and from diagram_syntax by being an operation rather than a reference.
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 intended use is implied by the name and description: use it to check diagram code for errors and warnings. However, it never explicitly says when to choose validate_diagram over render_diagram or preview_diagram, and the only alternative mentioned in the schema ('Call diagram_syntax') is a language reference, not a validation alternative.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0diagram_syntaxpreview_diagramrender_diagramvalidate_diagramScored across 4 tools
Each tool has a distinct purpose: syntax reference, validation, text preview, and PNG rendering. The descriptions clearly differentiate the outputs, and render_diagram explicitly notes when to use it over preview_diagram.
Three tools follow the verb_diagram pattern (render_diagram, validate_diagram, preview_diagram), while diagram_syntax reverses the order. The convention is still readable and consistent in style, with only a minor deviation.
Four tools is well-scoped for a diagram-as-code server. Each tool covers a necessary part of the workflow without redundancy or unnecessary bulk.
The toolset covers the full authoring loop: learn the syntax, validate the code, preview as text, and render to a PNG file. There are no obvious missing operations for the stated local rendering purpose.
Render, validate, encode/decode PlantUML diagram-as-code; 22 diagram types. Free, no auth.
Render, verify, describe, and safely edit Mermaid diagrams through MCP.
Diagrams, badges, charts and QR codes as plain image URLs you can paste into Markdown.
Create, validate, edit, export (markdown/svg/png/mermaid), and search JSON Canvas files.
