I need a simple web-based UML editor that renders diagrams based on text. This is the most efficient way of making sequence diagrams, which are very cumbersome to draw in conventional drawing applications.
PlantUML is a great solution, but the free web-based editor PlantText shows adds, which I find disturbing.
|UML||Widely acknowledged standard for illustrating various aspects of solution architecture.|
|UML||Unified Modeling Language.||UML|
|PlantUML||Diagram rendering engine that uses simple clear text as input.||PlantUML|
|PlantText||Online editor based on PlantUML.||PlantText|
1.4 Change log
|0.1||January, 2020||Initial release, very limited functionality.|
2. Solution overview
Users run the web application in their favorite web browser. A cloud-hosted virtual web server loads and runs the service-side .NET Core application, and creates a session to service HTTP requests from the user’s browser.
The editor application may log to the logger application to help the developer troubleshoot the editor application.
The editor application calls a cloud-hosted service that renders the image of the diagram defined by the text in the editor application’s text editor widget.
Once show in the browser, the user saves the picture locally, and embeds in documents etc.
Using editor involves only a few actions:
The user edits the text that defines a diagram, and renders it regularly to preview the resulting diagram rendering.
Once satisfied with the diagram, the user saves both the defining text and the diagram image to use it later, and embed it it documents.
The editor web application holds its information in the browser’s session storage, which lives as long as the browser remains running.
The session holds the text that defines the diagram, and the rendered diagram image. Also, the session holds the filename under which both the text and the image are saved on the web server’s file store, from where it can be linked to from web pages and documents.
5. Design constraints
5.1 Life span
|Minimize costs||Since all my development activities are long-running hobby work, costs need to be kept at a minimum, particularly reoccurring subscription costs.||editor is developed using the same tools as for developing factors, and is deployed to the same cloud-based hosting service.|
|Further factors development||factors requires an advanced user interface and other technically challenging features. The work with editor needs to further that development by taking on as many of these features on a small scale.||editor is developed using the same tools and components as factors.|
|Material||Choosing a widely used user interface standard is likely to make editor more approachable to new users.||The user interface is built using the DevExtreme component suite.|
|Web application||Web applications are accessible to everyone everywhere on all platforms.||editor is built using a technology that makes it easy to develop and deploy web applications.|
|.NET Core||Cross-platform that makes it easy to build web applications using C#.|
Supported on many affordable hosting platforms.
|editor is built using C#.|
|C#||Modern feature-rich object-oriented programming language.||editor is developed using a C# development tool.|
|Rider||Subscription-based C# development tool with the same refactoring and coding aids as JetBrains ReSharper for VisualStudio.||Imposes a monthly subscription cost, but is deemed worthwhile compared to the free VisualStudio, which requires a ReSharper subscription instead.|
|DevExtreme||Feature-rich user interface component suite that supports Material.|
Free for non-commercial use.
|SmarterASP.NET||An affordable cloud-based platform offering virtualized Windows 10 servers that support .NET Core.||Imposes a cost of an annual subscription.|
6. Design principles
7. Design goals
Confidentiality can’t be expected since the text defining diagrams is sent to an external service, and the resulting diagram data returned unencrypted.
Since no data is stored anywhere, there’s no integrity to loose.
Good usability is achieved through several design choices:
- Building on DevExtreme and using the built-in Material look and feel ensures a recognizable and approachable user interface.
- The content is restricted to the actual browser viewport area, avoid that the toolbar disappears due to scrolling.
- A adjustable divider separates the text and the diagram, allowing the user decide which part to scroll horizontally within its area.
No concurrent sessions share any resources, so no concurrency issues can arise.
Performance is only limited by two uncontrollable elements:
- The SmarterASP.NET hosting provider, specifically how fast the hosted IIS spins up the web server when a user loads the web application after it has been stopped due to inactivity.
- The speed with which the cloud-based rendering service renders and returns the generated diagram image.
Not a concern. Should the rendering service turn out to be unreliable, it might be possible to install the rendering engine on the web server for local execution.
The web server is remotely manages in SmarterASP.NET’s web-based dashboard. Also, the web application logs when it starts and stops.
8. High-level design
These are the significant classes:
Program and Startup configures every concurrent web application session.
Log is a static class that offers a single Write method that send the message to the logger web application.
The user clicks the render button in the toolbar, which generates a click event:
Depending on the result, the render function toggles between the states error message or the rendered image.
The source code is stored on the developer’s laptop, and edited in Rider.
Code changes are tested by …