PlantUML Server is a web-based UML learning tool that helps users practice creating various types of UML diagrams using PlantUML syntax.
Step1. Select a problem from the list and write UML code in the editor while comparing with the example solution.
plantuml-step1.mov
Step2. Download the diagram.
plantuml-step2.mov
| Category | Technology |
|---|---|
| VM | Amazon EC2 |
| Web server | Nginx |
| Frontend | HTML, JavaScript, Bootstrap CSS |
| Backend | PHP 8.3 |
| Storage | Temporary file storage on server |
| CI/CD | GitHub Actions |
| QA/Testing | - PHP CS Fixer (code formatting) - PHPStan (level 9, strictest configuration) - PHPUnit (unit testing) |
| Framework & Tools | - Monaco editor (code editor) - PlantUML v1.2024.7 (UML diagram generation) - Graphviz (graph visualization software) |
The application features a three-pane interface:
- Editor Pane: Code editor supporting various UML diagrams (Use Case, Class, Activity, etc.)
- Preview Pane: Real-time diagram rendering
- Solution Pane: Interactive cheat sheets which allow users to understand PlantUML syntax by comparing their work with example solutions
Diagrams can be exported in the following formats:
- PNG
- SVG
- TXT (for source code backup and reuse)
| Category | Description |
|---|---|
| XSS | - HTML content escape: htmlspecialchars() with ENT_QUOTES flag. - JavaScript string escape: json_encode(). - URL attribute escape: urlencode() and URL scheme validation. |
| OS command injection | Applied escapeshellarg() to properly escape and quote shell arguments when executing PlantUML jar file. |
This project uses GitHub Actions for two separate workflows:
Located in .github/workflows/ci.yml, the CI workflow runs on pushes to the main branch (and other specified triggers). It:
- Installs and caches dependencies via Composer
- Performs PHP CS Fixer checks for code style
- Performs PHPStan static analysis for code quality
- Runs PHPUnit unit tests to verify functionality
Located in .github/workflows/cd.yml, the CD workflow is triggered automatically only if the CI workflow succeeds. It:
- Uses GitHub Actions OpenID Connect to assume a short-lived AWS role
- Runs commands remotely via AWS Systems Manager (SSM) to pull and deploy changes on the EC2 instance (no direct SSH access or security group changes)
- Updates Composer dependencies on the server and restarts services (PHP-FPM, Nginx)