Diagram Like A
Principal Engineer
by Jeremy Lindblom
@jeremeamia
Slide 2
Slide 2 text
1. Principal Engineers
Engineering across team boundaries
Slide 3
Slide 3 text
$200k-$400k+
“Total Compensation” includes
all salary, bonuses, equity, stock,
and benefits.
3
Potential Compensation
Sources: levels.fyi and Glassdoor
Slide 4
Slide 4 text
Software Engineer Leveling
4
JUNIOR
SENIOR
⬗ Compensation is typically
based on a predefined range
for your level.
Slide 5
Slide 5 text
Software Engineer Leveling
5
JUNIOR
PRINCIPAL
SENIOR
Slide 6
Slide 6 text
Software Engineer Leveling
6
JUNIOR
STAFF
SENIOR
PRINCIPAL
Slide 7
Slide 7 text
Software Engineer Leveling
7
JUNIOR
STAFF
SENIOR
PRINCIPAL
JUNIOR
PRINCIPAL
SENIOR
STAFF
Slide 8
Slide 8 text
Software Engineer Leveling
8
DISTINGUISHED
FELLOW
JUNIOR
STAFF
SENIOR
PRINCIPAL
⬗ No standards
⬗ Company-specific
⬗ Depends on company size
Slide 9
Slide 9 text
Principles of a Principal
1. Always Curious
2. Good Communication
3. Team Acceleration
4. Inter-team Focus
5. Engineering Experience
9
Slide 10
Slide 10 text
“The biggest issue on software
teams is making sure
everyone understands what
everyone else is doing.”
– Martin Fowler
10
Slide 11
Slide 11 text
Communication: Listen & Learn
11
⬗ Customers
⬗ Company, orgs, & teams
⬗ Key people
⬗ Existing solutions
⬗ Current initiatives
⬗ Implementation details
Slide 12
Slide 12 text
Communication: Give & Guide
12
⬗ Share information & skills
⬗ Define problems & solutions
⬗ Create documentation & diagrams
⬗ Create interfaces & contracts
⬗ Connect people
Slide 13
Slide 13 text
Principal Engineers…
often serve as the
“public API”
for the orgs/teams
they represent.
13
Slide 14
Slide 14 text
14
Don’t be a Gate.
Be a Gateway.
Slide 15
Slide 15 text
2. Diagrams
Boxes, lines, & arrows
Boxes
Arrows
&
Slide 16
Slide 16 text
16
What to Diagram?
⬗ Structures – Systems and components,
AND their relationships, at various layers
of abstraction
⬗ Behaviors – Processes, workflows,
data flows, state machines, etc.
Slide 17
Slide 17 text
17
When to Diagram?
⬗ Before implementation
(Design ahead of projects and/or sprints)
⬗ During implementation
(As part of a ticket or as things change)
⬗ After implementation
(For documentation or onboarding)
ANY TIME!
Slide 18
Slide 18 text
18
How to Diagram?
⬗ Standards: UML, ERD, C4, etc., or ad hoc
⬗ Mediums: Pen/Marker vs. Computer
⬗ Method: Drawing vs. Coding
Slide 19
Slide 19 text
Unified Modeling Language - UML
1. Software industry standard
2. Born in 1994 (Rational Software, now IBM)
3. Plenty of tooling available
19
Slide 20
Slide 20 text
Unified Modeling Language - UML
20
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
22
Activity Diagrams
⬗ Workflows, actions, etc.
⬗ Supports conditional
and parallel logic
⬗ Fairly easy to read,
Even for non-tech
Slide 23
Slide 23 text
23
Class Diagrams
⬗ Great for OOP, DB, and system design
⬗ Be as simple or detailed as you like
⬗ Focuses on relationships
Slide 24
Slide 24 text
24
Slide 25
Slide 25 text
25
Class Diagrams - Entity Relationship Diagram (ERD)
Slide 26
Slide 26 text
26
Sequence Diagrams
⬗ Implementation details
⬗ In reference to user
⬗ Shows e2e flow
⬗ Swimlanes can be classes,
services, DBs, etc.
Slide 27
Slide 27 text
27
Why Diagram?
1. Improve development speed and quality
Frontend developers use UI Mockups.
Backend developers use UML diagrams.
Slide 28
Slide 28 text
28
Why Diagram?
2. You were asked to
Sometimes other orgs (internal or external)
want to see certain kinds of diagrams.
💡 Tip: Know your audience.
Slide 29
Slide 29 text
29
Why Diagram?
3. Prevent catastrophe!
Remove confusion and provide
A well-defined goal.
Slide 30
Slide 30 text
30
When I Should Have Diagrammed
Lyrics by
Jeremy Lindblom
Original song by
Bruno Mars
“When I Was Your Man”
Slide 31
Slide 31 text
31
Same code but it seems just a little bit brittle now.
My commits in the git log, but it don’t look the same.
When my team talks about it, all I do is just wonder how
Nothing turned out how I planned it out in my brain🧠.
Slide 32
Slide 32 text
32
It all just feels like foo— bar! 💩
Mmm, too new, too junior to realize…
Slide 33
Slide 33 text
33
That I should have diagrammed it, and shared the plan.
Made sure we could understand it, before the work began.
Showed you all my boxes📦 and arrows ⇄,
so you could write a well-made program.
Now there’s tech debt growing in a backlog without an end.
Slide 34
Slide 34 text
34
How could’ve we developed this in such a silly way?
I guess a sequence diagram or two would’ve helped us see.
Now we’ll never, never get to clean up this mess we’ve made! Oh—.
And that haunts👻 me every time I open my IDE.
Slide 35
Slide 35 text
35
It all just feels like foo— bar! 💩
Mmm, too new, too junior to realize…
Slide 36
Slide 36 text
36
That I should have diagrammed it, and shared the plan.
Made sure we could understand it, before the work began.
Showed you all my boxes📦 and arrows ⇄,
so you could write a well-made program.
Now there’s tech debt growing in a backlog without an end.
Slide 37
Slide 37 text
37
At our team retro—,
I was the first to say that it’s all wrong—!
But I know it’s probably much too late⏰,
To refactor this code to make it all be great,
So I just want you to know—.
Slide 38
Slide 38 text
38
That I should have diagrammed it, and shared the plan.
Made sure we could understand it, before the work began.
Showed you all my boxes📦 and arrows ⇄,
so you could write a well-made program.
Now there’s tech debt growing in a backlog without an end.
Slide 39
Slide 39 text
39
Yeah, just tech debt
and groaning😩,
because I didn’t diagram.
Mermaid.js
“Mermaid lets you create
diagrams and visualizations
using text and code.”
https://mermaid-js.github.io
42
Slide 43
Slide 43 text
Mermaid.js
flowchart LR
A((Start)) --> B[Call API]
B --> C{Success?}
C -->|Yes| D[Return Result]
D --> E((End: Success))
C -->|No| F{Too Many Attempts?}
F -->|Yes| G((End: Error))
F -->|No| H[Retry Call]
H --> C
43
Slide 44
Slide 44 text
Selecting a Tool
1. Collaboration (sharing, access, cost)
2. Maintenance (keeping it up-to-date)
3. Embeddability (in docs or repos)
4. Customization
5. Easy to Learn
6. Usability
44
Slide 45
Slide 45 text
45
Let’s Draw Code!
Slide 46
Slide 46 text
46
Thanks!
Any questions?
Jeremy Lindblom
@jeremeamia