skills.rest
ben-mad-jlp
ben-mad-jlpCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-collab

Enables synchronized WebSocket-based editing of Mermaid diagrams and Markdown documents on a Bun server.

Updated Jan 12, 2026
Search Tags:#collaboration#mermaid#Claude Code#real-time#diagrams#wireframes#websocket
One-click install
npx skills add https://github.com/ben-mad-jlp/claude-mermaid-collab --skill mermaid-collab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-collab
Source: https://github.com/ben-mad-jlp/claude-mermaid-collab/tree/main/skills/mermaid-collab
Command: npx skills add https://github.com/ben-mad-jlp/claude-mermaid-collab --skill mermaid-collab

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about mermaid-collab

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I collaborate on Mermaid diagrams in real time within Claude Code?▼

You can collaborate on Mermaid diagrams by running a Bun-based server with WebSocket support to synchronize live edits across connected clients. This enables instant updates for team design sessions and architecture reviews directly within Claude Code.

Can I edit Markdown documents and UI wireframes with my team using WebSockets?▼

Yes, the server supports real-time document editing for Markdown (.md) files and UI wireframes across mobile, tablet, and desktop breakpoints. WebSocket synchronization ensures all connected clients receive instant text and diagram updates.

Do I need Bun to run the Mermaid Collab server?▼

Yes, you need a Bun-based server environment to run the WebSocket synchronization and manage local storage for .mmd and .md files. You start the server in your project directory using commands like bun run and access it via http://localhost:3737.

What is the best way to manage and invite teammates to live architecture diagram sessions?▼

The best way to manage live architecture diagram sessions is through the unified dashboard, which allows you to create diagrams and documents and invite teammates. Claude Code integration (MCP) also lets you manage these resources directly from the editor.

How does versioned storage work for .mmd diagram files?▼

Versioned storage for .mmd files saves Mermaid diagram states within your project directory during real-time collaboration. This ensures that synchronized, editable diagrams are locally stored and managed through the Bun-based server environment.

Related Skills

Explore More Design & Creative Skills→
miketrombamiketromba
2

bun

Document Bun JavaScript runtime APIs, bundling, package management commands, and test runner usage.

Community
Intermediate
RamanEbrahimiRamanEbrahimi
3

markdown-mermaid-writing

Generate scientific documentation with Markdown and Mermaid diagrams.

Community
Advanced
0xsline0xsline
907

openchatcut

Integrate MCP-capable coding agents with OpenChatCut for programmatic video editing.

Community
Advanced
family3253family3253

mermaid-visualizer

Convert plain text content into syntactically valid Mermaid diagrams.

Community
Advanced