Sequence diagrams

Whimsical

We noticed users “assembling” sequence diagrams from boxes and lines. The result was fragile and suboptimal. Recognizing this inefficiency, we developed a tailored solution to streamline the diagramming experience.

Make it fast

We want users to stay in flow. To do so, we implemented features designed to enhance speed and intuitiveness. These improvements allow users to focus on idea communication rather than diagram construction.

QuickAdd buttons enable users to quickly stamp out actors with consistent spacing, ensuring a clean, organized diagram. The icon picker is pre-filtered based on the label, anticipating their next action and offering them appropriate suggestions.

Anticipating the next action to make diagramming fast.

We anticipated the next steps in the user’s process to further speed up diagramming. After adding some actors, the next step is to describe the messages passed among them. These are lines connecting two actors, described by a label.

When hovering over an actor, QuickAdd buttons attach to the cursor position. Depending on the actor’s position, they point to the adjacent one. So, a right arrow is shown for actors on the left, a left arrow for those on the right, and a bidirectional arrow for those in the middle.

Context-aware connector buttons.

As diagrams expand vertically, stems automatically adjust to accommodate new connectors. Users can just keep creating and adjust the diagram to fit.

Auto-expanding stems.

A distribute spacing feature allows instant diagram cleanup, while movable connectors offer flexible adjustments. These features underscore our commitment to both functionality and aesthetics in user output.

A distribute spacing button lets you quickly clean up messy diagrams.

Leveraging AI for enhanced productivity

We integrated our generative AI capabilities to transform text requests into fully-formed diagrams. To mitigate initial API latency, we implemented real-time streaming, constructing diagrams as responses arrive. This makes the feature feel especially snappy.

Actual (1x) time-to-diagram

It’s deeply rewarding to build tools that enable people to express ideas with economy and precision. Being able to package all this into a feature that is so simple, but deep in details, is icing on the cake.

At least 75% of the “design” was non-visual, achieved through interaction design that results from using it internally and iterating. I’m so grateful that Rob Fisher, the engineer I paired with, was deeply passionate about this project and went above and beyond to polish it.