Mermaid Renderer：一款的图表可视化小工具

🚀 Mermaid Renderer：一款的图表可视化小工具

基于 Vue 3 + Vite + Mermaid 构建，让图表绘制变得简单高效！

🌟 产品简介

Mermaid Renderer 是一款专为开发者打造的 Mermaid 图表编辑器和渲染器，小巧易用的小工具

✨ 核心特性

📊 实时渲染预览

• 左右分栏设计：左侧输入代码，右侧实时渲染图表
• 即时响应：代码修改即时反映到预览区域
• 所见即所得：完美呈现最终效果

💾 多格式导出

支持导出为多种格式，满足不同场景需求：

• PNG：无损压缩，适合文档嵌入和分享
• JPEG：高效压缩，适合网络传输
• SVG：矢量格式，支持无限放大不失真

📋 一键复制到剪贴板

无需导出即可将图表复制到剪贴板，方便快速分享和粘贴到文档中。

🔍 灵活缩放控制

• 鼠标滚轮缩放：在预览区域滚动即可调整大小
• 缩放按钮：提供放大、缩小、重置按钮
• 缩放范围：支持 25% - 400% 的缩放比例

🎯 高清输出保障

导出图片最小分辨率保证1024×768，确保文字清晰可读，图表细节完美呈现。

🎮 使用场景

1. 文档编写

快速生成流程图、架构图、时序图，嵌入技术文档和 README 文件。

2. 团队协作

与团队成员共享图表，支持导出多种格式，方便协作和沟通。

3. 教学演示

在教学和演示中实时展示图表，提升讲解效率。

4. 设计评审

快速绘制原型图和流程图，进行设计评审和讨论。

🚀 快速开始

# 克隆项目gitclone https://gitee.com/galaxy_0/mermaid-tool.git# 进入项目目录cdmermaid-tool# 安装依赖npminstall# 启动开发服务器npmrun dev

访问http://localhost:5173即可开始使用！

📝 示例代码

流程图

序列图

类图

🛠️ 技术栈

• 框架：Vue 3 (Composition API)
• 构建工具：Vite 5
• 图表库：Mermaid 11
• 语言：JavaScript (ES6+)

📁 项目结构

mermaid-tool/ ├── index.html # 入口 HTML ├── package.json # 项目配置 ├── vite.config.js # Vite 配置 ├── README.md # 使用文档 ├── LICENSE # 开源协议 └── src/ ├── main.js # 应用入口 ├── style.css # 全局样式 └── App.vue # 主组件

📄 开源协议

本项目采用MIT License，欢迎自由使用、修改和分发。

🤝 贡献指南

我们欢迎任何形式的贡献！如果您有任何问题或建议，欢迎提交 Issue 或 Pull Request。

项目地址：https://gitee.com/galaxy_0/mermaid-tool