PlantUML Editor
Source: Dev.to
Introduction
This is my first post on dev.to. I’m happy to join this community. I saw a lot of people here sharing their cool software, so I want to do the same.
Let me introduce you to my PlantUML Editor, . This post is an extension of . However, I’ll go into more technical details here. I hope I’ll get your feedback.
The PlantUML Editor is open‑source: . You can clone it, run it locally, fork it, or even contribute to it.
My daily work often involves PlantUML, systems, sequences, and domain‑driven design. I didn’t like the existing tools because of ads and required installation/setup (especially desktop apps). I wanted a web‑based application that required no installation or setup. Below are the features that have been added so far.
Front‑End / Web Renderer
The first feature I needed was a web renderer that could turn PlantUML into diagrams without a back‑end or server. This is made possible by the library .
Even though it is a web renderer, it still requires an internet connection because the CheerpJ runtime is loaded from the internet. In the future I may host the CheerpJ loader locally.
Back‑End / (Java) Server Renderer
The web renderer was slow, as demonstrated in my first live stream: .
It also didn’t show syntax errors, making debugging difficult.
Thanks to , back‑end rendering became possible, and syntax errors are now displayed as human‑friendly images.
Currently the PlantUML Editor supports two types of renderers: web and server.
File Management System
Diagrams are private because they are stored locally in the browser via the Web Storage API.
Share as URL
Diagrams remain private unless you share them as URLs. This feature requires no server; it uses the encode/decode PlantUML technique.
Responsive Layout with Mobile Tabs
If a user receives a shared URL and views it on a mobile device, the editor works seamlessly. It is mobile‑friendly.
Preview Panel (Light/Dark) Theme Toggler
You can switch between light and dark themes for both the code editor and diagram preview.
Multi‑tab Support
Work on multiple diagrams in different tabs within the same browser. Each tab holds its own PlantUML code and preview image, and the File Management System keeps track of everything. Feel free to try it yourself!