Explore how your product should work, before building it.

Sketch.systems helps software designers think about complex product behavior. Sketch out states, add prototypes, and clarify questions quickly.

Work through your product's behavior, step-by-step.

Brainstorm possible states of your system and type them out into a spec. The simple, Markdown-like notation is as easy as jotting down ideas on a whiteboard. It’s great for pairing sessions or team meetings.

Link your states together with transitions, triggered by events. You can click on event names in the generated diagram to walk through the system and make sure you’ve got it right.

As you make changes and improvements to the spec, the diagram is automatically updated. States can be nested to make the system easier to understand and remove repetition.

Envisioning how the UI should look in each state can help makes things less abstract. Add an optional prototype using Javascript, HTML, and CSS. You can make anything from simple visual representations to production-fidelity demos.

Save your sketch and share it with your team. The simple notation and diagram are accessible to everyone involved in designing your software product: engineers, designers, QA, managers, and clients.

Tutorials, sweet tutorials.

What folks are saying…

Examples

Frequently Asked Questions

Are these statecharts?

Yep! Sketch.systems sketches are based on the statechart formalism developed by David Harel in the 1980’s. For more details, see:

Does Sketch.systems support transition guards, transition actions, or extended state variables?

Nope!

The focus of Sketch.systems is on big picture sketching for communication and thinking.

Supporting guards, actions, and variables would require turning Sketch.systems into a programming language IDE, which we feel would detract from its usefulness as a sketching tool.

We recommend focusing on the big picture, using comments and transient states to capture logic at a high level (see designing behavior for more details).

Then, once you’ve settled on the big picture and want to implement, do so directly in your production platform and language(s).

Isn't there already a tool that has "Sketch" in the name?

Yes, there are many!

Back in 2000, @Last Software released “SketchUp” (a 3D modeling tool), in 2004 Alias/Autodesk released “SketchBook Pro” (a pixel editor), and in 2010 Bohemian Coding released “Sketch” (a vector drawing tool).

In 2007, Bill Buxton (of Xerox PARC and Microsoft Research fame) wrote an entire book on the subject of how sketching fits into product design called “Sketching User Experiences.” In it, he defines sketches as quick, timely, inexpensive, disposable, and plentiful—with a clear vocabulary, distinct gesture, and minimal detail. There really isn’t another word in the English language that captures those qualities besides “sketch.“

We wanted the name of this site to do exactly what it says on the tin. Its purpose is to help you think about and explore how a system should work, with a simple vocabulary and quick, non-precious nature. That’s sketching. Hence, sketch.systems.

Can Sketch.systems analyze my statechart?

Sketch.systems lets you explore sketches by clicking through the diagram, but it doesn’t do any automated analysis to determine, for example:

  • whether every state is reachable
  • if loops exist
  • the number of “paths” between two states

If you’re interested in doing such analysis, we recommend looking into formal analysis tools like TLA+ or Alloy. Here are some resources to get you started:

Does Sketch.systems support parallel states?

Yep! See the tutorial for details.