Skip to main content
Glama
yannick-cw

mermaid-to-excalidraw-mcp

by yannick-cw

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:

  1. Generate Excalidraw JSON directly - Works, but costs ~500 tokens per shape. A simple 5-node diagram = 2500+ tokens of JSON in Claude's response.

  2. 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

Example flowchart

Setup

git clone https://github.com/yannick-cw/mermaid-to-excalidraw-mcp
cd mermaid-to-excalidraw-mcp && npm install && npm run build

Add 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

Sequence diagram

ER diagram

Inspired by

Available Tools

2 tools
convertA

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
mermaidYesMermaid diagram source. Supports flowchart/graph, sequenceDiagram, and erDiagram. Add %%{excali: styles: {A: db, B: api}}%% for explicit colors.
outputPathNoFile 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

A4.1/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.4/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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.

  1. 2 tool updatesv0.1.0
    • First observedconvert
    • First observedlist_styles

TDQS

A3.6/5.0
Disambiguation4/5

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.

Naming Consistency5/5

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.

Tool Count2/5

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.

Completeness3/5

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

ActivityInactive
ResponsivenessSyncing

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

Related MCP Servers

  • F
    license
    Not graded
    quality
    D
    maintenance
    MCP server that generates Mermaid diagrams with live browser preview, supports real-time rendering and SVG/PNG export.
    12
    -
  • F
    license
    A
    quality
    B
    maintenance
    An MCP server that generates standalone SVG architecture diagrams from text descriptions, running entirely on your machine with no dependencies or network access.
    8
    -

Latest Blog Posts

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