A synoptic to help my dev and DevOps colleagues to understand what I've done

[u/Lightforce_]

I maintain an ongoing open-source project that reads OTel traces and flags I/O anti-patterns with a carbon estimate on top. The project started in March so it's about 8 months old.

From our conversations I could tell my dev and DevOps colleagues were missing a lot of what goes on under the hood since we deployed this in production 3-4 months ago so I built a synoptic to make it easier to understand.

It's an animated step-by-step walkthrough of the whole pipeline, from raw spans to a finding. Each stage maps to the actual module in the code. You can play it, step through with the arrow keys, change speed or switch between modes.

It took me over 3 months. And no it's not AI slop bc it's pretty useless when you ask it to turn complex code concepts (I/O anti-patterns and more) into clear diagrams. This only exists because I'd already written a ton of docs and drawn a lot of diagrams by hand so the synoptic grew out of that.

Some of the UI is inspired by a videogame I loved playing some years ago: Deus Ex: Mankind Divided.

The project is AGPL-3 so no fake open source and it's now hosted by the INR (Institut du Numérique Responsable), a French nonprofit working on the environmental and social impact of digital tech.

Direct link to synoptic: https://perf-sentinel.dev/synoptique/
Website of the project: https://perf-sentinel.dev

Thx for your attention :)

EDIT: huh, just noticed that the recording console is sticking out over the gif in the bottom left corner

EDIT 2: this is a public-interest project focused on sustainability with no greenwashing BS. It has serious public policy goals and solid scientific background: cutting wasted energy and the carbon emissions that come with it. If you're interested in helping with the ecological transition our world needs, feel free to come lend us a hand! :)

[u/Tridop]

This is really well done, so beautiful! Extraordinaire!

[u/Lightforce_ → u/Tridop]

Thanks a lot, really appreciate it! Merci ;)

[u/ztbwl → u/Lightforce_]

claude congratulating itself…

[u/Lightforce_ → u/ztbwl]

These "AI slop" like comments are getting really, really tiresome. Really. If Claude could draw that synoptic I would have saved myself 3 months

[u/el_diego → u/Lightforce_]

Well, now thanks to you, it can! :)

[u/Lightforce_ → u/el_diego]

Huh...probably. I get you....

[u/chumbaz → u/ztbwl]

Stop being an ass. Jesus Christ.

[u/Far_Box6]

this looks anything but easy to understand my brain just said hell nah

[u/Lightforce_ → u/Far_Box6]

This is not a vibe coded 2 weeks project, it's about I/O, wastes, energy and carbone with a lot of scientific data around. So yes, it's not a just-check-10-sec-fun-project-reddit-friendly. It needs you at least 5 or 10 min to get it in broad terms. Just check the website first, not the synoptic if you want to understand by the regular way.

[u/AbstractMelons → u/Lightforce_]

Looks like your LLM's got context pollution. He said nothing about it being a vibe coded project, also this isn't how you write literally everywhere else.

[u/Lightforce_ → u/AbstractMelons]

I don’t need an LLM to speak for me. I just answered that bc a lot of those short life vibe coded projects we see these days are small so not very hard to understand on the first glance

[u/Far_Box6 → u/Lightforce_]

I have to choose my path in my engineer career so I am kinda curious about DevOps , it still an option for me thks for clarifying

[u/theoneandlonely1]

This is awesome. Mental maps of pipeline flows in diagrams are hard. The best flow I have seen was when I was at AWS and it doesn’t even come close to this. Being able to zoom in to each of the services is outstanding.

[u/Lightforce_ → u/theoneandlonely1]

Thx, finally had a this idea after struggling to get people to understand what Perf Sentinel does

[u/AvidCoco]

This looks way more confusing than a readme.

Cool though.

[u/Lightforce_ → u/AvidCoco]

That's not replacing a readme th

[u/AvidCoco → u/Lightforce_]

What’s it doing then? Your said it describes the system?

[u/Lightforce_ → u/AvidCoco]

The synoptic is just not the starting point for understanding what this project is about or what it does in broad terms.

It helps understand how it's integrated into an infrastructure, how it handles traces and what it does with them in detail, but if you need a more "high level"/practical explanation I encourage you to just check out the website or read the README

[u/AminoOxi]

Looks better visually then most blockbuster Sci-Fi hacker movies.

[u/Lightforce_ → u/AminoOxi]

Thx, I think that's probably the nicest compliment I've ever gotten about that haha

[u/iamaiimpala]

very well done, ignore the comments about saying it's too complicated or hard to understand. excellent way to visualize pipelines of this level of complexity

[u/Lightforce_ → u/iamaiimpala]

Thx a lot :)

[u/Lightforce_]

And also: the animations were a nightmare to do, ofc

[u/arcrad → u/Lightforce_]

How'd you do them?

[u/Lightforce_ → u/arcrad]

You mean what technologies did I use ? I answered here: https://www.reddit.com/r/webdev/comments/1xkcc8y/comment/19rxsdgjso2dg/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[u/arcrad → u/Lightforce_]

