| ▲ | Show HN: Diagram as code tool with draggable customizations(github.com) | |||||||||||||||||||||||||||||||||||||||||||
| 262 points by RohanAdwankar 9 days ago | 61 comments | ||||||||||||||||||||||||||||||||||||||||||||
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. Therefore I am now working on this to combine the benefits of both into just one tool which can do both functions. The 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 request! One of the workflows I'm targeting is when an AI generates the first draft of the diagram (all the LLMs know .mmd syntax) and then the user can then customize it to their liking which I think can drastically speed up making complex diagrams!  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | rapnie 9 days ago | parent | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 provided by the D2 Language [0], which may be interesting to check when it comes to supporting more complex diagram types.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | halostatue 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 perspective (and this is probably true for Homebrew packaging as well, but I don't do that) is Git tags / GitHub releases associated with your Cargo releases. I can work around it for now by using an explicit release (`9ccd9bf53f9a309ccda42b5c17e9c1056493fb90` is what I'm assuming was your 0.1.0 release point). I've also assumed that npm10 is sufficient (which currently installs node22 on MacPorts). [1] https://github.com/halostatue/ports [2] https://github.com/macports/macports-ports [3] https://github.com/halostatue/ports/commit/e7331a7fcae362b0d...  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | vanilla 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 with more information or nested diagrams.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | gurjeet 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 the regular layout generators can't do. Project's Cargo.toml file says code is licensed under MIT license, but there's no license file in the repository, so Github doesn't show what the project is licensed under. Please add the license file so that people see it without having to dig through the code/configuration to determine that.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | zmmmmm 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 tweak the layout with hints. It's an interesting approach to embed comments and then build that into the layout engine. I've always thought it would solve a lot of my issues if I could just lock the coordinates for certain components and then let the layout engine do the rest with those as hard constraints. This looks like something similar to that approach. I really want this because the alternative is to spill over to completely manually maintained diagrams using GUI tools which then can't be easily integrated with source control - I want the same commit that changes the code to also change the architecture diagram for that code. Then it is part of code review and integrates to the whole process well.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | plmpsu 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
I really wish PlantUML would just solve this jarring problem.  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | eagleinparadise 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 the code. Being able to express a workflow or diagram and then have AI implement would be awesome to have a tight loop.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | liqilin1567 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 diagram with this, it's very productive.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | metmac 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
I really wish Mermaid would just ratify a layout spec. Make it optional. Use it. Great. Don’t use it. The layout engine does its thing.  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | monkeycantype 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Hello Rohan. This is really great. If you are able to include parameters to expose the intermediate data as inputs and outputs, so that this can be run to a step in the process and output the data, or run from a step with pre-prepared data. It would mean that other people could build on what you've done to create other diagrams and renderings.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | hk1337 8 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 give me an option to initialize it as a new diagram.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | benblu 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 craved for code diagramming is "collapse downstream nodes" -- though it might be outside of your scope (and mermaids?).  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | devsanghvi03 a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
tbh it was very much needed , thanks for this .  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | misiek08 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
It’s like dot on steroids? Variables and cleaner syntax, but similar premises?  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | anorak27 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Wonderful project. There's also mermaidjs to excalidraw https://github.com/excalidraw/mermaid-to-excalidraw  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | huydotnet 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Wonderful! I have been wanting something like this for a really long time!  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | 12tilak34 8 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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 :)  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | lmeyerov 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
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!  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | sandGorgon 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
so mermaidjs has the concept of layout engines - https://www.npmjs.com/package/@mermaid-js/layout-elk have you considered implementing your algorithm as a (better) auto-layout engine for mermaidjs ?  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | dixtel 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Very cool idea, this is exactly what I'm missing from mermaid. Thanks for sharing this!  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | 3abiton 8 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Looks pretty neat, what's the advantage over LLM to mermaid?  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | parentheses 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
This looks really cool! Next diagram is getting this treatment!  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | newusertoday 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
i generally use plantuml in emacs for generating diagrams from text but it does not allows for drag and drop editing. This looks cool.  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | hamburglar 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Just FYI your chosen example causes a little confusion in the context of “code tool” because I immediately thought, “is this thing an attempt at some kind of weird visual programming tool which is giving me the choice of Go, Python, and Rust? WTF?” But then I realized that was just sample data.  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | dackdel 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
isint tldraw an alternative to this  | ||||||||||||||||||||||||||||||||||||||||||||
  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | dboreham 9 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||
Thank you.  | ||||||||||||||||||||||||||||||||||||||||||||
| ▲ | anupj 3 days ago | parent | prev [-] | |||||||||||||||||||||||||||||||||||||||||||
[dead]  | ||||||||||||||||||||||||||||||||||||||||||||