My 1-Day Prototype, 2-Week Launch: Building a Cross-Platform UML Editor with Tauri and Cursor

Hi, I'm Hudy - a half Indie maker based in Hanoi, Vietnam. Today, I'm thrilled to share the story of how I spent one day building a functional cross-platform desktop UML editor prototype. And then the next 10+ days refining it based on valuable feedback from my colleagues.

Here is the Github repo and a quick look about the app:

It includes some features such as:

• Uml text editor with syntax highlighted and suggestions
• Preview panel with zoom in/out and dragging around features
• Enable export uml as file .pu and .png
• Copy as an image and paste to chatbox
• Create multiple and update uml's title
• Realtime diagram preview
• Soft and permanent delete feature
• Restore deleted uml diagram
• Pop out the preview window
• Autoupdate using Github action pipeline

See other open-sources that I built: hudy9x.com

Why build my own UML tool ?

Three weeks ago, my boss tell me that we've started the next phase of the project. And this phase requires us to implement the detailed design which include some detailed sequence diagram in UML format.

So I've just googling a few days to find the best match for us. Found a lot of tools but with locked essential features behind a paywall. (Actually, I'm not familiar with DD and hate to draw, so I refused to learn how to use the tool LOL)

I just need a simple tool which allows me to visualize and edit the diagram quickly without dragging, aligning, but just type and see the result.

At that moment, an idea flashed in my mind: "Why don't I built my own UML tool"

Found the uml syntax but how to preview it

Next 2 hours, I've kept googling "how to preview uml syntax in javascript, npm". And "wa lah" I figured out a package that called plantuml-encoder which accept an encoded uml syntax and calling the uml link to response an image/svg/text format.

Boom, let's build it right away.

Choose Tauri for building cross-platform desktop app

Immediately, I opened tauri.app and install required dependencies and start building the project. Here is what I chosen:

• Tauri
• Pnpm
• Reactjs - frontend
• Sqlite - database
• Zustand - state management
• Shadcn UI

Crafting the UML editor prototype

Now that is the important part, I had to isolate the scope of development, otherwise the app would never been released LOL. In order to increase the development process I just need to simplify features. So after 15 minutes of brainstorming with my ego, here are the features:

1. The app only have 2 part: the left and the right.
2. Left is a text editor
3. Right is the preview panel

Let's breaking down these two features. Regarding the left side, what requirements it should cover:

• Text editor must have syntax highlighted
• It must have embed theme and allow to customize the theme
• It must have completions and search or replace

With these requirements, I found @uiw/react-codemirror - a wrapper of code-mirror for React.js

Regarding the right side - the preview panel. It's more simpler, cause we just need to:

• Preview the uml syntax
• It must allow to dragging around
• It must allow to zoom in/out

For dragging and zooming, I found react-zoom-pan-pinch package. However, the preview got an issue was that the image became too blurry when zoomed in. Therefore, I used svg instead of image as follow

// just change the /img to /svg in the url var url = 'http://www.plantuml.com/plantuml/svg/' + encoded 

That's it. Now I just need to open cursor and tell it to start building. After 30 minutes doing questions and answers with it, the output is something like below:

Apply the build pipeline automatically for Windows and Macos

Since I built this app on Mac, I had to create a Github pipeline to generate the Windows version.

While this step might seem daunting, it's surprisingly simple. Tauri provides a comprehensive solution for this process that you can just copy and paste: Tauri Github Pipeline

Release a beta version and get feedbacks in next 10+ days

Next days, I just sent the app to my colleagues and eager for their feedbacks. And to my pleasant surprise, the suggestions poured in! This "collect comments and review" phase lasted over 10+ days and was invaluable. Here's a snapshot of suggestions that helped shape the app:

• "I think you should create a tab on the left or the top, something like notepad++ to show what files you're editting and help me easy to switch between them"
• "The preview panel should able to pop out the main window. Cuz the window's size kinda too small, I'd like to split it out to the other screen to edit"
• "Can I copy it as an image and paste it to Teams chatbox ?"
• "What if I delete the app, where is my diagram? Could you allow to save it or something"
• "The theme is too light, could you provide the dark mode"
• "Well, the diagram list is too long and hard to find. Can you allow to delete it and provide a search box ? "
• "For now, I have 3 running projects, each of them have 4-5 diagram. Can you provide something like folder, project or category to manage them easier?"
• "Do you have sort feature, it's kinda drag the diagram to sort them"
• ....

Lession learned and road ahead

That's the story! The app officially launched within two weeks: one intense day of prototyping, and over 10 days dedicated to iterating and improving based on real user feedback. It was an incredible learning experience. I gained a deeper understanding of efficient development, the power of rapid prototyping, and the immense value of user-centric design.

Building this app with Cursor by my side, which streamlined many coding tasks, combined with my prior Tauri knowledge, made this rapid development cycle possible. It truly shows what you can achieve when you focus on user needs and leverage powerful tools.

• P/s: I've been learning to write English. So the post is mixed with Gemeni and me :D