mermaid-collab

# Mermaid Collaboration Tool

This skill helps you create, edit, and collaborate on Mermaid diagrams and UI wireframes using the claude-mermaid-collab server.

## What This Tool Provides

- **Real-time Diagram Editor**: Live preview with pan, zoom, and auto-save for Mermaid diagrams
- **Real-time Document Editor**: Markdown document collaboration with live preview
- **UI Wireframe Plugin**: Text-based wireframe creation for mobile, tablet, and desktop
- **Team Collaboration**: Real-time updates across all connected clients via WebSocket
- **File-Based Storage**: Simple `.mmd` and `.md` files for version control
- **Unified Dashboard**: Browse and manage both diagrams and documents in one place
- **MCP Integration**: Create and manage diagrams and documents directly from Claude Code

## Running the Server

The server can be run from any directory. Use `STORAGE_DIR` to specify where diagrams and documents are stored.

**Run from the claude-mermaid-collab repository:**
```bash
# Store diagrams/docs in a specific project directory
STORAGE_DIR=/path/to/your/project bun run src/server.ts

# Or store in current directory (default)
bun run dev
```

The server starts on `http://localhost:3737`. The `PUBLIC_DIR` (HTML/CSS/JS) is always resolved relative to the server installation, so static files work regardless of where you run it from.

## When to Use This Skill

Use this skill when you need to:
- Create flowcharts, state diagrams, sequence diagrams, or any Mermaid diagram
- Design UI wireframes and mockups with text-based syntax
- Write and collaborate on markdown documentation, specs, or notes
- Collaborate with team members in real-time on diagrams or documents
- Quickly prototype and iterate on visual designs
- Document workflows, architectures, or processes
- Create technical documentation with live preview

## MCP Tools Available

The server provides these MCP tools through Claude Code:

### Diagrams
- `list_diagrams()` - List all diagrams with metadata
- `get_diagram