Member-only story
How To Graphically Design Your App Before Coding It
The very important difference between programming and coding
I have recently written an article about why I’m switching to Emacs as my primary editor. This article received a comment that positively triggered me to write this article. The commenter explained that there’s a substantial difference between programming and coding and text-based editors like Emacs or Vim are holding back developers from advancing in the field.
I have yet to explore the visual programming system that the commenter suggested (Smalltalk), but I have thought about the difference between programming and coding. As a matter of fact, I’ve always been splitting my development workflow into two steps without even noticing:
- Graphically design the feature I want to implement with as much technical detail as possible.
- Code the feature according to the picture your brain already ideated and seen (your graphical design).
While this is something most developers do (at least from my experience) I wanted to share a tool (a package actually) that I’ve been using and have found incredibly effective, fast, and easy to export.
This tool is pgf-umlsd.
What is pgf-umlsd?
pgf-umlsd is a LaTeX package for drawing UML Sequence Diagrams. For those of you who haven’t yet heard of (unlikely) or used LaTeX, I’ve already mentioned it here when talking about note-taking for Machine Learning.
Guess what, I have found LaTeX also awesome for product design and technical feature description thanks to the above-mentioned package. If you never used LaTeX, don’t worry, this tutorial will cover some basics to get you building your first sequence diagram with pgf-umlsd.
Let’s look at what a fancy Sequence diagram looks like:
It sure looks pretty, but also a bit nested and difficult to follow. However, as soon as you start designing a feature implementation on your own sequence diagram, it will feel like the cleanest…
