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

협업 도구

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.

주요 기능

Multi-user synchronization via WebSockets for seamless team collaboration
0 GitHub stars
Collaborative markdown document editor with integrated review and approval states
MCP-powered 'patching' capability for efficient, targeted updates to large diagrams
Text-based UI wireframing syntax for mobile, tablet, and desktop viewports
Real-time Mermaid diagram editing with live pan, zoom, and auto-save

사용 사례

Rapidly prototyping UI mockups and user flows directly from the command line
Co-authoring technical specifications and ADRs with real-time feedback loops
Visualizing complex system architectures and sequence flows during planning

소개

주요 기능

Multi-user synchronization via WebSockets for seamless team collaboration
0 GitHub stars
Collaborative markdown document editor with integrated review and approval states
MCP-powered 'patching' capability for efficient, targeted updates to large diagrams
Text-based UI wireframing syntax for mobile, tablet, and desktop viewports
Real-time Mermaid diagram editing with live pan, zoom, and auto-save

사용 사례

Rapidly prototyping UI mockups and user flows directly from the command line
Co-authoring technical specifications and ADRs with real-time feedback loops
Visualizing complex system architectures and sequence flows during planning