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

205 点作者 j0d111 个月前

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 <a href="https://gg-charts.com" rel="nofollow">https://gg-charts.com</a> 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!

24 条评论

beardedwizard10 个月前

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.

评论 #41106270 未加载

评论 #41107830 未加载

评论 #41109031 未加载

评论 #41106228 未加载

评论 #41106573 未加载

评论 #41108547 未加载

myrmidon10 个月前

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: <a href="https://drakonhub.com/start-drakon" rel="nofollow">https://drakonhub.com/start-drakon</a>).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.

评论 #41108864 未加载

评论 #41109128 未加载

tristanMatthias10 个月前

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

评论 #41109381 未加载

throwaway7ahgb10 个月前

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

kgilpin10 个月前

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.<a href="https://appmap.io/docs/reference/navie.html#diagram" rel="nofollow">https://appmap.io/docs/reference/navie.html#diagram</a>

Mandatum10 个月前

<a href="https://gg-charts.com/#=&file=eJyVksFSgzAQhu88xQ4X9FBa2jodkTKenB7USx3vgYQhEhJM0pbo+O4GhJbW1hlzSXYz+fb/d6MqktKMpkhTwV+JVHYLIfAn/sTRVDMSgpcTxoTnKKM0KVXoAIyA4hDekNkqGwFUQtEGELYRQG0Rk+7sGS+EmzY4AfacxXxXoUuc6WzImf/Fyas6uL2oZzHkBLPzIICcYrLunIKWG7LHf7wn1ba4qPOYf2zYcxjlRdc6NOxccrDf3hx6kRwM/b7ptGRM7DqqVVypXs8ICmIyiUpbvJ8DQCZFOazdKhRDcrMwUamkVWsPdkIyDIRjFSltGInve7CC+vMrGv9ko1opaI9LF3Fatr9pxJv6tQuC73OWtHSxSDcl4dpPBDY+5ZzI1cvT49KL8iBeobQgGBIDz+uHaGwz3h1iROqr4NqNo7GtFJ9xOT1xeeypcTkY33+f/szhG/na3p4=" rel="nofollow">https://gg-charts.com/#=&file=eJyVksFSgzAQhu88xQ4X9FBa2jodkT...</a>

评论 #41109413 未加载

pfarrell10 个月前

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

评论 #41107226 未加载

battered831010 个月前

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.

avikalp10 个月前

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.

评论 #41109729 未加载

bberenberg10 个月前

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

评论 #41105644 未加载

reacharavindh10 个月前

Reminds me of this old project..<a href="https://netflixtechblog.com/vizceral-open-source-acc0c32113fe?gi=e840d5d61aae" rel="nofollow">https://netflixtechblog.com/vizceral-open-source-acc0c32113f...</a>I wish ^ were still alive. It was very cool and way ahead of its time.

stopthe10 个月前

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?

评论 #41109305 未加载

Lucasoato10 个月前

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.

flarg10 个月前

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.

phantomathkg10 个月前

When going to <a href="https://gg-charts.com" rel="nofollow">https://gg-charts.com</a> all I got is a popup of 1 and displayed Hacked by NSF instead.

评论 #41109473 未加载

评论 #41111490 未加载

piyushtechsavy10 个月前

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.

评论 #41109370 未加载

acemarke10 个月前

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

alabhyajindal10 个月前

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

chj10 个月前

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

评论 #41108859 未加载

ilt10 个月前

Thanks for this! I love how minimal and intuitive it is.Feature request - ability to export to Animated PNG!

评论 #41108993 未加载

BeefySwain10 个月前

I'd love to see more demos

Veuxdo10 个月前

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

评论 #41109256 未加载

评论 #41108691 未加载

评论 #41108798 未加载

评论 #41109144 未加载

mckn1ght10 个月前

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.

评论 #41105582 未加载

diegoholiveira10 个月前

Super cool. Huge potential.

评论 #41105585 未加载