7 ms·
Show HN: GUI for editing Mermaid class diagrams
- webprofusion 2y agoYou lost me at Create your account. I would just want to play with the editor and store in the local browser storage until I decide I like it.
- maho 2y agoNice! I love how mermaid keeps getting better! For sequence-diagrams, nothing beats https://sequencediagram.org/ https://sequencediagram.org/ (I am not connected with them in any way, just a happy user)
- tcoff91 2y agosequencediagram.org is using PlantUML I believe, so you can do these locally without their website.
- mlhpdx 2y agoAgreed. I’ve tried other editors but so far I’ve always come back to sequencediagram.org — it just works, low fuss.
- brandall10 2y agoI've used this in the past for collaborative diagramming sessions and love its ease and simplicity, but the point of Mermaid is its portability - ie. can be embedded in Markdown docs and viewed in various editors/platforms.
- dominicdewalt 2y agoThanks @maho! We're hoping to keep the improvements flowing. I'm non-technical but from my perspective I thought Mermaid sequence diagram functionality really shines! Would love to fill the gap in my knowledge. What is better about https://sequencediagram.org/ https://sequencediagram.org/ than Mermaid sequence diagrams?
- sebmellen 2y agoFWIW, I find MermaidChart's sequence diagram editor better than the sequencediagram.org one!
- tomovo 2y agoIs there a demo available without creating an account?
- knsv 2y agoYes! You can use this in the free mermaid playground: https://www.mermaidchart.com/play https://www.mermaidchart.com/play
- Celeo 2y agoHeads up: the "Theme Customization in Toolbar" image isn't rendered. Thanks for sharing!
- knsv 2y agoThanks, I uploaded it!
- ConfusedDog 2y agoThat's pretty cool. Wish PlantUML community would have something like it.
- deleted 2y ago[deleted]
- mlhpdx 2y agoDo Mermaid class diagrams support generics (parameterized types)?
- philfreo 2y agoI spent some time playing around with this recently and loved it at first. I also realized ChatGPT is pretty good at generating Mermaid diagrams (didn't try your own AI features). However after getting into it some I ran into some significant frustrations. After creating a medium-complexity diagram, I was excited to see the Whiteboard feature to drag things around / improve the layout manually. But it really started breaking, it just wouldn't let me organize/drag things where I wanted, and I couldn't get things to not overlap. I also wished more diagram types supported Whiteboard (I noticed some didn't). Also I some confusion between the capabilities of mermaidchart.com and mermaid.live. Are these competitors? Variations of similar apps. I was confused. Also "Playground" vs "Live Editor" is confusing. Overall glad this exists and hope it continues to improve.
- directevolve 2y agoI had the exact same set of issues and questions.
- LordDragonfang 2y ago> it just wouldn't let me organize/drag things where I wanted, and I couldn't get things to not overlap I suspect this might be a fundamental issue with mermaid. I've always had issues getting it to lay things out in any other way than how it "wants" me to, with giant gaps between things
- dominicdewalt 2y agoThis is definitely a gap in current Mermaid functionality. This is a gap we're aiming to close in 2025. Significant Whiteboard improvements and expanded diagram support is on the way! If you have a specific use case or diagram type you'd like us to keep in mind then let me know! dominic@mermaidchart.com Thanks for your comment:)
- AFirestone 2y agoHi there, Mermaid CEO here:) I hear you on the whiteboard. It's still in its early days. Should be substantially improved in the coming months. To clarify on mermaidchart.com and mermaid.live, we are the same team. Mermaid.live is our fully open source hosted editor. This was the original editor for our 10 year old open source project. The creator of Mermaid recently founded mermaidchart.com with the CEO of Gitlab's venture studio to expand the capabilities of Mermaid for more users and build an enterprise grade product. The company is open core and venture backed. The Mermaid project will remain forever open source and will continue to invest in growing it and the company for those that desire more advanced business features. We really appreciate your feedback and support. Ping me if you'd like to chat with our product team about the features you're hoping for:) andrew@mermaidchart.com
- deleted 2y ago[deleted]
- sergius 2y agoWith Draw.io embedding Mermaid diagrams and plug-ins available for VSCode and other IDEs, why is this so special?
- lgas 2y agoCompetition is good for innovation and choice is good for everyone. Does it need to be special?
- akshatha1017 2y agoHi! I'm Akshatha from the Product team at Mermaid Chart :) While Draw.io's integration with Mermaid and the availability of plug-ins for VSCode and other IDEs are great, they primarily support programmatic editing of diagrams. What sets Mermaid Chart apart is its bi-directional editing capability. You can edit the code to update the diagram and make changes directly to the diagram, which will automatically reflect in the code. Currently, this two-way editing functionality is available for class diagrams and flowcharts, but we're excited to expand it to other popular diagram types in the future. Stay tuned!
- Xmd5a 2y agoI only use diagramming tools with automatic layout algos to generate visualizations programmatically to debug things. For documentation purpose, I largely prefer to draw them by hand using OmniGraffle, because making graphs look nice using tools like graphviz is very complex and you find yourself abusing features to hack your vision into reality What's dearly needed in my opinion is a graph layout algo based on a machine learning model (so that it can take into account readability and aesthetics). Unfortunately what I found so far is mostly concerned with displaying large graphs, which is kind of another domain altogether. I hope Mermaid is collecting every single edition point that happens on their UI, that would make for a nice dataset I guess.
- Xmd5a 2y agoAlso, some interesting links I stumbled upon while exploring this space: Graphviz-like generic graph-drawing library. More options, more control. https://eclipse.dev/elk/ https://eclipse.dev/elk/ Experiments by the same team responsible for the development of ELK, at Kiel University https://github.com/kieler/KLighD https://github.com/kieler/KLighD Kieler project wiki https://rtsys.informatik.uni-kiel.de/confluence/display/KIELER https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL... Constraint-based graph drawing libraries https://www.adaptagrams.org/ https://www.adaptagrams.org/ JS implementation https://ialab.it.monash.edu/webcola/ https://ialab.it.monash.edu/webcola/ Some cool stuff: HOLA: Human-like Orthogonal Network Layout https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf Confluent Graphs demos: makes edges more readable. https://www.aviz.fr/~bbach/confluentgraphs/ https://www.aviz.fr/~bbach/confluentgraphs/ Stress-Minimizing Orthogonal Layout of Data Flow Diagrams with Ports https://arxiv.org/pdf/1408.4626.pdf https://arxiv.org/pdf/1408.4626.pdf Improved Optimal and Approximate Power Graph Compression for Clearer Visualisation of Dense Graphs https://arxiv.org/pdf/1311.6996v1.pdf https://arxiv.org/pdf/1311.6996v1.pdf
- bastardoperator 2y agoI settled on excalidraw via obsidian https://github.com/zsviczian/obsidian-excalidraw-plugin https://github.com/zsviczian/obsidian-excalidraw-plugin
- elashri 2y agoI understand that it is different philosophy but I really would like to see the day when I can use Mermaid inside latex. Or at least get some robust mermaid to tikz converter. That would make my life much easy when preparing slides. I understand that exporting to PNG/JPG can work but usually you lose a lot of customization and you only know can make be bigger or smaller to fit the page. I was exploring this yesterday and actually came acorss the new GUI that is being introduced in this submission. I ended up exporting to PNG and suffer with fitting it inside beamer page layout.
- sirjaz 2y agoThis is great and all, but this would better be served as a desktop app with lower overhead.
- dominicdewalt 2y agoHi all, I'm Dominic and I'm on the product team at Mermaid. I enjoyed reading a lot of your feedback! It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: (https://calendly.com/dominic-01w/mermaid-shapers-product-interview https://calendly.com/dominic-01w/mermaid-shapers-product-int...) Thanks for taking a look at our latest release!
- thangalin 2y agoAny idea when Mermaid diagrams will render outside of web browsers? https://github.com/mermaid-js/mermaid/issues/2485 https://github.com/mermaid-js/mermaid/issues/2485 <rant> Aside, I'm the author of KeenWrite (https://keenwrite.com/ https://keenwrite.com/), a Markdown text editor that allows embedding diagrams using the triple-backtick syntax. Here's a GraphViz example: ``` diagram-graphviz digraph { rankdir="LR"; a -> b -> c; } ``` KeenWrite parses the `diagram-` prefix then passes the word `graphviz` to Kroki (https://kroki.io/ https://kroki.io/), which has an API for rendering a variety of ASCII diagrams, including Mermaid. Meaning, if Kroki adds a new diagram type, KeenWrite gets it for free (without modification). In Markdown, formatting a source code snippet entails using the standard syntax for code blocks: ``` graphviz digraph { rankdir="LR" a -> b -> c; } ``` GitHub created a de facto standard for Mermaid diagrams that breaks the convention of having triple-backticks followed by a language identifier to show the source code for that language in a monospace font. This was an unfortunate decision. </rant>
- deleted 2y ago[deleted]
- baobun 2y agoHello Dominic. Seconding the question on browserless rendering in the other comment. Having to (unseccessfully for us so far; the text renders incorrectly) tweak selenium setups to do headless builds is madness and I would have thought this to be top prio as a base feature beyond PoC for anything aiming for wide adoption.
- crvdgc 2y agoThe project itself is cool, but I'm doubtful on the philosophical side. Mermaid aspires to be the Markdown of diagrams, so being editable and consumable via plaintext is paramount. If I have to use a visual editor, why not fetch for more powerful tools and be liberated from the limiting format? This is akin to a WYSIWYG Markdown editor (which to be fair has a niche market). I would ask why not just use Google Doc or MS Word at that point?
- nejsjsjsbsb 2y agoI used this recently as someone shared a link to a diagram at work and I edited it for my own comprehension. It's nice. I'd prefer to have this in VSCode tho!
- rbanffy 2y agoOn a related subject, is there a tool to read code and generate Mermaid class diagrams, and, maybe, vice-versa?
- deleted 2y ago[deleted]
- sBqQu3U0wH 2y agoFinally. I am not fond of code-to-diagram tools and wanted to try Mermaid, as it seems like one of the better diagramming tools around. Will definitely give it a try now.
- MarkMarine 2y agoMy front end to mermaid is usually claude. I can’t count how many times trying to convey a complicated idea (last week, a one time use token in a 3 party where my backend can’t talk to the client) has been made simple to explain with a quick diagram claude made. I am a paid mermaid account holder but claude is still my first front end, because it’s the tool I’m in most of the time anyway. What I’m excited for in the GUI is I can take that quick diagram and add the styling, colors, and hopefully move some of the boxes around such that the arrows are better than the auto layout drops them. From reading the blog post, the first thing I’d like which is changing the visual colors and styling of individual boxes in the diagram might be missed. I find that the most time consuming thing to do manually with the code, I would love to see rich tools there.
- specialist 2y agoVery interesting. Any hiccups? I just tried this last week for the first time. I asked claude to create a syntax diagram for a toy grammar. The resulting mermaid source had a syntax error (unescaped special character). Despite having its own mermaid widget thingie, I couldn't compel claude to fix its own code.
- MarkMarine 2y agoI haven’t had issues with it enough to notice, but I do tolerate it making code mistakes as just part of the deal now. I fix the little errors (claude said it made a deps.edn file for a clojure project but it’s actually lien format) as just part of the deal. I might not have just papered over the issues in my brain