9 ms·

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

205 points by j0d1 2y ago

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 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!

diegoholiveira 2y ago
Super cool. Huge potential.
- j0d1 2y ago
  Thank you! :)
bberenberg 2y ago
This is really great. However, I’d prefer this as a layer on top of an existing graphing library / syntax.
- j0d1 2y ago
  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".
mckn1ght 2y ago
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 2y ago
  > 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.
battered8310 2y ago
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.
BeefySwain 2y ago
I'd love to see more demos
ilt 2y ago
Thanks for this! I love how minimal and intuitive it is. Feature request - ability to export to Animated PNG!
- j0d1 2y ago
  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.
  - ilt 2y ago
    > Any particular reason for APNG vs GIF? GIFs support only 256 colors while APNG supports millions of colors and does have multi-browser support now. PNGs are also inherently high quality and don't pixelate like lossy image formats - GIF, JPG etc.
avikalp 2y ago
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 2y ago
  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.
beardedwizard 2y ago
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.
- dboreham 2y ago
  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.
  - leonseled 2y ago
    Have you taken a look at swimm.io? Been curious about it for a while now but not a fan of the friction to demo it.
  - azeirah 2y ago
    Jetbrains' recent WriterSide tool is a great addition into this space. It's not exactly wysiwyg, it's side-by-side live preview with different source languages (right now, markdown and some xml language are supported, but they want to support more popular doc languages). It allows you to specify definitions in one location, and reference them in other pages. So if you have for example a documentation page which is about "installing our nodejs package", you can write a version in vars.json or vars.xml or whatever, and reference it in your installation documentation page. When you later have another page which is saying "Hey, we found a bit of an issue with ...this-or-that... package because we're using $NODE_VERSION, and the package hasn't been updated so we have ...such-and-so... workaround", you know when you update the $NODE_VERSION in your vars, that you need to take a look at that package again. It's an extremely basic part of software development, being able to define variables, but I think this is a very good sign of powerful documentation tooling. The only major downside about the platform is that their XML (HTML) extensions to markdown are proprietary, and as such the platform isn't able to grow outside of Jetbrains' oversight. I'm still debating whether I want to switch from Gitlab's Wiki (which is very basic but is really really easy to edit for anyone on the team) to a solution like Jetbrains' Writerside.
chj 2y ago
My laptop screamed after I played around in the redux demo. Must be something like infinite loop.
- j0d1 2y ago
  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).
tristanMatthias 2y ago
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 2y ago
  Yes, me too :) I am working on a viewer / presentation mode that will do just that.
flarg 2y ago
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.
piyushtechsavy 2y ago
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 2y ago
  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.
pfarrell 2y ago
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 2y ago
  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.
reacharavindh 2y ago
Reminds me of this old project.. https://netflixtechblog.com/vizceral-open-source-acc0c32113fe?gi=e840d5d61aae https://netflixtechblog.com/vizceral-open-source-acc0c32113f... I wish ^ were still alive. It was very cool and way ahead of its time.
Lucasoato 2y ago
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.
stopthe 2y ago
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 2y ago
  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).
myrmidon 2y ago
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 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 2y ago
  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 2y ago
  > 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!
kgilpin 2y ago
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 https://appmap.io/docs/reference/navie.html#diagram
Mandatum 2y ago
https://gg-charts.com/#=&file=eJyVksFSgzAQhu88xQ4X9FBa2jodkTKenB7USx3vgYQhEhJM0pbo+O4GhJbW1hlzSXYz+fb/d6MqktKMpkhTwV+JVHYLIfAn/sTRVDMSgpcTxoTnKKM0KVXoAIyA4hDekNkqGwFUQtEGELYRQG0Rk+7sGS+EmzY4AfacxXxXoUuc6WzImf/Fyas6uL2oZzHkBLPzIICcYrLunIKWG7LHf7wn1ba4qPOYf2zYcxjlRdc6NOxccrDf3hx6kRwM/b7ptGRM7DqqVVypXs8ICmIyiUpbvJ8DQCZFOazdKhRDcrMwUamkVWsPdkIyDIRjFSltGInve7CC+vMrGv9ko1opaI9LF3Fatr9pxJv6tQuC73OWtHSxSDcl4dpPBDY+5ZzI1cvT49KL8iBeobQgGBIDz+uHaGwz3h1iROqr4NqNo7GtFJ9xOT1xeeypcTkY33+f/szhG/na3p4= https://gg-charts.com/#=&file=eJyVksFSgzAQhu88xQ4X9FBa2jodkT...
- j0d1 2y ago
  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.
  - j0d1 2y ago
    Fixed in production!
throwaway7ahgb 2y ago
Wishlist: Plug into existing tracing systems. Meaning if I use Datadog, I could use this to map my environment if I have tracing enabled.
Veuxdo 2y ago
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).
- dekervin 2y ago
  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.
  - Veuxdo 2y ago
    If you replace the moving green boxes with arrows, you get the same information (specifically, flow direction). And if the goal is to show the order/steps, then the right tool for the job is a sequence diagram [0]. Again, the animations are good for getting attention, but otherwise this is re-inventing the square wheel. [0] https://en.wikipedia.org/wiki/Sequence_diagram https://en.wikipedia.org/wiki/Sequence_diagram
