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

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

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

🌟 产品简介

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

✨ 核心特性

📊 实时渲染预览

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

💾 多格式导出

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

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

📋 一键复制到剪贴板

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

🔍 灵活缩放控制

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

🎯 高清输出保障

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

🎮 使用场景

1. 文档编写

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

2. 团队协作

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

3. 教学演示

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

4. 设计评审

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

🚀 快速开始

bash 复制代码

# 克隆项目
git clone https://gitee.com/galaxy_0/mermaid-tool.git

# 进入项目目录
cd mermaid-tool

# 安装依赖
npm install

# 启动开发服务器
npm run dev

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

📝 示例代码

流程图

#mermaid-svg-85fGv7TqPm9JGo7y{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-85fGv7TqPm9JGo7y .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-85fGv7TqPm9JGo7y .error-icon{fill:#552222;}#mermaid-svg-85fGv7TqPm9JGo7y .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-85fGv7TqPm9JGo7y .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-85fGv7TqPm9JGo7y .marker{fill:#333333;stroke:#333333;}#mermaid-svg-85fGv7TqPm9JGo7y .marker.cross{stroke:#333333;}#mermaid-svg-85fGv7TqPm9JGo7y svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-85fGv7TqPm9JGo7y p{margin:0;}#mermaid-svg-85fGv7TqPm9JGo7y .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-85fGv7TqPm9JGo7y .cluster-label text{fill:#333;}#mermaid-svg-85fGv7TqPm9JGo7y .cluster-label span{color:#333;}#mermaid-svg-85fGv7TqPm9JGo7y .cluster-label span p{background-color:transparent;}#mermaid-svg-85fGv7TqPm9JGo7y .label text,#mermaid-svg-85fGv7TqPm9JGo7y span{fill:#333;color:#333;}#mermaid-svg-85fGv7TqPm9JGo7y .node rect,#mermaid-svg-85fGv7TqPm9JGo7y .node circle,#mermaid-svg-85fGv7TqPm9JGo7y .node ellipse,#mermaid-svg-85fGv7TqPm9JGo7y .node polygon,#mermaid-svg-85fGv7TqPm9JGo7y .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-85fGv7TqPm9JGo7y .rough-node .label text,#mermaid-svg-85fGv7TqPm9JGo7y .node .label text,#mermaid-svg-85fGv7TqPm9JGo7y .image-shape .label,#mermaid-svg-85fGv7TqPm9JGo7y .icon-shape .label{text-anchor:middle;}#mermaid-svg-85fGv7TqPm9JGo7y .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-85fGv7TqPm9JGo7y .rough-node .label,#mermaid-svg-85fGv7TqPm9JGo7y .node .label,#mermaid-svg-85fGv7TqPm9JGo7y .image-shape .label,#mermaid-svg-85fGv7TqPm9JGo7y .icon-shape .label{text-align:center;}#mermaid-svg-85fGv7TqPm9JGo7y .node.clickable{cursor:pointer;}#mermaid-svg-85fGv7TqPm9JGo7y .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-85fGv7TqPm9JGo7y .arrowheadPath{fill:#333333;}#mermaid-svg-85fGv7TqPm9JGo7y .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-85fGv7TqPm9JGo7y .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-85fGv7TqPm9JGo7y .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-85fGv7TqPm9JGo7y .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-85fGv7TqPm9JGo7y .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-85fGv7TqPm9JGo7y .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-85fGv7TqPm9JGo7y .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-85fGv7TqPm9JGo7y .cluster text{fill:#333;}#mermaid-svg-85fGv7TqPm9JGo7y .cluster span{color:#333;}#mermaid-svg-85fGv7TqPm9JGo7y div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-85fGv7TqPm9JGo7y .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-85fGv7TqPm9JGo7y rect.text{fill:none;stroke-width:0;}#mermaid-svg-85fGv7TqPm9JGo7y .icon-shape,#mermaid-svg-85fGv7TqPm9JGo7y .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-85fGv7TqPm9JGo7y .icon-shape p,#mermaid-svg-85fGv7TqPm9JGo7y .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-85fGv7TqPm9JGo7y .icon-shape .label rect,#mermaid-svg-85fGv7TqPm9JGo7y .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-85fGv7TqPm9JGo7y .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-85fGv7TqPm9JGo7y .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-85fGv7TqPm9JGo7y :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
开始
条件判断
执行操作A
执行操作B
结束

序列图

