Show HN: Create diagrams of complex data flows in software systems

[j0d1]

Hello HN,

It has been a while since I contributed to the web, so I decided to get back in shape and publish "something".

This app is a POC of "what if diagrams were more dynamic". I'm a software engineer by trade, and with conventional tools, I often times struggle to explain flows of data in complex software systems.

I got inspired by video games like The Incredible Machine and Factorio, as in some ways, software systems tend to become Rube Goldberg-esque machines ;) As a side quest, I also wanted to craft diagrams faster than text-based tools (ex: mermaid), as I am always forgetting their syntax.

If you try the app, you will certainly struggle with its UI, especially when crafting flows, as I used all my brain juice on the core idea. I have cool features in my head for a v1 but today I really wanted to simply show what I got.

You can access the app directly at https://gg-charts.com and there are some examples in the Github README to get you started.

Happy to answer questions and humbly receive your honest feedback on this crazy idea!

[beardedwizard]

I love it, but I can't help but wonder why I almost never see complete or up to date diagrams in an enterprise or at scale software engineering setting, despite there being so many tools in this space (mermaid, uml, draw.io, graphviz, etc). I wonder what the barrier is or how to make tools like this fundamentally different so that we would see more adoption.

This comes up frequently in the context of secure design review, or more generally when outside stakeholders need to understand a foreign system.

Nobody argues against diagrams as good practice, but so few actually make them. That tells me incentives/costs are still off, despite good intent.

Information extraction from design docs could be one approach to suggest a diagram for free but that creates a dependency on the fidelity of the design document.

[viraptor]

> why I almost never see complete

That's a huge scope question on its own. What's "complete"? How low level or wide do you go? What about the view of internals of the external systems you rely on? What about their mapping to teams/owners? C4 helps a bit here by saying "whole organisation throws everything possible into this and when you want to see it, you use scoped views instead".

> or up to date diagrams

"When exactly does the system change" is tricky too. When you change the code? When you enable the new system? Who knows that the diagram of the system exists and where? It's a bit of an issue of unknown unknowns. Again, the C4 idea helps here a bit, but there are still going to be random projections of state at a given time saved in various places.

Another big issue is that structure and presentation are very different. Generated diagrams of infrastructure or code look shit, universally. On the other hand, well presented diagrams are just snapshots in time that get preserved for years even if their outdated. I mean this is what C4 page shows as one of their results https://c4model.com/img/alternative-1.png which is an unreadable mess and this is what they initially complain about https://c4model.com/img/sketch-2.jpg which is perfectly sized and context specific goodness. The first is good for knowledge preservation, but if anyone needs to understand things, I'm making the second one for them.

[stopthe]

In my dreams, you have docs and source code in the same repo, and update both in a single pull request. In reality, confluence...

[h1fra]

I tried to solve this after years of frustration, but it's a complex task, especially that "complete" means there is a lot of noise in the diagrams. Plus the data gathering is an immense task, not everything is in the repo even with world class terraform, you have to connect to external sources.

https://github.com/specfy/specfy

[dboreham]

My take is that it's a bit worse than that: the whole doc tooling scene is a dumpster fire. I want to maintain technical documentation under revision control (same revision control system as I use for source code), and I want to be able to embed diagrams in said documents (also under revision control) and I want to wysiwyg edit those things. Amazingly in 2024 this does not exist.

[solatic]

If you want to understand the underlying problem, think about geographical mapping (e.g. Google Maps). When drawing a map, how do you decide what gets featured? Roads, businesses? How big can the text be? How do you keep it all readable?

Diagramming is the same problem, but usually lacking the context to decide what to draw. The same stakeholders may be interested in different combinations of features depending on which business questions they're trying to answer. Geographic mapping is practically a constrained domain by comparison. And it's supposed to be feasible to do it automatically for systems diagrams? /hard-skeptic

[Veuxdo]

Honestly, I think you are using free (and old) diagramming tools, and you are getting why you pay for. There are plenty of tools designed specifically for documenting large systems, but they cost money.

[myrmidon]

This is pretty nice! Really like the choices for the Keyboard shortcuts and how they are presented.

My favorite tool for creating diagrams so far is still Drakon (try in browser: https://drakonhub.com/start-drakon).

It has the best "move element" behavior of any diagramming tool I've ever encountered (it shifts neighboring elements predictably, minimally and often in the exact way that I actually want).

gg-charts is pretty close in some respects, but still feels a bit more clunky to me, because the "move element" function gives less direct feedback, and in some cases complicates the layout more than I feel necessary.

[jiehong]

That's pretty nice that we can now do that in a browser!

I was also surprised diagrams are exportable to json. Yet, it does contain (x, y) coordinates, making that json impossible to write by hand.

If drakon had a a more human friendly and git friendly format (at least json is more git friendly), I'd gladly use it much more often!

[breck]

> It has the best "move element" behavior of any diagramming tool I've ever encountered (it shifts neighboring elements predictably, minimally and often in the exact way that I actually want).

Thanks for calling attention to this. You are right. Drakon does that incredibly well!

[tristanMatthias]

Love this. Would love to be able to: a) Pause b) Step through the individual steps (I see they're titled) c) Go back / Forward to grokk better

[j0d1]

Yes, me too :) I am working on a viewer / presentation mode that will do just that.

