How do I update existing diagrams without overwriting them?

The skill provides a 'patch' tool that allows Claude to perform efficient search-and-replace edits, making it ideal for small, targeted changes to large files.

What types of diagrams can I create with this skill?

You can create all standard Mermaid-supported diagrams, including flowcharts, sequence diagrams, and state diagrams, as well as specialized text-based UI wireframes.

Can I use this for UI/UX prototyping?

Absolutely. It includes a custom wireframe plugin with specific syntax for mobile, tablet, and desktop layouts, including components like AppBars, Buttons, and Grids.

Does this skill support real-time team collaboration?

Yes, it utilizes a dedicated server and WebSockets to synchronize edits across all connected clients, allowing teams to see changes instantly in the browser.

Where are my diagrams and documents stored?

All content is stored as standard .mmd and .md files in your specified local storage directory, making it easy to manage via version control like Git.

Mermaid Diagram & UI Collaboration

Name: Mermaid Diagram & UI Collaboration
Author: ben-mad-jlp

byben-mad-jlp

0•

协作工具

Generates and manages real-time Mermaid diagrams, UI wireframes, and collaborative documentation through a dedicated MCP server.

This skill empowers Claude Code to act as a visual architect and technical writer by integrating with a real-time Mermaid collaboration server. It allows users to create, edit, and synchronize flowcharts, sequence diagrams, and text-based UI wireframes with live browser previews. Beyond visual modeling, it provides a robust collaborative markdown environment with a built-in review workflow—featuring comments, proposals, and approvals—making it an essential tool for teams who need to bridge the gap between AI-driven development and visual technical documentation.

主要功能

01Multi-user synchronization via WebSockets for seamless team collaboration

020 GitHub stars

03Collaborative markdown document editor with integrated review and approval states

04MCP-powered 'patching' capability for efficient, targeted updates to large diagrams

05Text-based UI wireframing syntax for mobile, tablet, and desktop viewports

06Real-time Mermaid diagram editing with live pan, zoom, and auto-save

使用场景

01Rapidly prototyping UI mockups and user flows directly from the command line

02Co-authoring technical specifications and ADRs with real-time feedback loops

03Visualizing complex system architectures and sequence flows during planning

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ben-mad-jlp/claude-mermaid-collab mermaid-collab

For use in Claude.ai and ChatGPT

Download Skill