mermaid-to-excalidraw-mcp
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., "@mermaid-to-excalidraw-mcpCreate a sequence diagram for a login flow and save to login.excalidraw.md"
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.
mermaid-to-excalidraw-mcp
MCP server that converts Mermaid diagrams to styled Excalidraw files.
Generated with Claude Code. AI slop included, but it helps me every day :)
The Problem
When asking Claude to create diagrams, you have two bad options:
Generate Excalidraw JSON directly - Works, but costs ~500 tokens per shape. A simple 5-node diagram = 2500+ tokens of JSON in Claude's response.
Use existing mermaid-to-excalidraw - Token-efficient input, but strips all colors and requires a browser.
Related MCP server: mermaid-live-mcp
The Solution
This MCP server lets Claude write compact Mermaid (30 tokens) and outputs styled .excalidraw.md files directly to disk - no tokens wasted on JSON output.
You: "Create an architecture diagram: React -> API -> PostgreSQL + Redis"
Claude writes: ~50 tokens of Mermaid
Output: Styled diagram saved to file
Setup
git clone https://github.com/yannick-cw/mermaid-to-excalidraw-mcp
cd mermaid-to-excalidraw-mcp && npm install && npm run buildAdd to ~/.claude.json:
{
"mcpServers": {
"mermaid-excali": {
"command": "node",
"args": ["/absolute/path/to/mermaid-to-excalidraw-mcp/dist/index.js"]
}
}
}Usage
Just ask Claude to create a diagram and specify where to save it:
"Create an ER diagram for a blog system with users, posts, and comments. Save to ~/diagrams/blog.excalidraw.md"
The output file opens directly in Obsidian (with Excalidraw plugin) or can be imported to excalidraw.com.
Features
Diagram types: Flowcharts, sequence diagrams, ER diagrams
Semantic colors - Add a directive to color nodes by type:
%%{excali: styles: {FE: ui, API: api, DB: db, Cache: cache}}%%
flowchart TD
FE[React App] --> API[Node Service]
API --> DB[(PostgreSQL)]
API --> Cache[Redis]Available styles: ui api db cache queue gateway external agent storage user orchestrator problem solution highlight
Connected arrows - shapes stay linked when you move them
Embedded source - original Mermaid preserved in the file for portability
More Examples