- zokier 2y ago
  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.
  - Veuxdo 2y ago
    As noted below, the right tool for that is a sequence diagram [0]. These can be static images and read at one's own pace. [0] https://en.wikipedia.org/wiki/Sequence_diagram https://en.wikipedia.org/wiki/Sequence_diagram
- deleted 2y ago
  [deleted]
phantomathkg 2y ago
When going to https://gg-charts.com https://gg-charts.com all I got is a popup of 1 and displayed Hacked by NSF instead.
- j0d1 2y ago
  Try cleaning your browser local storage for https://gg-charts.com 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 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 2y ago
  I fixed the issue, you can reload the page!
acemarke 2y ago
As the author of that original Redux docs tutorial and data flow graph, happy to see it being used as an example here :)
alabhyajindal 2y ago
Very cool! Love how the links rearrange themselves when you move a node.

205 points by j0d1 2y ago

diegoholiveira 2y ago

Super cool. Huge potential.

j0d1 2y ago
Thank you! :)

bberenberg 2y ago

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

j0d1 2y ago
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".

mckn1ght 2y ago

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 2y ago
> 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.

battered8310 2y ago

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.

BeefySwain 2y ago

I'd love to see more demos

ilt 2y ago

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

j0d1 2y ago
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.
- ilt 2y ago
  > Any particular reason for APNG vs GIF? GIFs support only 256 colors while APNG supports millions of colors and does have multi-browser support now. PNGs are also inherently high quality and don't pixelate like lossy image formats - GIF, JPG etc.

avikalp 2y ago

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 2y ago
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.

beardedwizard 2y ago

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.

dboreham 2y ago
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.
- leonseled 2y ago
  Have you taken a look at swimm.io? Been curious about it for a while now but not a fan of the friction to demo it.
- azeirah 2y ago
  Jetbrains' recent WriterSide tool is a great addition into this space. It's not exactly wysiwyg, it's side-by-side live preview with different source languages (right now, markdown and some xml language are supported, but they want to support more popular doc languages). It allows you to specify definitions in one location, and reference them in other pages. So if you have for example a documentation page which is about "installing our nodejs package", you can write a version in vars.json or vars.xml or whatever, and reference it in your installation documentation page. When you later have another page which is saying "Hey, we found a bit of an issue with ...this-or-that... package because we're using $NODE_VERSION, and the package hasn't been updated so we have ...such-and-so... workaround", you know when you update the $NODE_VERSION in your vars, that you need to take a look at that package again. It's an extremely basic part of software development, being able to define variables, but I think this is a very good sign of powerful documentation tooling. The only major downside about the platform is that their XML (HTML) extensions to markdown are proprietary, and as such the platform isn't able to grow outside of Jetbrains' oversight. I'm still debating whether I want to switch from Gitlab's Wiki (which is very basic but is really really easy to edit for anyone on the team) to a solution like Jetbrains' Writerside.

chj 2y ago

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

j0d1 2y ago
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).

tristanMatthias 2y ago

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 2y ago
Yes, me too :) I am working on a viewer / presentation mode that will do just that.

flarg 2y ago

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.

piyushtechsavy 2y ago

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 2y ago
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.

pfarrell 2y ago

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 2y ago
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.

reacharavindh 2y ago

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

Lucasoato 2y ago

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.

stopthe 2y ago

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 2y ago
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).

myrmidon 2y ago

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 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 2y ago
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 2y ago
> 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!

kgilpin 2y ago

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 https://appmap.io/docs/reference/navie.html#diagram

Mandatum 2y ago

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

j0d1 2y ago
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.
- j0d1 2y ago
  Fixed in production!

throwaway7ahgb 2y ago

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

Veuxdo 2y ago

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

dekervin 2y ago
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.
- Veuxdo 2y ago
  If you replace the moving green boxes with arrows, you get the same information (specifically, flow direction). And if the goal is to show the order/steps, then the right tool for the job is a sequence diagram [0]. Again, the animations are good for getting attention, but otherwise this is re-inventing the square wheel. [0] https://en.wikipedia.org/wiki/Sequence_diagram https://en.wikipedia.org/wiki/Sequence_diagram
zokier 2y ago
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.
- Veuxdo 2y ago
  As noted below, the right tool for that is a sequence diagram [0]. These can be static images and read at one's own pace. [0] https://en.wikipedia.org/wiki/Sequence_diagram https://en.wikipedia.org/wiki/Sequence_diagram
deleted 2y ago
[deleted]

phantomathkg 2y ago

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

j0d1 2y ago
Try cleaning your browser local storage for https://gg-charts.com 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 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 2y ago
I fixed the issue, you can reload the page!

acemarke 2y ago

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

alabhyajindal 2y ago

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