If you’ve worked in a development or planning role for a complex system, you are aware that diagram as code brings huge benefits to the product owner and architect. Expressing system documentation as code allows for quick iteration, clearer collaboration, better version control and automation, all of which are critical when dealing with dynamic systems at scale.

While many people are familiar with UML renderers for things like system and sequence diagrams, I recently discovered PlantUML’s Salt subproject, and it has complete changed my approach to developing rough mockups. With Salt, you can use simple markup language to collaborate on functionally accurate interface mockups, versioning it as you would any other code.

Screenshot

Consider the following screenshot of the AWS EC2 dashboard.

SaltUML Mockup

Here’s a rough mockup that was generated with around 100 lines of SaltUML.

Getting Started

The learning curve is remarkably gentle. With a few minutes of messing around with the primitives, you’ll be able to replicate and iterate on simple UI modals. With practice and imagination, you can create functionally accurate UI wireframes that represent even the most complex graphical workflows and intefaces. The markup language feels intuitive for anyone with basic HTML experience.

To get started, find a rendering and authoring experience that feels natural to you, whether it’s a whiteboard application like Miro, an extension to VSCode, or just playing around in the plantuml playgrounds with the sample code.

Salt explicitly focuses on function over form, so I’ve found it adaptable to web, mobile and console UIs. Users with light HTML experience will find the Creole engine very flexible in formatting. You can declare your own sprites, but the Openiconic library has an analog for virtually every icon I have needed. I have gathered a handful of templates for mobile and web apps in the salt section of the dac project, which you can use regardless of the renderer you choose.

Results

I’ve observed that integrating SaltUML into my workflow improves my consistency and accuracy. The text-based generation allows me to generate versionable assets that can be differenced and iterated on. As I’ve become more fluid with the pattern, I’ve created a library of re-usable templates like this AWS dashboard which can be leveraged across projects, dramatically improving my scale, collaboration, and communication.