- 什么是Mermaid?
- 系統架構設計
- 三層架構 overview
- 架構交互流程
- 核心組件詳解
- 1. Spring Boot后端
- 2. Node.js中間層
- 3. 前端界面
- 功能實現
- 1. 節點和關系管理
- 2. 流程圖渲染
- 3. 主題切換
- 4. 導出功能
- 使用指南
- 啟動步驟
- 頁面操作
- 總結與展望
什么是Mermaid?
Mermaid流程圖可視化系統是一個支持動態創建、管理和展示流程圖的Web應用。Mermaid 是一個基于 JavaScript 的圖表和制圖工具，使用 Markdown 風格的文本定義和渲染器來創建和修改復雜的圖表。Mermaid 的主要目的是幫助文檔跟上開發進度。
官方語法鏈接
系統架構設計
三層架構 overview
該系統采用現代化的三層架構設計，結合了Spring Boot的數據處理能力、Node.js的輕量級中間層優勢以及Mermaid庫的流程圖繪制功能，實現了一個功能完整、交互友好的流程圖可視化解決方案。
├── html-frontend
│ └── index.html
├── img
│ ├── mermaid-diagram.png
│ └── mermaid流程圖測試.png
├── nodejs-middleware
│ ├── package.json
│ └── server.js
├── README.md
└── springboot-backend├── pom.xml├── src└── target
系統采用經典的三層架構設計，各層職責明確、松耦合：
- 前端展示層：基于純HTML、JavaScript和Tailwind CSS構建，負責用戶交互和流程圖展示
- 中間層：基于Node.js和Express框架實現，處理前端請求并轉發給后端
- 后端服務層：基于Spring Boot構建，負責數據持久化和業務邏輯處理
架構交互流程
用戶操作 → 前端界面 → Node.js中間層 → Spring Boot后端 → 數據庫
核心組件詳解
1. Spring Boot后端
后端采用Spring Boot 2.7.0構建，主要負責數據的持久化和業務邏輯處理：
- 數據訪問層：使用Spring Data JPA實現對實體的CRUD操作
- Web層：通過Spring Web和WebFlux提供RESTful API
- 數據庫：使用H2內存數據庫存儲圖形數據，便于快速開發和演示
- 技術棧：Java 11, Spring Boot, Spring Data JPA, Spring WebFlux, H2 Database
根據springboot-backend/pom.xml文件，后端依賴配置清晰，包含了必要的Web、數據訪問和測試組件。
書寫請求接口：
@RestController
@RequestMapping("/api/graph")
@CrossOrigin(origins = "http://localhost:3000") // 允許跨域訪問
public class GraphController {@Autowiredprivate NodeRepository nodeRepository;@Autowiredprivate RelationshipRepository relationshipRepository;// 節點相關接口@GetMapping("/nodes")public List<Node> getAllNodes() {return nodeRepository.findAll();}@PostMapping("/nodes")public Node createNode(@RequestBody Node node) {return nodeRepository.save(node);}// 關系相關接口@GetMapping("/relationships")public List<Relationship> getAllRelationships() {return relationshipRepository.findAll();}@PostMapping("/relationships")public Relationship createRelationship(@RequestBody Relationship relationship) {return relationshipRepository.save(relationship);}// 獲取完整圖形數據@GetMappingpublic ResponseEntity<Map<String, Object>> getFullGraph() {Map<String, Object> graphData = new HashMap<>();graphData.put("nodes", nodeRepository.findAll());graphData.put("relationships", relationshipRepository.findAll());return new ResponseEntity<>(graphData, HttpStatus.OK);}
}
2. Node.js中間層
中間層基于Node.js和Express框架實現，主要職責是轉發前端請求到后端，并處理跨域問題：
- 服務器：使用Express創建輕量級Web服務器，監聽3000端口
- API代理：通過Axios轉發請求到Spring Boot后端（默認地址：http://localhost:8080/api/graph）
- 中間件：使用CORS中間件處理跨域請求，使用express.json()解析JSON請求體
- 技術棧：Node.js, Express, Axios, CORS
從/nodejs-middleware/server.js可以看出，中間層提供了三個主要API端點：
- GET /api/graph：獲取完整圖形數據
- POST /api/nodes：創建新節點
- POST /api/relationships：創建新關系
書寫中間層請求：
const express = require('express');
const axios = require('axios');
const cors = require('cors');const app = express();
const PORT = 3000;
const SPRING_BOOT_API_URL = 'http://localhost:8080/api/graph';// 中間件配置
app.use(cors());
app.use(express.json());// 獲取完整圖形數據
app.get('/api/graph', async (req, res) => {try {const response = await axios.get(SPRING_BOOT_API_URL);res.json(response.data);} catch (error) {console.error('獲取圖形數據失敗:', error);res.status(500).json({ error: '獲取圖形數據失敗' });}
});// 創建新節點
app.post('/api/nodes', async (req, res) => {try {const response = await axios.post(`${SPRING_BOOT_API_URL}/nodes`, req.body);res.json(response.data);} catch (error) {console.error('創建節點失敗:', error);res.status(500).json({ error: '創建節點失敗' });}
});// 創建新關系
app.post('/api/relationships', async (req, res) => {try {const response = await axios.post(`${SPRING_BOOT_API_URL}/relationships`, req.body);res.json(response.data);} catch (error) {console.error('創建關系失敗:', error);res.status(500).json({ error: '創建關系失敗' });}
});// 啟動服務器
app.listen(PORT, () => {console.log(`Node.js中間層服務器運行在 http://localhost:${PORT}`);
});
3. 前端界面
前端基于純HTML實現，結合了多種現代化前端技術：
- UI框架：使用Tailwind CSS實現響應式布局和美觀的UI組件
- 圖標庫：使用Font Awesome提供直觀的圖標
- 流程圖繪制：使用Mermaid 10.9.1庫繪制流程圖
- 導出功能：使用html2canvas和FileSaver.js實現流程圖PNG導出
- 主題切換：支持默認、深色、森林和中性四種主題
從html-frontend/index.html可以看出，前端實現了完整的用戶交互界面，包括節點和關系的添加、流程圖刷新、數據清空、主題切換和導出功能。
前端頁面主要是對流程圖節點和關系的新增，以及流程圖的展示
功能實現
1. 節點和關系管理
系統支持節點和關系的創建和管理：
- 節點管理：支持添加節點，設置節點名稱和類型
- 關系管理：支持在兩個節點之間添加帶有標簽的關系
- 數據同步：所有操作實時同步到后端存儲
- 統計展示：實時顯示節點和關系的數量統計
2. 流程圖渲染
使用Mermaid庫實現流程圖的動態渲染：
- 自動布局：Mermaid自動計算節點位置，確保流程圖美觀
- 可定制樣式：支持通過主題切換改變流程圖的整體風格
- 響應式設計：流程圖會根據容器大小自動調整
3. 主題切換
系統支持四種不同的主題風格：
- 默認主題：基于紫色系的默認風格
- 深色主題：深色背景，適合長時間查看
- 森林主題：綠色系主題，清新自然
- 中性主題：基于灰色系的簡約風格
4. 導出功能
支持將流程圖導出為PNG圖片：
- 高質量渲染：使用html2canvas確保導出圖片質量
- 便捷保存：通過FileSaver.js直接保存到本地
使用指南
啟動步驟
-
啟動Spring Boot后端
cd springboot-backend mvn spring-boot:run服務將運行在
http://localhost:8080 -
啟動Node.js中間層
cd nodejs-middleware npm install npm start服務將運行在
http://localhost:3000 -
啟動前端頁面
cd html-frontend python -m http.server 8001訪問
http://localhost:8001即可使用系統
頁面操作
- 添加節點：填寫節點名稱和類型，點擊"添加節點"按鈕
- 添加關系：選擇源節點和目標節點，填寫關系標簽，點擊"添加關系"按鈕
- 刷新流程圖：點擊"刷新流程圖"按鈕更新流程圖顯示
- 切換主題：點擊主題選擇器中的不同主題按鈕
- 下載流程圖：點擊"下載PNG"按鈕將流程圖保存為圖片
總結與展望
本項目通過三層架構的設計，充分發揮了各層技術的優勢：Spring Boot提供了強大的數據處理能力，Node.js中間層實現了輕量級的請求轉發，前端則通過Mermaid庫實現了直觀的流程圖可視化。系統功能完整，交互友好，適合用于流程圖的快速創建和展示。
未來可以考慮以下改進方向：
- 數據持久化：替換H2內存數據庫為MySQL或PostgreSQL等持久化數據庫
- 用戶認證：添加用戶認證和授權功能
- 流程圖模板：提供常用流程圖模板，方便用戶快速創建
- 實時協作：添加多人實時協作編輯功能
- 更多導出格式：支持導出為PDF、SVG等更多格式