[throwaway7ahgb]

Wishlist: Plug into existing tracing systems. Meaning if I use Datadog, I could use this to map my environment if I have tracing enabled.

[kgilpin]

Is there a text format for this? I’d be interested in seeing if we can generate these from trace data the way that we do for sequence diagrams and flow charts.

https://appmap.io/docs/reference/navie.html#diagram

[Mandatum]

https://gg-charts.com/#=&file=eJyVksFSgzAQhu88xQ4X9FBa2jodkT...

[j0d1]

For those reading this, do not click on that link above. It executes a script that renders the app unusable until you clear your local storage.

Thanks for the report, I'll fix that.

[pfarrell]

Thanks for sharing your work. I too have the problems you’re attempting to address. Makes me think of LabView (which I would recommend checking out for inspiration if you’re unaware of it).

[rvdca]

The love-hate relationship with LabVIEW is something I can not get closure about : great tool, abysmal ergonmics, revolutionnary piece of software, ubiquitous in some fields and still some LabVIEW ergonomics is just SO...bad : want to zoom on your diagram ? Out of luck !

Heard of death by a thousand cuts ? LabVIEW comes to mind.

[battered8310]

This is pretty cool. I’ll definitely be following the development of this. I was just starting to look at how something similar could be done using mermaid.js or plantuml.

[avikalp]

Wow, this looks very interesting. I saw the diagram of your own application and it looks more dynamic than the ones that I am generally used to at work.

I am curious about the motivation behind this project. What experiences triggered you to think that static diagrams are a problem?

Your answer will help me decide whether I'd like to use it for my own documentation or not.

[j0d1]

Thank you for your comment!

I decided to work on gg because I want my colleagues to grok our complex software architecture, and I don't feel like I am able to achieve that with textual documentation + static diagrams alone.

I have been in a lot of brainstorming sessions drawing boxes and arrows on a whiteboard. I have produced a lot of diagrams with mermaid, draw.io, miro, etc. I produced a lot of documentation to explain how the software is built. Those are all good tools to get everyone on the same page, and yet, I feel like there is a missing piece of the puzzle to explain a software architecture simply and concisely that even the new junior developer recruit will understand.

[bberenberg]

This is really great. However, I’d prefer this as a layer on top of an existing graphing library / syntax.

[j0d1]

I thought about extending mermaid's flowcharts instead of starting from scratch. No particular reason I did not go that route, mostly "to do my own thing".

[reacharavindh]

Reminds me of this old project..

https://netflixtechblog.com/vizceral-open-source-acc0c32113f...

I wish ^ were still alive. It was very cool and way ahead of its time.

[stopthe]

Wow, I'm glad that I visited HN when your tool was at the top. I'm going to use it to illustrate docs on our internal DAG-like system. By the way, is there a simple way to export the animated diagram as a GIF?

[j0d1]

Thank you for your comment :)

I'm working on supporting webm first, as I am close to have a working feature using the MediaRecorder API of the browser. Exporting to gif will come after that, as it can be done by third-party tools as a workaround in the meantime (i.e. webm to gif).

[Lucasoato]

The site doesn't work, I've tried reaching it from Amsterdam, Netherlands. First it raises an issue with the certificate, then it's blocked by the ISP. Very strange.

[flarg]

In case any of you use draw.io note that you can animate lines with a right click. Last time I did this for a presentation I did have to record to gif but it worked really well.

[phantomathkg]

When going to https://gg-charts.com all I got is a popup of 1 and displayed Hacked by NSF instead.

[j0d1]

Try cleaning your browser local storage for https://gg-charts.com.

There is currently a bug in the app that let someone inject a JS snippet to execute (to confirm) in the URL "file" property. The app then save the content of that "file" property in the local storage, so every time you open https://gg-charts.com, it loads this data from local storage and re-execute the JS snippet.

I'll fix that today, sorry for the inconvenience. :-/ The web is the far west!

[j0d1]

I fixed the issue, you can reload the page!

[piyushtechsavy]

I really liked the UI and the ease with which diagrams can be created.Will it be possible to import diagrams from other tools like draw.io here.

[j0d1]

I think it is a great idea!

There is no plan yet to support importers directly in gg but the graphs produced with gg have a YAML/JSON representation under the hood so producing a "draw.io to gg" importer is feasible.

