diagrams
Mermaid MCP servers and skills
There are 67 ways to connect Mermaid to Claude, ChatGPT, Cursor and other AI assistants: 24 MCP servers and 43 skills. The most used is hustcc-mcp-mermaid (645 GitHub stars).
Best Mermaid MCP servers, compared →Most used
Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…
Render Mermaid diagrams as beautiful SVGs or ASCII art. Ultra-fast, fully themeable, zero DOM dependencies. Maintained fork of beautiful-mermaid.
MCP server for previewing Mermaid diagrams in Claude Code
Model Context Protocol server exposing zombie-mermaid's SVG and ASCII rendering as MCP tools.
Turn Mermaid diagrams into guided, step-by-step walkthroughs - a local viewer plus an MCP server that lets coding agents write the walkthrough for you
❤️ Generate mermaid diagram and chart with AI MCP dynamically.
MCP servers (24)
- 1hustcc-mcp-mermaid hustcc · DesignGenerate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…81
- 2Zombie Mermaid dfadler · DesignRender Mermaid diagrams as beautiful SVGs or ASCII art. Ultra-fast, fully themeable, zero DOM dependencies. Maintained fork of beautiful-mermaid.78
- 3Claude Mermaid veelenga · DesignMCP server for previewing Mermaid diagrams in Claude Code78
- 4Zombie Mermaid MCP dfadler · DesignModel Context Protocol server exposing zombie-mermaid's SVG and ASCII rendering as MCP tools.78
- 5Mermaid Docs bcage29 · DesignTurn Mermaid diagrams into guided, step-by-step walkthroughs - a local viewer plus an MCP server that lets coding agents write the walkthrough for you77
- 6MCP Mermaid hustcc · Design❤️ Generate mermaid diagram and chart with AI MCP dynamically.75
- 7Agentic Mermaid adewale · DesignRender, verify, describe, and safely edit Mermaid diagrams through MCP.73
- 8mermaid-render-mcp tci-nebula · DesignRenders Mermaid diagram syntax to PNG or SVG images for LLM clients65
- 9Mermaid MCP Server peng-shawn · DesignA Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images58
- 10Mermaid MCP Server peng-shawn · DesignA Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images58
- ADYour product hereThis row is seen by people browsing Mermaid tools. Book it from $249 a month.See prices →
- 11Mermaid MCP Server peng-shawn · DesignA Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images58
- 12Fast Mermaid Validator MCP ai-of-mine · DesignHigh-performance API and Model Context Protocol (MCP) server for validating Mermaid diagrams with comprehensive security features, multiple transport options, and enterprise-grade capabilities57
- 13MCP Mermaid Validator rtuin · DesignAn MCP server that validates mermaid diagrams56
- 14GenPark Markdown Mermaid Syntax Lint Healer alphaparkinc · DesignLLM output Mermaid diagram linting, unquoted bracket healing, and syntax normalization engine53
- 15Mermaid MCP Server Narasimhaponnada · DesignModel Context Protocol server for Mermaid diagram generation with GitHub Copilot integration52
- 16Mermaid Chart MCP pickstar-2002 · Knowledge and memory🎨 A Model Context Protocol (MCP) server for rendering Mermaid charts to high-quality images39
- 17Md Mermaid Chart PDF MCP skmprb · DesignA powerful MCP server with stdio/HTTP/SSE transport support for converting Markdown files and content to beautifully styled PDFs with Mermaid diagrams and ApexCharts. Features modern typography, multiple page formats, and professional styling.39
- 18Mermaid Validator MCP LF112 · DesignMCP server for validating Mermaid diagram syntax36
- 19Mermaid Png MCP alitrack · Browser automationMermaid → PNG MCP server. Two renderers: beautiful-mermaid (fast, no DOM needed for SVG) and CDN mermaid (full features, subgraphs). Both use Chromium for final PNG output.35
- 20Mermaid MCP Server ~myxvisual · DesignMermaid diagram MCP server34
- 21Mermaid Grammer Inspector MCP betterhyq · DesignA Model Context Protocol (MCP) server for validating Mermaid diagram syntax and providing comprehensive grammar checking capabilities32
- 22mermaid-mcp-app finfin · DesignMCP App that renders Mermaid diagrams as interactive UI in Claude, VS Code and other MCP clients25
- 23Abekdwight Mermaid MCP Server TanisukeGoro · DesignAn MCP server providing tools for validating and rendering Mermaid diagrams.24
- 24mermaid-mcp Mermaid-Chart · DesignMCP server for Mermaid diagram validation and rendering13
Skills (43)
- 1mermaid-flowchart-pruefung KlotzketteFür Mermaid Flowchart Prüfung: ordnet Norm, Beweislast und Gegenargument; Ergebnis: Tatbestands- oder Anspruchsmatrix.73
- 2mermaid-diagrams sammcj · DesignUse the mermaid-diagrams skill whenever you are creating or updating mermaid diagrams. Provides guidance on mermaid best practices.67
- 3fix-mermaid rp1-run · DesignValidates and repairs mermaid diagrams in markdown files. Scans for mermaid blocks, validates syntax, and auto-repairs common errors.60
- 4beautiful-mermaid drpedapati · DesignBuild publication-grade Mermaid diagrams with consistent styling and SVG-first export for manuscript assets.57
- 5mermaid ulises-jeremias · DesignWHAT — Mermaid diagrams from text (flowchart, sequence, class, state, ER, gantt, gitGraph) — Markdown-native, Git-native, MIT. Primary renderer for architecture pack; renders via GitHub native or mermaid CLI (mmdc) to SVG/PNG.48
- 6mermaid-validator aresbit · DesignAutomatically validate mermaid diagrams after creating or editing them in markdown files47
- 7Generate Mermaid Flowchart from Text THUIRExtracts key information from provided text, translates it to English, fact-checks the content, and generates valid Mermaid flowchart code with strict syntax adherence.47
- 8mermaid-diagrams RepoQL · DesignEffective Mermaid diagrams. Use when creating markdown documents with human audiences.43
- 9mermaid-diagrams RepoQL · DesignEffective Mermaid diagrams. Use when creating markdown documents with human audiences.43
- 10mermaid googollee · Documents and files将系统架构、时序图或流程图转化为标准的 Mermaid Markdown 代码。42
- 11mermaid-rs-renderer javimosch · Browser automationUse this skill when the user wants to fast native rust mermaid diagram renderer without browser.35
- 12mdbook-mermaid javimosch · DesignMermaid diagram preprocessor for mdBook projects33
- 13mermaid-to-png MichaelVessia · DesignConvert mermaid diagrams in markdown files to PNG images. Use when the user wants to export markdown with mermaid to formats that don't support mermaid (Google Docs, PDF, etc).32
- 14pi-mermaid-studio irfansofyana · DesignGuide Pi models to author validated, intentional engineering diagrams in raw Mermaid.30
- 15mermaid-viz Rixmerz · DesignMermaid diagram patterns for workflow and graph visualization in agentcockpit30
- 16mermaid-erd-creation snoodleboot-io · DesignCreate entity relationship diagrams using Mermaid syntax29
- 17mermaid Way-Of · DesignRenders Mermaid diagrams as ASCII directly in the terminal TUI. Allows the agent to visualize flows, architectures, and diagrams without leaving the CLI.28
- 18mkdocs-7-mermaid-diagrams vamseeachanta · DesignSub-skill of mkdocs: 7. Mermaid Diagrams.27
- 19mermaid pm0u · DesignGenerate a mermaid diagram from code, a description, or a traced flow26
- 20pretty-mermaid mahik504 · DesignRender Mermaid to SVG or themed ASCII. Use after diagram-generator. Not the author of architecture.26
- 21mermaid zoltanmaric · DesignGuides writing and editing Mermaid diagrams in GitHub-rendered Markdown so they remain readable across themes and preserve placeholder labels.26
- 22mermaid mholtzscherMust read guide on creating/editing mermaid charts with valiation tools26
- 23mermaid-expert HKDevLoops · DesignCreate Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.24
- 24mermaid-expert thai06052003 · DesignCreate Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling.24
- 25mermaid-fix MichaelBreitung · DesignNormalize Mermaid diagrams in Markdown docs to this repository's style. Use when a diagram looks inconsistent, washed-out, or shadowed, or a new one needs to match the others.24
- 26mermaid nathanielobrown · DesignUse when creating, editing, or reviewing Mermaid diagrams — in .mmd/.mermaid files or ```mermaid blocks in Markdown.23
- 27mermaid-style Bishnu2430 · DesignMermaid syntax rules that avoid common parse errors (quoting, node ids, arrows, diagram headers).23
- 28mermaid Drew-DanielsMust read guide on creating/editing mermaid charts with valiation tools23
- 29Mermaid Diagrams iamnih4l · DesignCreate technical diagrams using Mermaid syntax including flowcharts, sequence diagrams, ERDs, class diagrams, and Gantt charts.23
- 3009-mermaid Swiss-ai-Weeks · DesignGenerate a valid Mermaid diagram from a written source through a plan, generate, review loop. Use when the user wants to turn an architecture, lifecycle, or flow into a Mermaid diagram. Not for other diagram formats or image rendering.23
- 31mermaid-flowchart-style ouob-tw · DesignUse when styling Mermaid flowchart diagrams for GitHub, Obsidian, or MkDocs23
- 32mermaid-diagram-generator bugcaps · Design시스템 아키텍처나 사용자 플로우에 대한 설명을 입력하면, 렌더링 가능한 Mermaid 다이어그램(순서도, 시퀀스 등) 코드로 변환합니다. (예: "로그인 플로우 그려줘", "서버 아키텍처 그려줘")23
- 33mermaid-local fabiantax · DesignMermaid Local — validate and render Mermaid diagrams locally21
- 34generador-diagramas-mermaid Fstudiosmx · DesignConvierte arquitecturas, flujos y modelos de datos en diagramas Mermaid (flowchart, sequence, class, ER, state, gantt). Actívala cuando el usuario quiera visualizar un sistema, un flujo o un modelo de datos como código de diagrama.21
- 35mermaid-to-png David-Li0406 · DesignConvert mermaid diagrams in markdown files to PNG images. Use when the user wants to export markdown with mermaid to formats that don't support mermaid (Google Docs, PDF, etc).19
- 36mermaid fsalamoni · DesignRender Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.19
- 37mermaid-expert David-Li0406 · DesignCreate Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.18
- 38mermaid-er-diagram-creator David-Li0406 · DesignMermaid Er Diagram Creator - Auto-activating skill for Visual Content. Triggers on: mermaid er diagram creator, mermaid er diagram creator Part of the Visual Content skill category.18
- 39mermaid-gantt-chart-generator David-Li0406Mermaid Gantt Chart Generator - Auto-activating skill for Visual Content. Triggers on: mermaid gantt chart generator, mermaid gantt chart generator Part of the Visual Content skill category.18
- 40mermaid-state-diagram-creator SamuelChien · DesignMermaid State Diagram Creator - Auto-activating skill for Visual Content. Triggers on: mermaid state diagram creator, mermaid state diagram creator Part of the Visual Content skill category.18
- 41mermaid-diagrams gissandrogama · DesignSpecialist in generating Mermaid diagrams for Open Finance Service. Use for documenting business flows (PIX, OTP), hexagonal architecture, and sequence diagrams.16
- 42mermaid-diagrams diegocanepa · DesignCreate professional software diagrams using text-based Mermaid syntax.15
- 43mermaid-flowchart anlach · MediaRender a Mermaid flowchart as an image.13
Questions
Is there an official Mermaid MCP server?
Check the publisher on each listing: servers published by Mermaid itself are the official ones. The most used Mermaid server here is hustcc-mcp-mermaid by hustcc.
How do I connect Mermaid to Claude?
Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most Mermaid servers need an API key or token from your Mermaid account.