Skills
.Work. You
Rest

mermaid-collab

Community

Collaborate on Mermaid diagrams in real time.

Design & Creative#collaboration#mermaid#Claude Code#real-time#diagrams#wireframes#websocket
Authorben-mad-jlp
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Teams often need to design and review Mermaid diagrams and UI wireframes collaboratively in real time, which is difficult with static, offline tools.

Core Features & Use Cases

  • Real-time Diagram Editor with live Mermaid rendering and versioned storage (.mmd files)
  • Real-time Document Editor for Markdown collaboration (.md)
  • UI Wireframe Plugin for text-based wireframes across mobile, tablet, and desktop
  • WebSocket-based synchronization across connected clients for instant updates
  • Unified dashboard to manage diagrams and documents and invite teammates
  • Claude Code integration (MCP) to create and manage diagrams and documents from the editor

Quick Start

Run the Mermaid Collab server in your project directory (e.g., bun run src/server.ts or bun run dev) and open http://localhost:3737 to start creating diagrams and documents with live collaboration.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mermaid-collab
Download link: https://github.com/ben-mad-jlp/claude-mermaid-collab/archive/main.zip#mermaid-collab

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.