[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"project-46147329":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":35,"aspects":36,"strip":46,"post_text":48,"what":49,"said":90,"maker_in_thread":207,"shape":216,"grid":220,"attempts":304,"same_week":305,"maker_shows":40,"maker_hidden":335,"reader_version":336,"card":337},"46147329","Fanfa","Interactive and animated Mermaid diagrams","title","Show HN: Fanfa – Interactive and animated Mermaid diagrams","https:\u002F\u002Ffanfa.dev\u002F","fanfa.dev","bairess",1764854214,2025,154,33,474,3837,13,"notable","dev_tools","diagramming","web_app",[24,25,26,27],"mermaid diagrams","animated diagrams","flowchart animation","diagram visualization","mixed",-0.049,{"positive":31,"neutral":32,"mixed":33,"critical":34},6,11,2,7,26,{"design":37,"execution":39,"idea":41,"performance":43,"docs":44,"pricing":45},{"positive":38,"critical":33},0,{"positive":40,"critical":33},1,{"positive":42,"critical":33},3,{"positive":38,"critical":40},{"positive":38,"critical":38},{"positive":38,"critical":38},[40,40,42,47,42,38,47,38,42,40,38,40,47,42,38,42,42,38,42,42,42,42,38,40,38,42,42,42,40,47,40,47,47],5,null,{"problem":50,"audience":62,"pricing":67,"motivation":74,"time_to_build":48,"stack":81,"openness":88,"stage":89,"team_size":88},{"value":51,"source":52,"evidence":53},"Mermaid diagrams are static; people want animated, interactive flow visualisation for presentations","commenter",[54,58],{"id":55,"by":56,"text":57},"46200647","frankhsu","I love it. I saw a comment in this thread saying that adding animation to a chart is pointless. However in some public speeches, I've always wanted to add some cool charts to…",{"id":59,"by":60,"text":61},"46199561","nantangitan","There's been times in the past when I've had nontechnical stakeholders present for otherwise technical meetings. A little bit of colour and a little bit of animation can go a…",{"value":63,"source":52,"evidence":64},"Developers and presenters explaining systems to technical and non-technical audiences",[65,66],{"id":59,"by":60,"text":61},{"id":55,"by":56,"text":57},{"value":68,"source":52,"evidence":69},"Pro plan around 3 USD per month, per a commenter",[70],{"id":71,"by":72,"text":73},"46200683","tillcarlos","Yeah, 100%. Just having something to move around catches the eye. Cheap trick but works - that's why most short videos have subtitles. I love this idea. Problem is: it competes…",{"value":75,"source":76,"evidence":77},"Make diagrams more engaging for non-technical audiences","maker",[78],{"id":79,"by":11,"text":80},"46200844","Yes. I could just render the .mmd plain as vanilla and will works just fine for devs but It may not get the attention of non technical folks",[82],{"value":83,"source":84,"evidence":85},"Mermaid","inferred",[86],{"id":87},"post","unknown","launched",{"praise":91,"objections":107,"requests":137,"questions":176,"alternatives":195},[92,100],{"value":93,"source":52,"evidence":94},"Fun and eye-catching for presentations",[95,96],{"id":55,"by":56,"text":57},{"id":97,"by":98,"text":99},"46202237","max002","wow, this is cool, to be frank im working on something similar so we might end up being competition xD but i dont want to hijack thread, nice work and congrats on release,…",{"value":101,"source":52,"evidence":102},"Promising, good potential for workflow visualisation",[103],{"id":104,"by":105,"text":106},"46199390","Oras","Nice! I always looked for a solution to animate diagrams as it would help a lot in visualising the workflow. Feedback: 1. I tried different mermaid diagrams from…",[108,122,130],{"value":109,"source":52,"evidence":110},"Animation adds noise and may confuse rather than inform",[111,115,119],{"id":112,"by":113,"text":114},"46218089","GrinningFool","The animations don't seem to be retained across nodes, which seems to make the animations pretty noise more than a means to convey useful information. For example in this…",{"id":116,"by":117,"text":118},"46199248","larodi","I don't understand who in the world needs animated something on his diagrams.",{"id":120,"by":117,"text":121},"46229109","I’ve done my fair share of diagramming and one thing I know for sure is markup (In he visual one) needs to be as clear as possible. As someone who started with demo scene and all…",{"value":123,"source":52,"evidence":124},"Animations not tied to actual data flow",[125,129],{"id":126,"by":127,"text":128},"46203448","marapuru","It looks nice at first sight, but which data moves to which point exactly? Every element has blobs with all colours of the rainbow just moving across a line. Wouldn't it be…",{"id":112,"by":113,"text":114},{"value":131,"source":52,"evidence":132},"GitHub login fails with 404",[133],{"id":134,"by":135,"text":136},"46204209","n0um3n4","Huh... I'm not being to login with github :\u002F it says 404:…",[138,146,161,165,169],{"value":139,"source":52,"evidence":140},"Control animation sequencing and per-node rules",[141,142],{"id":104,"by":105,"text":106},{"id":143,"by":144,"text":145},"46198378","fwip","Is there a way to control the mechanics of the animation? I poked around a bit and didn't see a way to configure what was sent down the arrows or how often - just some theming…",{"value":147,"source":52,"evidence":148},"Export to GIF or video",[149,153,157],{"id":150,"by":151,"text":152},"46201650","knuit","I would love an option to export as a gif that loops perfectly.",{"id":154,"by":155,"text":156},"46202204","jankovicsandras","Looks cool! Here's some feedback: - the diagram is not centered and zoomed by default, this is easy to fix - it would be great to have better animation controls, like…",{"id":158,"by":159,"text":160},"46204832","jadbox","- how much is Pro and what does it do? - can I download as animated gif or mpeg4 to embed into slides?",{"value":162,"source":52,"evidence":163},"Support sequence diagrams",[164],{"id":104,"by":105,"text":106},{"value":166,"source":52,"evidence":167},"Better playback controls like progress bar and speed",[168],{"id":154,"by":155,"text":156},{"value":170,"source":52,"evidence":171},"React components for embedding",[172],{"id":173,"by":174,"text":175},"46203501","victor_y","Looking quite promising! I would love to use this as a code friendly animated diagraming tool. Some feature requests that would make it stand out for me: 1. Have you thought…",[177,181,188],{"value":178,"source":52,"evidence":179},"What does the Pro plan include and how much does it cost",[180],{"id":158,"by":159,"text":160},{"value":182,"source":52,"evidence":183},"Can only the connections of a clicked node be animated",[184],{"id":185,"by":186,"text":187},"46204815","emmavis","Looks good, can i animate just connection to clicked node?",{"value":189,"source":52,"evidence":190},"Is there a better layout engine",[191],{"id":192,"by":193,"text":194},"46198246","2muchcoffeeman","Can’t tell from that link. Is there a better layout engine?",[196,200],{"value":197,"source":52,"evidence":198},"Hand-written animation via Claude or other AI",[199],{"id":71,"by":72,"text":73},{"value":201,"source":52,"evidence":202},"Draw.io, PlantUML, IcePanel",[203],{"id":204,"by":205,"text":206},"46198771","mal10c","I don't understand how to use this, but it does touch on an interesting topic. I want to create interactive and animated diagrams. I normally use either Draw.io or plantuml. My…",{"comments":47,"answered":33,"key":208},[209,210,213],{"id":79,"text":80},{"id":211,"text":212},"46200804","Feel you, Im running FF\u002Fmacos as well and svg aniamtions over CPU\u002FGPU could be a problem. Im planning to address this issue soon",{"id":214,"text":215},"46199549","Thanks for the valuable feedback. I already cover most of the issues that you described. Should be good to go in the next release",{"commenters":217,"max_depth":42,"maker_replies":47,"first_comment_mins":218,"lifespan_hours":219},25,6285,164,[221,223,225,229,231,233,237,240,242,246,250,252,254,255,256,257,260,262,265,268,269,273,275,279,283,286,289,291,293,295,296,297,300],[112,38,40,222,113,38],"project\u002Fcritical\u002Fdesign",[134,40,40,224,135,38],"project\u002Fcritical\u002Fexecution",[226,33,42,227,228,38],"46202414","project\u002Fmixed\u002Fexecution","me_bx",[55,42,47,230,56,38],"project\u002Fpositive\u002Fidea",[71,42,42,232,72,38],"project\u002Fneutral\u002Fidea",[234,42,38,235,236,38],"46201949","commenter\u002Fneutral\u002Fnone","scoot",[238,42,47,239,98,38],"46204363","project\u002Fpositive\u002Fexecution",[79,42,38,241,11,40],"maker\u002Fneutral\u002Fnone",[243,42,42,244,245,38],"46203533","project\u002Fneutral\u002Fdesign","j45",[247,248,40,249,72,38],"46200624",4,"project\u002Fcritical\u002Fperformance",[211,248,38,251,11,40],"maker\u002Fneutral\u002Fperformance",[126,47,40,253,127,38],"project\u002Fcritical\u002Fidea",[173,31,47,230,174,38],[104,34,42,227,105,38],[214,34,38,241,11,40],[204,258,42,259,205,38],8,"project\u002Fneutral\u002Fdocs",[143,261,42,244,144,38],9,[263,261,38,264,11,40],"46199579","maker\u002Fneutral\u002Fdesign",[266,267,42,244,245,38],"46203531",10,[154,32,42,244,155,38],[270,32,42,271,272,38],"46202259","project\u002Fneutral\u002Fexecution","matsz",[150,274,42,271,151,38],12,[276,18,38,277,278,38],"46224504","other\u002Fneutral\u002Fnone","euroderf",[280,281,40,224,282,38],"46199181",14,"difosfor",[284,281,38,285,11,40],"46199618","maker\u002Fneutral\u002Fexecution",[158,287,42,288,159,38],15,"project\u002Fneutral\u002Fpricing",[185,290,42,244,186,38],16,[192,292,42,244,193,38],17,[116,294,40,253,117,38],18,[59,294,47,230,60,38],[120,294,40,222,117,38],[97,298,47,299,98,38],19,"project\u002Fpositive\u002Fnone",[301,302,47,299,303,38],"46198453",20,"yakbarber",[],[306,311,316,321,326,331],{"id":307,"name":308,"points":309,"category":310},"46205632","Gemini Pro 3 HN front page 2035 (future Hacker News front page)",3346,"ai",{"id":312,"name":313,"points":314,"category":315},"46220794","alpranalysis",239,"data",{"id":317,"name":318,"points":319,"category":320},"46148460","Onlyrecipe 2.0",201,"consumer_social",{"id":322,"name":323,"points":324,"category":325},"46203581","AlgoDrill",178,"learning_science",{"id":327,"name":328,"points":329,"category":330},"46198430","Docket",177,"productivity",{"id":332,"name":333,"points":334,"category":330},"46144801","Kraa",127,false,"v2",{"id":338,"name":5,"line":6,"ai":335,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":339,"top":18,"kw":340,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":341,"url":9,"mix":342,"praise":93,"objection":109,"sub":21},46147329,-0.05,[24,25,26,27],"113530503101530330333301033315155",[31,32,33,34],1794036686842]