数据库系统用户数据库系统用户 #mermaid-svg-pjAu9n0MofHY2IDS{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-pjAu9n0MofHY2IDS .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-pjAu9n0MofHY2IDS .error-icon{fill:#552222;}#mermaid-svg-pjAu9n0MofHY2IDS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pjAu9n0MofHY2IDS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pjAu9n0MofHY2IDS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pjAu9n0MofHY2IDS .marker.cross{stroke:#333333;}#mermaid-svg-pjAu9n0MofHY2IDS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pjAu9n0MofHY2IDS p{margin:0;}#mermaid-svg-pjAu9n0MofHY2IDS .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-pjAu9n0MofHY2IDS text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-pjAu9n0MofHY2IDS .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-pjAu9n0MofHY2IDS .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-pjAu9n0MofHY2IDS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-pjAu9n0MofHY2IDS .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-pjAu9n0MofHY2IDS #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-pjAu9n0MofHY2IDS .sequenceNumber{fill:white;}#mermaid-svg-pjAu9n0MofHY2IDS #sequencenumber{fill:#333;}#mermaid-svg-pjAu9n0MofHY2IDS #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-pjAu9n0MofHY2IDS .messageText{fill:#333;stroke:none;}#mermaid-svg-pjAu9n0MofHY2IDS .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-pjAu9n0MofHY2IDS .labelText,#mermaid-svg-pjAu9n0MofHY2IDS .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-pjAu9n0MofHY2IDS .loopText,#mermaid-svg-pjAu9n0MofHY2IDS .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-pjAu9n0MofHY2IDS .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-pjAu9n0MofHY2IDS .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-pjAu9n0MofHY2IDS .noteText,#mermaid-svg-pjAu9n0MofHY2IDS .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-pjAu9n0MofHY2IDS .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-pjAu9n0MofHY2IDS .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-pjAu9n0MofHY2IDS .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-pjAu9n0MofHY2IDS .actorPopupMenu{position:absolute;}#mermaid-svg-pjAu9n0MofHY2IDS .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-pjAu9n0MofHY2IDS .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-pjAu9n0MofHY2IDS .actor-man circle,#mermaid-svg-pjAu9n0MofHY2IDS line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-pjAu9n0MofHY2IDS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 发起请求查询数据返回结果展示页面

类图

#mermaid-svg-07omNH560yKi6cQt{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-07omNH560yKi6cQt .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-07omNH560yKi6cQt .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-07omNH560yKi6cQt .error-icon{fill:#552222;}#mermaid-svg-07omNH560yKi6cQt .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-07omNH560yKi6cQt .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-07omNH560yKi6cQt .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-07omNH560yKi6cQt .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-07omNH560yKi6cQt .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-07omNH560yKi6cQt .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-07omNH560yKi6cQt .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-07omNH560yKi6cQt .marker{fill:#333333;stroke:#333333;}#mermaid-svg-07omNH560yKi6cQt .marker.cross{stroke:#333333;}#mermaid-svg-07omNH560yKi6cQt svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-07omNH560yKi6cQt p{margin:0;}#mermaid-svg-07omNH560yKi6cQt g.classGroup text{fill:#9370DB;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-07omNH560yKi6cQt g.classGroup text .title{font-weight:bolder;}#mermaid-svg-07omNH560yKi6cQt .cluster-label text{fill:#333;}#mermaid-svg-07omNH560yKi6cQt .cluster-label span{color:#333;}#mermaid-svg-07omNH560yKi6cQt .cluster-label span p{background-color:transparent;}#mermaid-svg-07omNH560yKi6cQt .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-07omNH560yKi6cQt .cluster text{fill:#333;}#mermaid-svg-07omNH560yKi6cQt .cluster span{color:#333;}#mermaid-svg-07omNH560yKi6cQt .nodeLabel,#mermaid-svg-07omNH560yKi6cQt .edgeLabel{color:#131300;}#mermaid-svg-07omNH560yKi6cQt .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-07omNH560yKi6cQt .label text{fill:#131300;}#mermaid-svg-07omNH560yKi6cQt .labelBkg{background:#ECECFF;}#mermaid-svg-07omNH560yKi6cQt .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-07omNH560yKi6cQt .classTitle{font-weight:bolder;}#mermaid-svg-07omNH560yKi6cQt .node rect,#mermaid-svg-07omNH560yKi6cQt .node circle,#mermaid-svg-07omNH560yKi6cQt .node ellipse,#mermaid-svg-07omNH560yKi6cQt .node polygon,#mermaid-svg-07omNH560yKi6cQt .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-07omNH560yKi6cQt .divider{stroke:#9370DB;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt g.clickable{cursor:pointer;}#mermaid-svg-07omNH560yKi6cQt g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-07omNH560yKi6cQt g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-07omNH560yKi6cQt .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-07omNH560yKi6cQt .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-07omNH560yKi6cQt .dashed-line{stroke-dasharray:3;}#mermaid-svg-07omNH560yKi6cQt .dotted-line{stroke-dasharray:1 2;}#mermaid-svg-07omNH560yKi6cQt #compositionStart,#mermaid-svg-07omNH560yKi6cQt .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #compositionEnd,#mermaid-svg-07omNH560yKi6cQt .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #dependencyStart,#mermaid-svg-07omNH560yKi6cQt .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #dependencyStart,#mermaid-svg-07omNH560yKi6cQt .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #extensionStart,#mermaid-svg-07omNH560yKi6cQt .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #extensionEnd,#mermaid-svg-07omNH560yKi6cQt .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #aggregationStart,#mermaid-svg-07omNH560yKi6cQt .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #aggregationEnd,#mermaid-svg-07omNH560yKi6cQt .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #lollipopStart,#mermaid-svg-07omNH560yKi6cQt .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt #lollipopEnd,#mermaid-svg-07omNH560yKi6cQt .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-07omNH560yKi6cQt .edgeTerminals{font-size:11px;line-height:initial;}#mermaid-svg-07omNH560yKi6cQt .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-07omNH560yKi6cQt .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-07omNH560yKi6cQt .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-07omNH560yKi6cQt :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Person
-String name
-int age
+void sayHello()
Student
-String school
+void 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