[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"project-45706792":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":44,"post_text":47,"what":48,"said":102,"maker_in_thread":234,"shape":247,"grid":251,"attempts":392,"same_week":393,"maker_shows":33,"maker_hidden":422,"reader_version":423,"card":424},"45706792","oxdraw","Diagram as code tool with draggable customizations","title","Show HN: Diagram as code tool with draggable customizations","https:\u002F\u002Fgithub.com\u002FRohanAdwankar\u002Foxdraw","github.com","RohanAdwankar",1761424738,2025,266,60,212,3837,6,"legend","dev_tools","diagramming","cli",[24,25,26,27],"mermaid diagrams","diagram as code","architecture diagrams","draggable diagram editor","mixed",0.322,{"positive":31,"neutral":32,"mixed":33,"critical":34},13,11,1,4,29,{"idea":37,"docs":40,"execution":42,"design":43},{"positive":38,"critical":39},8,2,{"positive":41,"critical":33},0,{"positive":33,"critical":33},{"positive":33,"critical":41},[45,33,41,41,45,46,41,41,45,46,41,46,41,45,33,41,45,45,41,46,41,46,33,46,41,46,45,45,41,46,46,45,46,45,41,45,33,41,46,45],5,3,"In the past I've used declarative diagram generation tools like Mermaid.js a lot for quickly drawing up things but for presentations or deliverables I find that I have to then move the generated diagrams over to a tool like Lucidchart which allows full control of the organization and customization.\n\nTherefore I am now working on this to combine the benefits of both into just one tool which can do both functions.\n\nThe project is certainly in the early stages but if you find yourself making architecture diagrams I'd love to hear your thoughts on the idea or even a Github issue for a feature requ",{"problem":49,"audience":55,"pricing":68,"motivation":69,"time_to_build":68,"stack":73,"openness":99,"stage":100,"team_size":101},{"value":50,"source":51,"evidence":52},"Mermaid diagrams lack full layout control, so users re-draw them in tools like Lucidchart for presentations","maker",[53],{"id":54},"post",{"value":56,"source":57,"evidence":58},"Engineers making architecture diagrams who use Mermaid and need polished layouts","inferred",[59,60,64],{"id":54},{"id":61,"by":62,"text":63},"45709660","Anduia","I use PlantUML because it renders in GitLab's markdown, including wikis, MD docs and even PR comments. However, I have to use Mermaid for projects hosted on GitHub. The hassle of…",{"id":65,"by":66,"text":67},"45715709","zmmmmm","Oh yes I'm completely with you on wishing Github would support PlantUML. It's almost trivial implementation wise, it's highly embeddable. It's precisely because I do like it that…",null,{"value":70,"source":51,"evidence":71},"Combine the speed of declarative diagramming with the control of GUI tools like Lucidchart",[72],{"id":54},[74,86,92],{"value":75,"source":76,"evidence":77},"Rust","commenter",[78,82],{"id":79,"by":80,"text":81},"45707203","gurjeet","Great job on the releasing the project; it definitely solves a need of being able to use declarative syntax for defining the relationships, and then customizing the layout which…",{"id":83,"by":84,"text":85},"45714754","12tilak34","Looking forward to the project for more development !! I have a rust based application where I could integrate this we can collaborate at some point I guess :)",{"value":87,"source":51,"evidence":88},"Mermaid syntax",[89],{"id":90,"by":11,"text":91},"45717734","For the syntax I aim to support mermaid's syntax and any modifications the tool makes are saved as comments so that the files remain backwards compatible with the original…",{"value":93,"source":76,"evidence":94},"npm",[95],{"id":96,"by":97,"text":98},"45708014","halostatue","I've made a private MacPorts port[1]; if I find that I use it frequently enough, I might contribute it to the main MacPorts port repo[2]. One thing that's missing from my…","open_source","prototype","unknown",{"praise":103,"objections":130,"requests":149,"questions":180,"alternatives":195},[104,119],{"value":105,"source":76,"evidence":106},"Fills a real need for customizable layouts in diagram-as-code",[107,108,111,115],{"id":79,"by":80,"text":81},{"id":109,"by":66,"text":110},"45707880","It's definitely much needed. I use PlantUML for most diagramming but for anything with more than about 5 components in it I'm spending 20-30% of my time desperately trying to…",{"id":112,"by":113,"text":114},"45707358","dixtel","Very cool idea, this is exactly what I'm missing from mermaid. Thanks for sharing this!",{"id":116,"by":117,"text":118},"45709161","parentheses","This looks really cool! Next diagram is getting this treatment!",{"value":120,"source":76,"evidence":121},"Useful for editing LLM-generated diagrams interactively",[122,126],{"id":123,"by":124,"text":125},"45708961","liqilin1567","Great project, I've been generating diagrams with llm for a while, and I often struggle to refine layout through the model. But now I can interactively make changes to the…",{"id":127,"by":128,"text":129},"45707853","eagleinparadise","This is awesome. I was looking for exactly this last week. A tool I could prompt AI to come up with an architecture and then be able to pick up manually, but visually not editing…",[131,138,142],{"value":132,"source":76,"evidence":133},"Not rendered natively on GitHub, unlike Mermaid's support",[134],{"id":135,"by":136,"text":137},"45713312","malnourish","D2 is better, but it's not supported by GitHub. Go where your users are.",{"value":139,"source":76,"evidence":140},"No license file in the repository",[141],{"id":79,"by":80,"text":81},{"value":143,"source":76,"evidence":144},"Cannot create a new diagram from an empty file in the GUI",[145],{"id":146,"by":147,"text":148},"45721871","hk1337","I might be missing something but it seems to only be able to edit and work with existing mmd and svg files? If I do \"touch flow.mmd\" then run oxdraw to edit the file, it doesn't…",[150,157,165,173],{"value":151,"source":76,"evidence":152},"Embeddable component such as a React component",[153],{"id":154,"by":155,"text":156},"45709136","lmeyerov","Is this embeddable, eg, a react component that can be hooked into? The lack of this has been a sticking point making us lean to dropping mermaid, so very cool to see!",{"value":158,"source":76,"evidence":159},"Add node and initialize diagram in the GUI",[160,164],{"id":161,"by":162,"text":163},"45708669","benblu","Thank you! Very cool. I don't see a button for it (on mobile currently, and will check thoroughly at my computer) -- is there a button to add a node? Another feature I've always…",{"id":146,"by":147,"text":148},{"value":166,"source":76,"evidence":167},"Support PlantUML or D2 syntax",[168,172],{"id":169,"by":170,"text":171},"45710591","rapnie","Great project! You chose to base on Mermaid.js and that is indeed the most popular declarative diagramming library right now. A more versatile declarative diagramming approach is…",{"id":61,"by":62,"text":63},{"value":174,"source":76,"evidence":175},"Hover popups or nested diagrams",[176],{"id":177,"by":178,"text":179},"45706992","vanilla","This looks like a very promising project, I have been looking for exactly this. One feature I would love to see a declarative diagramming solution would support is a hover pop-up…",[181,188],{"value":182,"source":76,"evidence":183},"What is the advantage over having an LLM write Mermaid directly?",[184],{"id":185,"by":186,"text":187},"45714969","3abiton","Looks pretty neat, what's the advantage over LLM to mermaid?",{"value":189,"source":76,"evidence":190},"How does this compare to tldraw?",[191],{"id":192,"by":193,"text":194},"45709142","dackdel","isint tldraw an alternative to this",[196,200,207,214,220,227],{"value":197,"source":76,"evidence":198},"D2",[199],{"id":169,"by":170,"text":171},{"value":201,"source":76,"evidence":202},"PlantUML",[203],{"id":204,"by":205,"text":206},"45707325","plmpsu","I really wish PlantUML would just solve this jarring problem.",{"value":208,"source":76,"evidence":209},"Mermaid",[210],{"id":211,"by":212,"text":213},"45713452","SOLAR_FIELDS","I’ve long had the stance that mermaids killer feature is that GitHub supports it natively. Ultimately for engineers having rendering at the place where they do the vast majority…",{"value":215,"source":76,"evidence":216},"Ilograph",[217],{"id":218,"by":178,"text":219},"45707641","ilograph [0] has these features. I think it should be possible with SVG only. The main use-case would be for documentation sites. [0] https:\u002F\u002Fwww.ilograph.com\u002Ffeatures.html",{"value":221,"source":76,"evidence":222},"Graphviz",[223],{"id":224,"by":225,"text":226},"45709901","misiek08","It’s like dot on steroids? Variables and cleaner syntax, but similar premises? https:\u002F\u002Fgraphviz.org\u002Fdoc\u002Finfo\u002Flang.html",{"value":228,"source":76,"evidence":229},"mermaid-to-excalidraw",[230],{"id":231,"by":232,"text":233},"45707063","anorak27","Wonderful project. There's also mermaidjs to excalidraw https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fmermaid-to-excalidraw",{"comments":235,"answered":236,"key":237},22,7,[238,241,244],{"id":239,"text":240},"45717813","Yes that's essentially my thoughts though perhaps a later feature would be to support the tool customizing d2 files as well! I also think another part about starting with…",{"id":242,"text":243},"45717779","Thanks for sharing. One of the very fun parts of posting this for me was seeing how much bigger this niche was than I thought haha. D2 seems great and super featureful!",{"id":245,"text":246},"45709193","Thankyou!",{"commenters":248,"max_depth":34,"maker_replies":235,"first_comment_mins":249,"lifespan_hours":250},34,32,190,[252,254,256,258,261,263,264,268,270,272,275,277,279,280,282,284,286,288,291,293,296,297,298,299,301,302,304,306,308,311,316,318,321,323,325,328,330,331,332,334,338,340,342,344,346,348,352,354,356,358,360,363,366,370,374,379,381,384,386,388],[169,41,45,253,170,41],"project\u002Fpositive\u002Fidea",[135,41,33,255,136,41],"project\u002Fcritical\u002Fidea",[211,41,41,257,212,41],"commenter\u002Fneutral\u002Fnone",[259,41,41,257,260,41],"45713928","verdverm",[239,41,41,262,11,33],"maker\u002Fneutral\u002Fidea",[242,41,41,257,11,33],[265,41,45,266,267,41],"45719050","maker\u002Fpositive\u002Fidea","jasonm23",[96,33,46,269,97,41],"project\u002Fneutral\u002Fnone",[245,33,41,271,11,33],"maker\u002Fpositive\u002Fnone",[273,33,41,257,274,41],"45713479","chrisweekly",[276,33,41,257,97,41],"45716027",[278,33,41,257,274,41],"45716821",[177,39,45,253,178,41],[281,39,41,262,11,33],"45707221",[218,39,46,283,178,41],"project\u002Fneutral\u002Fidea",[285,39,41,257,11,33],"45707889",[79,46,46,287,80,41],"project\u002Fmixed\u002Fdocs",[289,46,46,290,80,41],"45707236","maker\u002Fneutral\u002Fnone",[292,46,41,290,11,33],"45707281",[294,46,41,295,11,33],"45707253","maker\u002Fneutral\u002Fdocs",[109,34,45,253,66,41],[61,34,33,255,62,41],[65,34,41,257,66,41],[204,45,41,300,205,41],"other\u002Fneutral\u002Fnone",[127,18,45,253,128,41],[303,18,41,262,11,33],"45709146",[123,236,45,305,124,41],"project\u002Fpositive\u002Fexecution",[307,236,41,271,11,33],"45709032",[309,38,41,300,310,41],"45708587","metmac",[312,313,46,314,315,41],"45707898",9,"project\u002Fneutral\u002Fexecution","monkeycantype",[317,313,41,290,11,33],"45709182",[161,319,46,320,162,41],10,"project\u002Fneutral\u002Fdesign",[322,319,41,262,11,33],"45709119",[146,32,33,324,147,41],"project\u002Fcritical\u002Fexecution",[326,32,41,327,11,33],"45724662","maker\u002Fneutral\u002Fdesign",[224,329,46,283,225,41],12,[90,329,41,290,11,33],[231,31,46,269,232,41],[333,31,41,271,11,33],"45707272",[335,336,45,253,337,41],"45707144",14,"huydotnet",[339,336,41,271,11,33],"45707231",[83,341,45,271,84,41],15,[343,341,41,290,11,33],"45715053",[154,345,46,314,155,41],16,[347,345,41,290,11,33],"45709328",[349,350,46,283,351,41],"45710205",17,"sandGorgon",[353,350,41,262,11,33],"45717753",[112,355,45,253,113,41],18,[185,357,46,283,186,41],19,[359,357,41,262,11,33],"45715344",[116,361,45,362,117,41],20,"project\u002Fpositive\u002Fnone",[364,361,41,365,11,33],"45709268","maker\u002Fneutral\u002Fexecution",[367,368,45,253,369,41],"45792558",21,"devsanghvi03",[371,235,45,372,373,41],"45709113","project\u002Fpositive\u002Fdesign","newusertoday",[375,376,33,377,378,41],"45707399",23,"project\u002Fcritical\u002Fdocs","hamburglar",[380,376,41,300,11,33],"45707642",[382,376,41,300,383,41],"45710278","jtwaleson",[192,385,46,283,193,41],24,[387,385,41,290,11,33],"45709205",[389,390,45,362,391,41],"45707384",25,"dboreham",[],[394,399,404,409,413,417],{"id":395,"name":396,"points":397,"category":398},"45715055","MyraOS",247,"infrastructure",{"id":400,"name":401,"points":402,"category":403},"45731366","Bash Screensavers",246,"creative",{"id":405,"name":406,"points":407,"category":408},"45684689","Deadstack",188,"productivity",{"id":410,"name":411,"points":412,"category":403},"45721352","ISS in Real Time",165,{"id":414,"name":415,"points":416,"category":20},"45717724","vite-plugin-use-golang",158,{"id":418,"name":419,"points":420,"category":421},"45722826","JSON Query",154,"data",false,"v2",{"id":425,"name":5,"line":6,"ai":422,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":426,"top":18,"kw":427,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":428,"url":9,"mix":429,"praise":105,"objection":132,"sub":21},45706792,0.32,[24,25,26,27],"5100530053030510550303130355033535051035",[31,32,33,34],1793991132872]