[{"data":1,"prerenderedAt":436},["ShallowReactive",2],{"project-41080189":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":33,"aspects":34,"strip":43,"post_text":45,"what":46,"said":80,"maker_in_thread":217,"shape":229,"grid":233,"attempts":399,"same_week":400,"maker_shows":32,"maker_hidden":428,"reader_version":429,"card":430},"41080189","gg","Create diagrams of complex data flows in software systems","title","Show HN: Create diagrams of complex data flows in software systems","https:\u002F\u002Fgithub.com\u002Fjodigiordano\u002Fgg","github.com","j0d1",1722013032,2024,205,65,385,3515,11,"notable","dev_tools","diagramming tool","web_app",[24,25,26,27],"data flow diagram","animated diagram","architecture diagram","mermaid alternative","debated",-0.014,{"positive":31,"neutral":31,"mixed":32,"critical":31},7,1,22,{"design":35,"idea":37,"execution":39,"performance":41,"docs":42},{"positive":36,"critical":32},2,{"positive":38,"critical":36},3,{"positive":40,"critical":38},0,{"positive":40,"critical":32},{"positive":40,"critical":40},[40,40,40,40,40,40,40,40,40,40,40,40,38,40,44,38,32,40,44,44,38,32,40,44,32,32,40,38,40,44,32,38,38,32,40,40,40,32,44,44],5,"Hello HN,\n\nIt has been a while since I contributed to the web, so I decided to get back in shape and publish \"something\".\n\nThis 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.\n\nI 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",{"problem":47,"audience":56,"pricing":65,"motivation":66,"time_to_build":65,"stack":70,"openness":77,"stage":78,"team_size":79},{"value":48,"source":49,"evidence":50},"Explaining complex data flows in software systems is hard with static diagrams","maker",[51,53],{"id":52},"post",{"id":54,"by":11,"text":55},"41109729","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…",{"value":57,"source":58,"evidence":59},"Software engineers documenting system architecture","inferred",[60,61],{"id":54,"by":11,"text":55},{"id":62,"by":63,"text":64},"41106058","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…",null,{"value":67,"source":49,"evidence":68},"Colleagues struggle to grok complex architecture with text docs and static diagrams",[69],{"id":54,"by":11,"text":55},[71],{"value":72,"source":49,"evidence":73},"YAML\u002FJSON representation validated by JSON Schema",[74],{"id":75,"by":11,"text":76},"41105582","> 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 \u002F JSON representation under the…","unknown","prototype","solo",{"praise":81,"objections":105,"requests":141,"questions":170,"alternatives":183},[82,98],{"value":83,"source":84,"evidence":85},"Clean UI and easy diagram creation","commenter",[86,90,94],{"id":87,"by":88,"text":89},"41106237","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 \u002F Forward to grokk better",{"id":91,"by":92,"text":93},"41107037","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.",{"id":95,"by":96,"text":97},"41136036","alabhyajindal","Very cool! Love how the links rearrange themselves when you move a node.",{"value":99,"source":84,"evidence":100},"Animated links are useful for understanding flows",[101],{"id":102,"by":103,"text":104},"41108691","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…",[106,113,120,131],{"value":107,"source":84,"evidence":108},"Animations are a distraction and make labels hard to read",[109],{"id":110,"by":111,"text":112},"41108587","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…",{"value":114,"source":84,"evidence":115},"GUI editing does not scale compared to text-based diagrams",[116],{"id":117,"by":118,"text":119},"41105209","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…",{"value":121,"source":84,"evidence":122},"Site had a security issue injecting JavaScript via URL",[123,127],{"id":124,"by":125,"text":126},"41108233","Mandatum","https:\u002F\u002Fgg-charts.com\u002F#=&file=eJyVksFSgzAQhu88xQ4X9FBa2jodkTKenB7USx3vgYQhEhJM0pbo+O4GhJbW1hlzSXYz+fb\u002Fd6MqktKMpkhTwV+JVHYLIfAn\u002FsTRVDMSgpcTxoTnKKM0KVXoAIyA4hDekNkqGwFUQtEGELYRQG0Rk…",{"id":128,"by":129,"text":130},"41108637","phantomathkg","When going to https:\u002F\u002Fgg-charts.com all I got is a popup of 1 and displayed Hacked by NSF instead.",{"value":132,"source":84,"evidence":133},"Performance problems from collision resolution loop",[134,138],{"id":135,"by":136,"text":137},"41106157","chj","My laptop screamed after I played around in the redux demo. Must be something like infinite loop.",{"id":139,"by":11,"text":140},"41108859","My algorithm to detect \u002F 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…",[142,153,157,163],{"value":143,"source":84,"evidence":144},"Export animation to GIF or APNG",[145,149],{"id":146,"by":147,"text":148},"41106046","ilt","Thanks for this! I love how minimal and intuitive it is. Feature request - ability to export to Animated PNG!",{"id":150,"by":151,"text":152},"41107806","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…",{"value":154,"source":84,"evidence":155},"Import diagrams from draw.io",[156],{"id":91,"by":92,"text":93},{"value":158,"source":49,"evidence":159},"Support labels on links",[160],{"id":161,"by":11,"text":162},"41109256","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…",{"value":164,"source":84,"evidence":165},"Integrate with existing tracing systems",[166],{"id":167,"by":168,"text":169},"41108528","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.",[171,179],{"value":172,"source":84,"evidence":173},"Whether the tool can generate diagrams from code or text",[174,175],{"id":117,"by":118,"text":119},{"id":176,"by":177,"text":178},"41108007","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.…",{"value":180,"source":84,"evidence":181},"Whether the app can step through flows",[182],{"id":87,"by":88,"text":89},[184,195,203,210],{"value":185,"source":84,"evidence":186},"Mermaid",[187,191],{"id":188,"by":189,"text":190},"41105862","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.",{"id":192,"by":193,"text":194},"41105154","bberenberg","This is really great. However, I’d prefer this as a layer on top of an existing graphing library \u002F syntax.",{"value":196,"source":84,"evidence":197},"draw.io",[198,202],{"id":199,"by":200,"text":201},"41107077","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.",{"id":91,"by":92,"text":93},{"value":204,"source":84,"evidence":205},"Drakon",[206],{"id":207,"by":208,"text":209},"41107888","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:…",{"value":211,"source":84,"evidence":212},"PlantUML",[213],{"id":214,"by":215,"text":216},"41107916","hcarvalhoalves","Org files with embedded PlantUML blocks get close to what you want.",{"comments":218,"answered":38,"key":219},14,[220,223,226],{"id":221,"text":222},"41109381","Yes, me too :) I am working on a viewer \u002F presentation mode that will do just that.",{"id":224,"text":225},"41109413","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…",{"id":227,"text":228},"41111479","Fixed in production!",{"commenters":230,"max_depth":44,"maker_replies":218,"first_comment_mins":231,"lifespan_hours":232},42,4793,232,[234,238,242,245,248,249,251,254,257,259,262,265,268,271,273,276,279,282,284,287,289,292,295,297,299,301,303,305,307,308,313,317,319,322,323,326,328,332,333,336,340,342,343,345,347,349,351,355,358,361,363,365,367,369,374,376,378,380,383,385,387,389,391,393,397],[235,40,40,236,237,40],"41106131","other\u002Fneutral\u002Fnone","beardedwizard",[239,40,40,240,241,40],"41106228","other\u002Fneutral\u002Fdocs","dboreham",[243,40,40,240,244,40],"41106560","leonseled",[246,40,40,240,247,40],"41106821","azeirah",[214,40,40,236,215,40],[250,40,40,236,237,40],"41109406",[252,40,40,236,253,40],"41118805","chausen",[255,40,40,236,256,40],"41109385","photonthug",[258,40,40,240,237,40],"41109399",[260,40,40,240,261,40],"41122445","iamthefury",[263,40,40,236,264,40],"41106270","viraptor",[266,40,40,236,267,40],"41106573","solatic",[269,40,40,270,237,40],"41109436","commenter\u002Fneutral\u002Fnone",[272,40,40,240,151,40],"41107830",[274,40,40,240,275,40],"41110138","mdaniel",[277,40,40,240,278,40],"41110257","nicholasjarnold",[280,40,40,281,111,40],"41108547","other\u002Fneutral\u002Fpricing",[283,40,40,236,237,40],"41109388",[285,40,40,236,286,40],"41109031","h1fra",[207,32,38,288,208,40],"project\u002Fmixed\u002Fdesign",[290,32,40,236,291,40],"41108864","jiehong",[293,32,40,270,294,40],"41109128","breck",[87,36,44,296,88,40],"project\u002Fpositive\u002Fnone",[221,36,40,298,11,32],"project\u002Fneutral\u002Fnone",[167,38,38,300,168,40],"project\u002Fneutral\u002Fidea",[176,302,38,300,177,40],4,[124,44,32,304,125,40],"project\u002Fcritical\u002Fexecution",[224,44,40,306,11,32],"maker\u002Fneutral\u002Fexecution",[227,44,40,306,11,32],[309,310,44,311,312,40],"41107197",6,"maker\u002Fpositive\u002Fnone","pfarrell",[314,310,40,315,316,40],"41107226","other\u002Fneutral\u002Fdesign","rvdca",[188,31,44,318,189,40],"project\u002Fpositive\u002Fidea",[62,320,38,321,63,40],8,"maker\u002Fneutral\u002Fidea",[54,320,40,321,11,32],[192,324,32,325,193,40],9,"project\u002Fcritical\u002Fidea",[327,324,40,321,11,32],"41105644",[329,330,40,236,331,40],"41107686",10,"reacharavindh",[150,18,44,318,151,40],[334,18,40,335,11,32],"41109305","project\u002Fneutral\u002Fexecution",[337,338,32,304,339,40],"41107745",12,"Lucasoato",[199,341,40,236,200,40],13,[128,218,32,304,129,40],[344,218,40,306,11,32],"41109473",[346,218,40,306,11,32],"41111490",[91,348,38,300,92,40],15,[350,348,40,300,11,32],"41109370",[352,353,40,236,354,40],"41111209",16,"acemarke",[95,356,44,357,96,40],17,"project\u002Fpositive\u002Fdesign",[135,359,32,360,136,40],18,"project\u002Fcritical\u002Fperformance",[139,359,40,362,11,32],"project\u002Fneutral\u002Fperformance",[146,364,38,300,147,40],19,[366,364,40,335,11,32],"41108993",[368,364,38,298,147,40],"41159194",[370,371,38,372,373,40],"41105917",20,"project\u002Fneutral\u002Fdocs","BeefySwain",[110,375,32,325,111,40],21,[102,375,40,377,103,40],"commenter\u002Fneutral\u002Fidea",[379,375,40,377,111,40],"41108785",[381,375,40,377,382,40],"41108798","zokier",[384,375,40,377,111,40],"41108906",[161,375,40,386,11,32],"project\u002Fneutral\u002Fdesign",[117,33,32,388,118,40],"project\u002Fcritical\u002Fdesign",[75,33,40,390,11,32],"project\u002Fpositive\u002Fexecution",[392,33,44,357,118,40],"41106230",[394,395,44,318,396,40],"41105112",23,"diegoholiveira",[398,395,40,311,11,32],"41105585",[],[401,405,409,413,418,423],{"id":402,"name":403,"points":404,"category":20},"41068719","Haystack",546,{"id":406,"name":407,"points":408,"category":20},"41070428","Wat",393,{"id":410,"name":411,"points":412,"category":20},"41088273","Semantic Grep",356,{"id":414,"name":415,"points":416,"category":417},"41086620","Opslane",319,"infrastructure",{"id":419,"name":420,"points":421,"category":422},"41105130","embedding.io",305,"ai",{"id":424,"name":425,"points":426,"category":427},"41095839","statsbomb-3d-viz",182,"creative",false,"v2",{"id":431,"name":5,"line":6,"ai":428,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":432,"top":18,"kw":433,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":434,"url":9,"mix":435,"praise":83,"objection":107,"sub":21},41080189,-0.01,[24,25,26,27],"0000000000003053105531051103051331000155",[31,31,32,31],1793991096630]