Visual Mermaid Editor / 可视化Mermaid编辑器

🎨 A Revolutionary VSCode Extension for Visual Mermaid Diagram Creation
🎨 革命性的VSCode可视化Mermaid流程图创建插件

English

🚀 Overview

Visual Mermaid Editor transforms the traditional way of creating Mermaid diagrams. Instead of writing code first, you can now create diagrams visually and export clean code. This revolutionary approach makes diagram creation intuitive, fast, and accessible to everyone.

✨ Key Features

🎨 Visual-First Approach: Drag, drop, and connect nodes visually
🔗 Smart Connection System: Precise drag connections with automatic arrow directions
📝 Bidirectional Editing: Visual ↔ Code real-time synchronization
🎯 Rich Shape Library: 30+ official Mermaid shapes and styles
🧠 Intelligent Layout: Auto-arrangement prevents node overlapping
⚡ Clean Code Generation: Generates simple A, B, C style IDs
📤 Export Ready: One-click export to Mermaid code

🖼️ Screenshots

Main Interface
Main visual editing interface with drag-and-drop functionality

Visual editor with smart connection system and property panel

🛠️ How to Use

1. Installation

Open VSCode
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search "Visual Mermaid Editor"
Click Install

2. Getting Started

Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Type "Mermaid: Open Visual Editor"
Start creating your diagram!

3. Creating Diagrams

Add Nodes: Drag shapes from the toolbar to canvas
Connect Nodes: Drag from connection points between nodes
Edit Properties: Select nodes to edit text and styles
Generate Code: Click "Export Code" to get Mermaid syntax

4. Import Existing Code

Click "Import Code" button
Paste your existing Mermaid code
Watch as it transforms into a visual diagram

🏗️ Technical Architecture

flowchart TD
    A[VSCode Extension Host] --> B[React 18 Frontend]
    B --> C[ReactFlow Canvas]
    C --> D[Node Components]
    C --> E[Edge Components]
    B --> F[Mermaid Generator]
    F --> G[Clean Code Output]
    B --> H[Import Parser]
    H --> I[Intelligent Layout]

Frontend: React 18 + TypeScript
Canvas Engine: ReactFlow for smooth interactions
Code Generation: Custom Mermaid AST generator
Layout Algorithm: Topological sorting with intelligent positioning
Extension API: VSCode Extension Framework

🧪 Development

# Clone the repository
git clone https://github.com/kevinflynn0503/mermaid-visual-editing.git

# Install dependencies
cd mermaid-visual-editing
npm install

# Start development
npm run dev

# Build extension
npm run compile

📦 Building & Publishing

# Install VSCE tool
npm install -g vsce

# Package extension
vsce package

# Publish to marketplace
vsce publish

🤝 Contributing

We welcome contributions! Please feel free to:

🐛 Report bugs via Issues
💡 Suggest features
🔧 Submit pull requests
📖 Improve documentation

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Mermaid.js - The amazing diagram syntax
ReactFlow - Powerful flow library
VSCode API - Extension development platform

中文版

🚀 项目简介

Visual Mermaid Editor 彻底改变了传统的Mermaid图表创建方式。不再需要先写代码，您现在可以直接可视化创建图表并导出简洁代码。这种革命性的方法让图表创建变得直观、快速，人人都能轻松上手。

✨ 核心特性

🎨 可视化优先: 拖拽、放置、连接节点，所见即所得
🔗 智能连接系统: 精确拖拽连接，自动箭头方向判断
📝 双向编辑: 可视化界面与代码实时双向同步
🎯 丰富形状库: 支持30+种Mermaid官方形状和样式
🧠 智能布局: 自动排列算法防止节点重叠
⚡ 简洁代码生成: 生成A、B、C风格的简洁标识符
📤 一键导出: 一键导出标准Mermaid代码

🖼️ 界面截图

主界面
主要可视化编辑界面，支持拖拽功能

编辑器界面
可视化编辑器，包含智能连接系统和属性面板

🛠️ 使用方法

1. 安装插件

打开VSCode
进入扩展面板 (Ctrl+Shift+X / Cmd+Shift+X)
搜索 "Visual Mermaid Editor"
点击安装

2. 开始使用

打开命令面板 (Ctrl+Shift+P / Cmd+Shift+P)
输入 "Mermaid: Open Visual Editor"
开始创建您的图表！

3. 创建图表

添加节点: 从工具栏拖拽形状到画布
连接节点: 从连接点拖拽到其他节点
编辑属性: 选择节点编辑文本和样式
生成代码: 点击"导出代码"获取Mermaid语法

4. 导入现有代码

点击"导入代码"按钮
粘贴您现有的Mermaid代码
观看代码转换为可视化图表

🏗️ 技术架构

flowchart TD
    A[VSCode扩展宿主] --> B[React 18前端]
    B --> C[ReactFlow画布]
    C --> D[节点组件]
    C --> E[连线组件]
    B --> F[Mermaid生成器]
    F --> G[简洁代码输出]
    B --> H[导入解析器]
    H --> I[智能布局算法]

前端框架: React 18 + TypeScript
画布引擎: ReactFlow实现流畅交互
代码生成: 自定义Mermaid AST生成器
布局算法: 拓扑排序 + 智能定位
扩展接口: VSCode Extension Framework

🧪 开发环境

# 克隆仓库
git clone https://github.com/kevinflynn0503/mermaid-visual-editing.git

# 安装依赖
cd mermaid-visual-editing
npm install

# 启动开发环境
npm run dev

# 构建扩展
npm run compile

📦 构建与发布

# 安装VSCE工具
npm install -g vsce

# 打包扩展
vsce package

# 发布到市场
vsce publish

🤝 贡献指南

我们欢迎各种形式的贡献：

🐛 通过Issues报告Bug
💡 提出功能建议
🔧 提交代码改进
📖 完善项目文档

🎯 路线图

[ ] 支持更多Mermaid图表类型
[ ] 添加主题和样式自定义
[ ] 实现协作编辑功能
[ ] 支持图表模板库
[ ] 添加导出为图片功能

📝 开源协议

本项目基于MIT协议开源 - 详见LICENSE文件

🙏 致谢

Mermaid.js - 优秀的图表语法库
ReactFlow - 强大的流程图组件库
VSCode API - 扩展开发平台

⭐ 如果这个项目对您有帮助，请给我们一个Star！
⭐ If this project helps you, please give us a Star!

Made with ❤️ by the Visual Mermaid Editor Team

Visual Mermaid Editor