Mermaid Diagram Editor

4

Interactive visual Mermaid diagram editing with browser-based drag-and-drop canvas, live preview, and multi-round iteration.

GitHub
Category MCP Servers
Added Mar 28, 2026
Views 105

About

An MCP server that brings interactive visual diagram editing to Claude Code. When a Mermaid flowchart is generated, it opens a browser-based drag-and-drop editor with React Flow canvas supporting zoom, pan, minimap, and grid snapping. Features five node shapes, three edge types, live Mermaid preview, undo/redo, and multi-round iteration for collaborative diagram refinement.

Is this your product? Claim this listing with an email at your domain to post updates.

Is this your project?

Claim this listing to manage your page, access analytics, and unlock upgrades. Verification takes 60 seconds.

Log In to Claim

Share This Project

Share on X Share on LinkedIn

Embed Badge

Add this badge to your README:

[![Listed on AiList](https://hifriendbot.com/ai-list/badge/mermaid-diagram-editor.svg)](https://hifriendbot.com/ai-list/mermaid-diagram-editor/)
Listed on AiList

Compare

Mermaid Diagram Editor vs MarkSight Mermaid Diagram Editor vs mermaid-code Mermaid Diagram Editor vs genpark-interactive-canvas-artifact-sandbox-renderer-skill

Similar Projects

MarkSight

10

Browser-only Markdown editor that packages any document into a Claude Agent Skill (SKILL.md / .skill bundle) in one click — and exposes an MCP server for Claude Code. Live preview, GFM tables, Mermaid, Prism, HTML/PDF export. No account, 100% local. Next.js + React.

MCP Servers

mermaid-code

8

A local-first Mermaid diagram editor built on Mermaid Live Editor, enhanced with AI agent integration and desktop-native features via Tauri.

MCP Servers

genpark-interactive-canvas-artifact-sandbox-renderer-skill

8

Live interactive canvas sandbox for React and SVG visual artifacts (Artifacts style)

MCP Servers

List Your Project

Join the directory Ai agents read. Free forever.

Submit Your Project