# vue3-vite-plantUml-springboot

**Repository Path**: zhang-yi-000000/vue3-vite-plant-uml-springboot

## Basic Information

- **Project Name**: vue3-vite-plantUml-springboot
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-08
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# vue3-vite-plant-uml-springboot

This is a front-end and back-end decoupled project. The front-end is implemented using Vue 3 and Vite, providing PlantUML diagram editing capabilities, while the back-end is built with Spring Boot to provide PlantUML diagram generation services.

## Project Structure

The project is primarily divided into two parts:

- `plantuml-server`: Spring Boot back-end service that provides a REST API for generating PlantUML diagrams
- Front-end module: A web application based on Vue 3 and Vite, providing PlantUML diagram editing and preview functionality

## Features

- Supports various PlantUML diagram types (class diagrams, sequence diagrams, use case diagrams, state diagrams, activity diagrams, etc.)
- Provides an online diagram editor
- Supports diagram generation via GET and POST requests
- Provides a health check API
- Supports cross-origin requests

## Technology Stack

- Front-end: Vue 3, Vite, TypeScript
- Back-end: Spring Boot, Java
- Others: PlantUML diagram generation service

## Quick Start

### Environment Requirements

- Java 8+
- Node.js 14+
- npm

### Starting the Back-end Service

1. Enter the project directory
   ```
   cd plantuml-server
   ```

2. Compile the project
   ```
   mvn clean package
   ```

3. Run the project
   ```
   java -jar target/plantuml-server-0.0.1-SNAPSHOT.jar
   ```

### Running the Front-end Application

1. Enter the front-end project directory
   ```
   cd ..
   ```

2. Install dependencies
   ```
   npm install
   ```

3. Start the development server
   ```
   npm run dev
   ```

### Accessing the Service

The front-end application runs by default at http://localhost:5173

The back-end API can be accessed as follows:

- Health check: GET http://localhost:8080/diagrams/health
- Generate image (POST): POST http://localhost:8080/diagrams/image
- Generate image (GET): GET http://localhost:8080/diagrams/image/{encoded}

## API Description

### Health Check
```
GET /diagrams/health
```

### Generate Image (POST Method)
```
POST /diagrams/image
Content-Type: application/json

{
  "umlCode": "@startuml\nactor User\nUser -> System : Login\nSystem --> User : Authentication Success\n@enduml"
}
```

### Generate Image (GET Method)
```
GET /diagrams/image/{encoded}
```
Where `{encoded}` is the PlantUML code encoded using Base64

## Configuration Description

The back-end service configuration is located in `plantuml-server/src/main/resources/application.yml`

## Deployment

### Back-end Packaging
```
mvn clean package
```

### Running the JAR File
```
java -jar plantuml-server-0.0.1-SNAPSHOT.jar
```

## Notes

- Ensure the port configurations for both front-end and back-end services are correct
- It is recommended to configure appropriate cross-origin policies for production environments
- Rendering parameters for PlantUML can be adjusted as needed

## Front-end Integration

The front-end implements diagram generation by calling the back-end REST API. The editor component is located in `src/components/PlantUMLEditor.vue`. Diagram generation requests are sent to the back-end service, which returns the resulting image.