Inspired by
mermaid-to-excalidraw - the original, browser-based
obsidian-excalidraw-plugin - what makes
.excalidraw.mdwork
Available Tools
2 toolsconvertA
Convert a Mermaid diagram to a styled Excalidraw file in Obsidian format. Supports flowcharts, sequence diagrams, and ER diagrams. Use %%{excali: styles: {nodeId: styleType}}%% directive for explicit styling. Style types: ui, api, db, cache, queue, gateway, external, agent, storage, user, orchestrator, problem, solution, highlight.
| Name | Required | Description | Default |
|---|---|---|---|
| mermaid | Yes | Mermaid diagram source. Supports flowchart/graph, sequenceDiagram, and erDiagram. Add %%{excali: styles: {A: db, B: api}}%% for explicit colors. | |
| outputPath | No | File path to write the .excalidraw.md file. RECOMMENDED: Always provide this to avoid large responses. If not provided, returns the full content (token-heavy). |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It discloses that the tool performs conversion, supports specific diagram types, supports explicit styling directives, and that outputPath affects response size/token weight. This covers key behavioral expectations reasonably well for a conversion tool, though it doesn't specify failure modes or unsupported Mermaid features.
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 reasonably concise and front-loaded with the core purpose. It lists supported types and style categories efficiently. The style list is slightly long but necessary for an agent to know valid values. No wasted sentences, though the style list could arguably be trimmed or referenced to the sibling tool.
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 2-parameter tool with 100% schema coverage and no output schema, the description covers the key aspects: supported diagram types, styling mechanism, style taxonomy, and outputPath guidance. It doesn't explain return format or failure behavior, but the tool is relatively simple. The description is complete enough for an agent to use it effectively.
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 both parameters have adequate schema documentation. The description adds value by explaining the styling directive format and providing an example (%{excali: styles: {A: db, B: api}}%). Since the schema already covers parameter meaning well, baseline 3 is appropriate per the rubric.
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 verb (convert), the resource (Mermaid diagram → Excalidraw file in Obsidian format), and explicitly lists supported diagram types (flowcharts, sequence, ER). It distinguishes itself from the sibling list_styles tool by having an entirely different purpose (conversion vs. listing).
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 explains when to use explicit styling via the %%{excali}%% directive and what style types are available. However, it doesn't explicitly state when NOT to use this tool or name alternatives beyond the implied sibling. It gives clear context on optional outputPath usage for practical reasons (avoiding large token-heavy responses), which is useful guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_stylesB
List all available style types and their colors
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It's a read-only listing operation, but the description doesn't state whether it performs a safe read, whether it requires network access, returns cached data, or what the output format looks like. For a zero-parameter tool, some behavioral context would be valuable.
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 concise sentence that conveys the full purpose. Zero wasted words, no redundancy with the name, and appropriately brief for a simple, parameterless tool.
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 (no parameters, no output schema, no annotations), so the completeness bar is relatively low. However, the description could benefit from noting what kind of output this returns (e.g., a list of style names with color values) since there's no output schema to clarify the return format. For a list tool, the response shape matters for downstream use.
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 tool has zero parameters, so there's nothing for the description to add beyond schema. The baseline of 4 applies for a tool with no parameters. The description appropriately doesn't waste space on parameter details that don't exist.
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 lists all available style types and their colors. The verb 'List' plus the resource 'style types' gives a clear purpose. It doesn't explicitly distinguish from the sibling 'convert' tool, but the action is specific enough that confusion is unlikely given they perform different operations.
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 this is a discovery/enumeration tool used to see available style types, which would logically precede a conversion action. However, there's no explicit statement of when to use it vs alternatives, nor any mention of when it would be relevant (e.g., before using 'convert').
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
2 tool updates
v0.1.0- First observed
convert - First observed
list_styles
TDQS
The two tools are clearly distinct: convert performs a transformation action, while list_styles retrieves metadata. There's no overlap in purpose. The only minor concern is that list_styles could arguably be a helper within convert, but as separate tools they're unambiguous.
Both tools use a consistent verb-first snake_case pattern: convert and list_styles. The naming follows a predictable convention with concise, descriptive verbs that clearly indicate the action each tool performs.
With only 2 tools for what appears to be a conversion-focused server, the surface feels quite thin. A tool like this would reasonably benefit from additional tools such as getting validation feedback, converting to different output formats, or inspecting diagrams before conversion. Two tools barely constitutes a functional server.
The core conversion workflow is covered (convert + style discovery), but there are notable gaps. There's no validate/preview tool to check a Mermaid diagram before converting, no way to batch convert multiple diagrams, and no handling for additional diagram types beyond the three mentioned. The surface works for basic usage but has dead ends.
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
Render, verify, describe, and safely edit Mermaid diagrams through MCP.
Markdown-based note-taking with a hosted MCP server. Your notes serve you and your AI.
Create and manage Mermaid.js flowcharts and diagrams with AI agents via MCP.
Collaborative whiteboard MCP server — create objects, connectors, C4 diagrams, and manage boards
Related MCP Servers
- AlicenseBqualityAmaintenanceAn MCP server that generates beautiful Excalidraw architecture diagrams with perfect auto-layout, stateful editing, and architecture-aware component styling.26148MIT
- FlicenseNot gradedqualityDmaintenanceMCP server that generates Mermaid diagrams with live browser preview, supports real-time rendering and SVG/PNG export.12-
- FlicenseAqualityBmaintenanceAn MCP server that generates standalone SVG architecture diagrams from text descriptions, running entirely on your machine with no dependencies or network access.8-
- AlicenseAqualityAmaintenanceAn MCP server that renders Mermaid diagram syntax to PNG, SVG, PDF, or draw.io format, enabling LLMs to convert diagram descriptions into actual images.176MIT
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/yannick-cw/mermaid-to-excalidraw-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server