[acemarke]

As the author of that original Redux docs tutorial and data flow graph, happy to see it being used as an example here :)

[alabhyajindal]

Very cool! Love how the links rearrange themselves when you move a node.

[chj]

My laptop screamed after I played around in the redux demo. Must be something like infinite loop.

[j0d1]

My algorithm to detect / resolve collisions has a bug in it. In some cases, a system will be displaced on the right, then on the left, then on the right... until it reaches a maximum number of allowed displacements. When it happens, moving a system feels very slow.

I intend to fix that bug (eh!) and I'm also thinking about moving this costly algorithm in web workers (+ parallelize it).

[ilt]

Thanks for this! I love how minimal and intuitive it is.

Feature request - ability to export to Animated PNG!

[j0d1]

I'll create an issue to support exporting the animation in v1. Any particular reason for APNG vs GIF?

The animation in the README.md was captured with the MediaRecorder API. It produced a webm that I "cropped -> clipped -> to gif" manually. I am not that far to produce a looping webm that is perfectly cropped & clipped. I may release that first, and then tackle gif / apng / ??? later.

[BeefySwain]

I'd love to see more demos

[Veuxdo]

Congrats on the launch. Looks very clean.

I think the core concept is flawed, though. "Animated diagrams" are great for generating engagement on social media, but in practice an animated line doesn't tell you anything an arrow wouldn't. They just become a distraction. Plus, they make it harder to read a label on the line (and "real" diagrams should have those).

[j0d1]

Someone submitted an issue on Github to add labels on links (i.e. lines) and I think it's a great idea for a v1. In my mind, the animations won't get in the way of reading the labels, but implementation will tell! I will also probably implement them like I implemented titles on systems, which is to avoid routing links over them.

> "Animated diagrams" are great for generating engagement on social media, but in practice an animated line doesn't tell you anything an arrow wouldn't.

Instead of showing a little green box moving from system A to system B, I could have shown static arrows alongside the link between system A to system B, or something similar.

I chose the moving green box as it represents the data flowing in the system, in a tangible / concrete manner.

It communicates:

- A data is created/produced/etc. at system A.

- The data is transferred/copied/moved/etc. to the system B.

- The data is received/consumed/etc. by the system B.

[dekervin]

Such a wrong take. An animated line instantly brings you focus, and remove any guess work, and unease, when analysing a complex system. And in this example , allow you to instatly replay part of the system in your head. Keep working in the direction.

[zokier]

The animations turn these diagrams into hybrid between basic box-and-arrows diagrams and sequence diagrams, because the animations capture the temporal relationship between actions. They certainly can not be naively substituted with static arrows without loss of information.

[mckn1ght]

I know you said you prefer the GUI over text-based, but that was the exact thing I wanted to ask for after trying your demo. GUI just doesn’t scale like text does. How will you be able to generate a diagram from code or a running process unless you have some intermediate textual representation? I assume you do anyways, at least implicitly, to save the state of your GUI’s output. You should bring that into focus. The GUI editor is simply a nonstarter for me. How do you compare the difference between two diagrams?

IMO the editing/sharing/maintenance experience of Mermaid’s sequence diagrams is nicer. What is your opinion on sequence diagrams in general? I much prefer their static nature and directional flow over animations you have to wait for when you need to review a detail you missed, and the top/down direction is better than trying to track points moving around in arbitrary directions.

[j0d1]

> I assume you do anyways, at least implicitly, to save the state of your GUI’s output. You should bring that into focus.

Indeed, I do have a YAML / JSON representation under the hood, which is validated by JSON Schema. In the app, you can click on "file > yaml editor" to access it.

I thought about having a mermaid-like syntax on top of my YAML representation but before adding this, I need to have a proper "auto-layout" feature. Currently, the editor is responsible to detect collisions between systems and to "space them out" until no collisions are found. I need to bring that responsibility back to the core library instead of the editor, as right now, the core library only accept systems without collisions to resolve. TL;DR: it's feasible and I'm open to the idea!

> What is your opinion on sequence diagrams in general?

I like them in small bites, i.e. with few participants and presenting one simple flow. They do become daunting (for me) to read and maintain with more participants and complex flows. I like to sprinkle them in my documentations. In mermaid, I find myself bouncing from "flow diagrams" to "sequence diagrams" all the time.

> over animations you have to wait for when you need to review a detail you missed

I'm currently working on a "viewer mode" / "presentation mode" as I don't want this continuous playback loop to become the default way to present a flow in a system. This continuous playback is useful as an overview of a flow but not to present it to an audience or to embed in a technical documentation. I want to be able to present a flow, step by step, as if it was a slideshow.

[diegoholiveira]

Super cool. Huge potential.

[j0d1]

Thank you! :)