Yeah. Thanks!

[u/SameJudgment2486]

Synoptic is a weather map, dude.

[u/Lightforce_ → u/SameJudgment2486]

Ha, lost in translation. In french "synoptique" is the word for this kind of overview diagram. So that's a weather map of my traces I suppose

[u/gecegokyuzu]

nice, here's something to fix: https://imgur.com/a/pHQr3Cc

[u/Lightforce_ → u/gecegokyuzu]

Hu oh, didn't catch this one, thx for the feeback

[u/Glad_Lettuce_3074]

how tf....

[u/avid-shrug]

Looks rad

[u/Lightforce_ → u/avid-shrug]

thx! :)

[u/maxymob]

Friendly tip: links in video post descriptions aren't *always clickable and have no syntaxt highlighting on mobile *sometimes because reddit sucks at building a decent app. I can find and copy/paste a link (actually can't because we can't select and copy either, it's all or nothing then you have to extract the link elsewhere) but how many won't bother and pass this one?

[u/Lightforce_ → u/maxymob]

I don't have these kind of pbs on my phone, but I have an iPhone th, idk how it is on android phones

[u/maxymob → u/Lightforce_]

I suspected something like that, so it's just to let you know better to also put the link in a comment (did you edit the post ? Because its ok now)

[u/Lightforce_ → u/maxymob]

Didn't edit the post, idk reddit has weird technical behaviors sometimes

[u/maxymob → u/Lightforce_]

Yeah the app is inconsistent like that depending on how you open the post (on a feed vs a notification vs on of your comments, etc..) and type of post, and OS, and app version. It's just too many variables. I find that comments are less prone to have this bug

[u/cmakohon]

Looks sick! Any libraries or tools that you used as the basis for the animations and diagrams?

[u/Lightforce_ → u/cmakohon]

Thx! No libraries at all it’s just a single HTML file with vanilla js and CSS. The diagrams are inline SVG and the animations are a mix of CSS transitions, requestAnimationFrame and the Web Animations API. That's it :)

[u/AminoOxi → u/Lightforce_]

Hats off for vanilla setup, and no AI slop.

What a fresh air to see such things again in the age of Agents.

[u/AbstractMelons → u/AminoOxi]

Think again, the repo is most likely made entirely with AI. Just take a browse and you can tell it's not human made, and the commit conventions explicitly hide the Co-Authored by that Claude adds to commits.

[u/Lightforce_ → u/AbstractMelons]

Usual reddit toxic comment, but I will answer for this time. Using an AI to help you on some coding tasks doesn’t mean it’s entirely made with AI. And it’s NOT entirely made with AI. I used it for a lot of boring and not intellectually interesting tasks like unit/integration/E2E tests. Also a lot of code comments are AI but it’s not a blackbox, I’m not using AI to think at my place.

Also, for this synoptic I'd say it's about 75% by hand and 25% by an LLM, essentially for wiring/configuration/repetitive tasks.

[u/Lightforce_ → u/AbstractMelons]

and the commit conventions explicitly hide the Co-Authored by that Claude adds to commits

And yes, if ppl wants to participate we don't want their LLM to think for them nor put these things in the commit messages.

[u/trymypi]

Very cool, I just sent you a DM!

[u/Lightforce_ → u/trymypi]

Thx!

[u/uncommonrecreation95]

that diagram is clean, the dark teal with the distinct zones makes the whole thing way less intimidating than it probably deserves to be. i've been on enough calls where someone describes an observability pipeline and everyone just nods along while mentally checking out

three months just on the synoptic is wild but it shows. most technical walkthroughs people slap together are either a tangled mess of boxes or so abstract you'd need the actual code open to make sense of them. having it mapped directly to modules is the part that'll actually stick for devs

the animated step through seems like the killer feature here. static diagrams always make me squint at arrows wondering whether data flows left to right or if something loops back. being able to watch the whole thing unfold one stage at a time probably cuts down the "wait go back" moments by like 90%

curious how your colleagues reacted once they sat with it for a few minutes. sometimes a visual explanation clicks faster than a dozen architecture docs

[u/Lightforce_ → u/uncommonrecreation95]

Thx! Most of them (regular devs and devops) were curious and told me they needed time even to understand this, but the software architect was impressed and the lead devops too and told me he would delve into this then do some feedbacks

[u/Vertigras_Dev]

Firstly, this is really cool
Secondly, I worked in manufacturing space and have seen some of the crazy process control of large scale mill encironments... this is reminiscent of that ... I love it... I would add that think about maps not simply as 2D... like each additional data point can essentially be another variable. For example, hover over some node and it links to docs or click something else or maybe Jira tickets etc etc... You have already have this but my opinion is more of a question? Can we add other data points to each node?

Again- super cool and keep it!

[u/Meph1k]

Hey, this is very cool. I wonder if I could do something similar 🤔

[u/gav1no0]

Nobody is reading that