from Hacker News

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

by j0d1 on 7/26/24, 4:57 PM with 65 comments

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!

  • by beardedwizard on 7/30/24, 4:51 AM

    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.

  • by myrmidon on 7/30/24, 11:04 AM

    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.

  • by tristanMatthias on 7/30/24, 5:19 AM

    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

  • by throwaway7ahgb on 7/30/24, 12:39 PM

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

  • by kgilpin on 7/30/24, 11:29 AM

    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

  • by Mandatum on 7/30/24, 12:01 PM

  • by pfarrell on 7/30/24, 8:36 AM

    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).

  • by battered8310 on 7/30/24, 3:37 AM

    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.

  • by avikalp on 7/30/24, 4:32 AM

    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.

  • by bberenberg on 7/30/24, 12:58 AM

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

  • by reacharavindh on 7/30/24, 10:19 AM

    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.

  • by stopthe on 7/30/24, 10:48 AM

    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?

  • by Lucasoato on 7/30/24, 10:33 AM

    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.

  • by flarg on 7/30/24, 8:13 AM

    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.

  • by phantomathkg on 7/30/24, 12:53 PM

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

  • by piyushtechsavy on 7/30/24, 8:05 AM

    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.

  • by acemarke on 7/30/24, 4:46 PM

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

  • by alabhyajindal on 8/2/24, 4:09 AM

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

  • by chj on 7/30/24, 4:57 AM

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

  • by ilt on 7/30/24, 4:28 AM

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

    Feature request - ability to export to Animated PNG!

  • by BeefySwain on 7/30/24, 3:51 AM

    I'd love to see more demos

  • by Veuxdo on 7/30/24, 12:48 PM

    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).

  • by mckn1ght on 7/30/24, 1:07 AM

    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.

  • by diegoholiveira on 7/30/24, 12:50 AM

    Super cool. Huge potential.