HN Explorer

Ask HN: How do you personally diagram code?

11 points by jamestimmins ↗ HN
UML is quite formal and involved. Drawing boxes with arrows on Lucidchart or Draw.io is easy, but the lack of detail is a liability when code gets complex.

How do you personally diagram code so there's enough detail, but you aren't constantly getting lost in the formality of the system?

12 comments

[ 2.0 ms ] story [ 65.3 ms ] thread
slipwalker 

  - context diagram for an overview
  - uml sequence diagram for a more detailed view of interesting parts
  - entity relatioship model for databases
jamestimmins
Ah so you have multiple different diagrams for the same domain? I've been trying to do everything with one, which might be the problem.
el_dev_hell
I default to https://www.diagrams.net/.

But I've used Microsoft Visio in the past and it's a really nice solution (this was 3 years ago, so it might be better/worse now).

rualca
I use mostly UML.

Component diagrams and deployment diagrams for the general overview, architecture and operations-wise.

Communication diagrams for some workflows.

Sequence diagrams to show how operations are executed.

For onboarding, sometimes a class diagram or two.

joshxyz
Combination of things

- diagram for high level

- diagram for small complex things

- comment on code as necessary

- write good enough documentation that is enough to onboard people to the project structure

- write decent commit messages

joergen7
I use Petri nets. They allow me to diagram communicating systems, making explicit how active components (like functions or services) and passive components (like storage or i/o-devices) interact.

Petri nets have formal semantics easy enough to grasp (firing rule) and provide enough optical cues to make them readable at a glance.

With a little practice, nets can be visually appealing, which helps in presentations and publications. I use Inkscape as a drawing tool.

vladojsem
I use mostly Entity-Relationship for designing a database, and UML Class diagrams.

Personally I prefer typing to drag-and-drop so I use https://www.gleek.io/

Check templates and turials, or ask me if you like to know more ;-)