1.1 Mission statement
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 annoying.
|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|
|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.
While editor can be used by anonymous visitors, signing in to an account enables storing diagrams and the renderings online.
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.
The admin can view the logs to see recent activity and performance, and can manage accounts directly in the database.
Once shown in the browser, the user saves the picture locally, and embeds in documents etc.
Using editor involves only a few actions:
|Window title||Contains the text “editor vX.X”|
|Menu button||Disabled when not signed in. When signed in, shows the user’s files.|
|Help button||Opens the PlantUML reference in a separate browser tab.|
|Refresh button||Draws the current UML definition (entered in the text area).|
|Copy button||Copies the UML definition into the computer’s clipboard. From there, it can be pasted into a document, and saved.|
|Link button||Disabled when not signed in. Copies a link to the image file into the computer’s clipboard. From there, the link can be pasted into an image upload dialog to be embedded in a document or webpage.|
|Filename||Blank when not signed in. When signed in, it shows the current file’s name, and if clicked, it can be edited to edit the filename. The file is continuously saved as it’s edited.||The image file (png) is saved in the files folder on the web server with the file id as it’s filename (with the .png filename extension).|
|Account button||If not signed in, it just says [Sign in].|
If signed in, it shows the user’s name and dropdown menu with two commands: [Account] and [Sign out].
|UGLEBERG.dk button||Opens the UGLEBERG.dk website on the editor page.|
|Files||Side out from the left side when the menu button is pressed, which is only enabled when signed in.|
Shows a hierarchical last of saved files. The current file is selected in the list.
|Use a TreeView to implement the list.|
Enable drag and drop rearranging file placements.
Enable deletion of a file.
Load selected file, and show the image.
|Text area||Diagram definition is entered here.||Wrap a textarea in CodeMirror.|
|Divider||Divides the editor from the image.|
Can be dragged sideways.
|Use simple event listeners to redraw and resize as the divider is moved.|
|Image||Shows the drawn diagram.|
The webapp page uses the browser’s session storage to store information about the active session’s state.
On the server, the webapp holds this and more information in a session object.
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 qualities
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 …