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.
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 of their work is huge.
The actual drawing engine sucks compared to something like Graphviz. Works fine up until a certain number of nodes but completely falls apart after that
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).
Thanks!
I think that sounds interesting, to make sure I'm understanding your use case would these pop ups be for your own use or for other people?
For example would you want to send a link to someone else on your team and then the link shows the diagram with popups and nesting?
Or would it be sufficient to send over the .mmd files and then the other person can use the cli to open the web interface which supports the popups and nesting.
I imagine I could add the latter one quickly but for the former I would either add an easy way for users to self serve like with ngrok or some cloud solution.
Or alternatively I could add some way to export the diagram just as a standalone HTML file in which case that could be sent and support the popups and hovering without the person you're sending it to having to have the CLI installed.
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.
If you wish to increase the adoption the tool, do consider hosting it to make it easy for people to use it. I see that it's heavily dependent on server-side code, so the cheap/free static hosting wouldn't be an option.
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.
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 tweaking the layout in puml, such as pairing elements with an invisible connections and groups, adding or removing dashes from the arrows in class diagrams... is gone because Mermaid is simply inferior in that sense.
Mermaid always feels like it's in beta and I don't understand why GitHub ignores the request to support puml (1). It seems that adoption of diagrams as code is tied to what is supported by major vendors and they don't care enough. Or maybe it is because mermaidchart made an official vscode plugin, who knows.
While I agree that improvements are needed, I'm not convinced that creating a third standard is the answer. What I would like is to be able to assign weights to my elements and let the renderer do the work (not set x and y coordinates like in oxdraw).
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.
Hi as of now I haven't added that feature so the current way would be to edit the .mmd text.
However I think you are right that would be a good feature to add.
For collapsing downstream nodes I think it would make sense with the request the someone else made in this thread for animations. From what I see it should certainly be possible to implement at some point!
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.
Thanks, let me know how it goes! There's certainly lots of improvements to be made to the layout engine and polishing for the UI so happy to incorporate any feedback!
I can look into this further but at a glance I don't see something for declarative diagramming syntax. I will say the name is fantastic! One of the great things about making this thread for me was learning about all the different tools people are using!
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.
[0] https://d2lang.com/
The actual drawing engine sucks compared to something like Graphviz. Works fine up until a certain number of nodes but completely falls apart after that
Do you want to risk that your diagram changes outside of your control? (i.e. GitHub changes a mermaid version)
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...
Wait, no, node22 comes with npm10, not the other way around.
One feature I would love to see a declarative diagramming solution would support is a hover pop-up with more information or nested diagrams.
[0] https://www.ilograph.com/features.html
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.
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.
The hassle of tweaking the layout in puml, such as pairing elements with an invisible connections and groups, adding or removing dashes from the arrows in class diagrams... is gone because Mermaid is simply inferior in that sense.
Mermaid always feels like it's in beta and I don't understand why GitHub ignores the request to support puml (1). It seems that adoption of diagrams as code is tied to what is supported by major vendors and they don't care enough. Or maybe it is because mermaidchart made an official vscode plugin, who knows.
While I agree that improvements are needed, I'm not convinced that creating a third standard is the answer. What I would like is to be able to assign weights to my elements and let the renderer do the work (not set x and y coordinates like in oxdraw).
[1] https://github.com/orgs/community/discussions/10111
https://graphviz.org/doc/info/lang.html
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?).
have you considered implementing your algorithm as a (better) auto-layout engine for mermaidjs ?
But now I can interactively make changes to the diagram with this, it's very productive.
Being able to express a workflow or diagram and then have AI implement would be awesome to have a tight loop.
The lack of this has been a sticking point making us lean to dropping mermaid, so very cool to see!
There's also mermaidjs to excalidraw https://github.com/excalidraw/mermaid-to-excalidraw