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即可开始使用 示例代码流程图是否开始条件判断执行操作A执行操作B结束序列图数据库系统用户数据库系统用户发起请求查询数据返回结果展示页面类图Person-String name-int agevoid sayHello()Student-String schoolvoid study()️ 技术栈框架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