How does it facilitate collaboration with Claude?

The tool enables multi-round iteration by allowing users to make visual edits to a diagram and then submit those changes back to Claude, fostering a seamless collaborative design workflow.

What kind of diagrams can I create or edit?

Software Design Mermaid is specifically designed for editing and creating Mermaid flowcharts, supporting various node shapes and edge styles to accurately represent your designs.

What is Software Design Mermaid?

Software Design Mermaid is an MCP server that provides an interactive, browser-based visual editor for Mermaid diagrams directly within Claude Code, enabling collaborative modification of flowcharts.

What editing features does the visual editor include?

It offers a full drag-and-drop React Flow canvas with zoom, pan, and grid snapping, 5 distinct node shapes, 3 edge types with inline label editing, a live Mermaid code preview, and full undo/redo functionality.

Software Design Mermaid

Name: Software Design Mermaid
Author: wzh4464

bywzh4464

•

コラボレーションツール

デザインツール

開発者ツール

Provides an interactive visual editor for Mermaid diagrams within Claude Code, enabling users to modify and refine flowcharts collaboratively.

Enhance your Claude Code experience with an interactive visual editor for Mermaid diagrams. This MCP server automatically launches a browser-based drag-and-drop interface when Claude generates a Mermaid flowchart, allowing you to intuitively rearrange nodes, edit labels, add or remove elements, and submit changes back to Claude for multi-round visual collaboration and refinement.

主な機能

01Drag-and-drop editor with full React Flow canvas, zoom, pan, and grid snapping.

020 GitHub stars

03Support for 5 distinct node shapes and 3 edge types with inline label editing.

04Enables multi-round iteration by submitting visual edits back to Claude.

05Undo/redo functionality with full history for seamless diagram modification.

06Live Mermaid code preview that updates in real-time as you edit the diagram.

ユースケース

01Interactively designing and refining software architecture diagrams within an AI coding environment.

02Providing visual feedback and corrections to AI-generated Mermaid flowcharts.

03Collaborating on visual documentation by iterating on diagram layouts and content.