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.
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…
This is really elegant. It has a simple, markdown-like syntax for sketching out app behavior. Brilliant.
Cool tool for sketching states of a software product. Has some overlap with the UI shorthand I use for new projects.
It’s exciting to see state machines become more explicit in the design tools and visual programming space.
Maybe I’m late to the party here, but @sketchsystems looks really interesting. Nothing else like it, and genuinely filling a workflow problem no one else is trying to solve.
This is a very useful tool. Tried documenting a simple production system behavior. Took less than five minutes!
Now this looks very promising! Sketch.Systems allows us to use Markdown to describe the behavior of a system, while building prototype user interfaces on top of it.
I really love the sketching attributes here. You can add some information in text form, see it as a diagram, play with it, and then add a prototype and correlate real behavior with the diagram. An excellent example of using the computer as a tool to aid human thinking.
I’ve often thought that formal methods would be super handy on the front end, and likewise, I’ve also thought that formal methods folks could also learn a ton from UI folks. Great to see some work done towards bridging the gap!
Frequently Asked Questions
Does Sketch.systems support transition guards, transition actions, or extended state variables?
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.