[HN Gopher] Show HN: GUI for editing Mermaid class diagrams
___________________________________________________________________
Show HN: GUI for editing Mermaid class diagrams
Author : knsv
Score : 215 points
Date : 2025-01-17 15:36 UTC (1 days ago)
(HTM) web link (docs.mermaidchart.com)
(TXT) w3m dump (docs.mermaidchart.com)
| maho wrote:
| Nice! I love how mermaid keeps getting better!
|
| For sequence-diagrams, nothing beats https://sequencediagram.org/
| (I am not connected with them in any way, just a happy user)
| mlhpdx wrote:
| Agreed. I've tried other editors but so far I've always come
| back to sequencediagram.org -- it just works, low fuss.
| tcoff91 wrote:
| sequencediagram.org is using PlantUML I believe, so you can do
| these locally without their website.
| brandall10 wrote:
| I'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 wrote:
| Thanks @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/ than Mermaid sequence diagrams?
| sebmellen wrote:
| FWIW, I find MermaidChart's sequence diagram editor better than
| the sequencediagram.org one!
| tomovo wrote:
| Is there a demo available without creating an account?
| knsv wrote:
| Yes! You can use this in the free mermaid playground:
| https://www.mermaidchart.com/play
| Celeo wrote:
| Heads up: the "Theme Customization in Toolbar" image isn't
| rendered.
|
| Thanks for sharing!
| knsv wrote:
| Thanks, I uploaded it!
| ConfusedDog wrote:
| That's pretty cool. Wish PlantUML community would have something
| like it.
| mlhpdx wrote:
| Do Mermaid class diagrams support generics (parameterized types)?
| knsv wrote:
| Yes
| mlhpdx wrote:
| > ... though generics that include a comma are currently not
| supported. [1]
|
| So yes-ish, only in the most basic way.
|
| [1] https://mermaid.js.org/syntax/classDiagram.html
| philfreo wrote:
| I 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 wrote:
| I had the exact same set of issues and questions.
| LordDragonfang wrote:
| > 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 wrote:
| This 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 wrote:
| Hi 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
| infogulch wrote:
| Please forgive my posting on the broader topic of Mermaid...
| The Mermaid package has gotten much bigger recently. Compare
| mermaid.min.js across a sampling of major releases:
| 9.2.2 2022-11-09 1.09 MB 9.3.0 2022-12-15 899
| kB 9.4.0 2023-02-15 2.82 MB 10.9.1
| 2024-05-14 3.34 MB 11.4.1 2024-11-27 2.57 MB
|
| All the new features are really cool, and maybe this is
| "fine" when mermaid itself is the purpose of the website
| (like this submission), but it's a bigger burden when mermaid
| is a value-add for generic markdown documentation: every
| visitor has to download and execute 3+MB of js just to view
| simple diagrams, or worse even when there are no diagrams on
| that page at all.
|
| Is there a plan to reduce the required bundle size for
| viewers and users that only use a small subset of mermaid's
| wide feature set?
| paulg2222 wrote:
| Good choice of a product name. Totally applicable. /s I know
| single-word, unrelated product labelling is the shit for
| quite some years now.
| zelcon wrote:
| Props for somehow convincing all the foundation models to
| generate charts using your markup. It is guaranteed to
| survive a very long time now.
| x0hm wrote:
| Mermaid CEO is probably the coolest title I've ever heard
| nhatcher wrote:
| It is pretty cool! But,
|
| https://news.ycombinator.com/item?id=14908052
| ChrisMarshallNY wrote:
| I watched the _How the Universe Works_ series, on HBO,
| and they have this lady that is a Planetary Protection
| Engineer.
|
| She has her own Web site: https://www.moogega.com
| sergius wrote:
| With Draw.io embedding Mermaid diagrams and plug-ins available
| for VSCode and other IDEs, why is this so special?
| lgas wrote:
| Competition is good for innovation and choice is good for
| everyone. Does it need to be special?
| akshatha1017 wrote:
| Hi! 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 wrote:
| I 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 wrote:
| Also, some interesting links I stumbled upon while exploring
| this space:
|
| Graphviz-like generic graph-drawing library. More options, more
| control.
|
| https://eclipse.dev/elk/
|
| Experiments by the same team responsible for the development of
| ELK, at Kiel University
|
| https://github.com/kieler/KLighD
|
| Kieler project wiki
|
| https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
|
| Constraint-based graph drawing libraries
|
| https://www.adaptagrams.org/
|
| JS implementation
|
| https://ialab.it.monash.edu/webcola/
|
| Some cool stuff:
|
| HOLA: Human-like Orthogonal Network Layout
|
| https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf
|
| Confluent Graphs demos: makes edges more readable.
|
| https://www.aviz.fr/~bbach/confluentgraphs/
|
| Stress-Minimizing Orthogonal Layout of Data Flow Diagrams with
| Ports
|
| 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
| bastardoperator wrote:
| I settled on excalidraw via obsidian
|
| https://github.com/zsviczian/obsidian-excalidraw-plugin
| dominicdewalt wrote:
| This is really impressive! Excalidraw does some great work.
| Did you try Mermaid's integration with Obsidian? What was
| lacking and what ultimately hooked you on Excalidraw?
| bastardoperator wrote:
| I do use mermaid quite a bit in markdown because it's
| documentation/code that can be updated, the idea tends to
| start in my notes as excalidraw, and eventually become a
| mermaid graph. I wouldn't say it's lacking anything. I
| have not tried it so I can't a valid opinion, but I am
| happy to give it a try and give some feedback. I do waste
| time converting. I see a couple of tools, do you
| recommend one in particular?
| Vampiero wrote:
| The only reason anyone uses mermaid is because it's low
| friction and most editors support it out of the box or
| through plugins.
|
| But its layouting engine sucks and everything requires
| hacks and workarounds and configuration tweaks to display
| properly. Only the most trivial graphs render nicely on
| the first try.
|
| All I really want to do is define how to actually lay out
| the blocks using a DSL so that they don't look like
| absolute shit. I hate drag and drop UIs and I hate
| mermaid. There's no decent code-first diagram building
| tool out there, let alone one that I can embed into my
| notes as easily as mermaid.
| yencabulator wrote:
| I think you'd like https://treevis.net
| terrastruct wrote:
| We make (and sell) one, you can play with it here:
| https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
|
| Bigger example:
| https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
|
| (I don't like to self promo on competitor posts, but since
| Mermaid doesn't compete in making its own layout engine I felt
| sharing this under this thread is relevant to HN. If anyone
| from Mermaid finds it in poor taste just let me know and I'll
| delete)
| junto wrote:
| Is it possible to visualize PlantUML? I tried to paste some
| but it wasn't very easy on mobile.
| Xmd5a wrote:
| I tried TALA and am surprised to learn it embeds a machine
| learning model. I settled on ELK (very complex and time
| consuming to get right), before getting interested in
| constraint based graph layout (mostly for aligning nodes).
| Symmetry is nice to have too.
|
| In fact what I'm trying to do is generating beautiful flow
| graph _illustrations_ like this (non-sensical, just to give
| you a vibe):
|
| https://th.bing.com/th/id/OIG4.sqo88280g1BDb7r2aORg?pid=ImgG.
| ..
|
| Tis hard. Graph layout (bites fist). Layout based image
| diffusion (tears). One day though.
| gregoryw3 wrote:
| Wondering where the machine learning model comes into play?
| Googling doesn't seem to bring me to an article and the
| terrastruct site doesn't mention it as far as I can see.
| dominicdewalt wrote:
| Hi! I'm Dominic from the Mermaid product team. You raise some
| good points here. We released the whiteboard to help users get
| an exact layout they'd like, but it's in its early stages and
| is undergoing a lot of improvements.
|
| I understand that automatic layout algos is one of the big
| draws of Mermaid since it creates a lot of speed, but our
| current layouts can get a little convoluted. I like your idea
| on creating a machine learning model, but I'm curious what your
| biggest pain points are or if you have any basic requirements
| for a readable and aesthetic diagram. Is it made with hard
| corners on edges? Rounded?
|
| Would love to hear any thoughts you might have on this! You can
| email me at dominic@mermaidchart.com if you'd be willing to
| share. Thanks for your comment!
| dr_kiszonka wrote:
| I have been using the beta and would certainly appreciate a
| few more layouts. You can have a look at yEd for inspiration.
| Otherwise, it looks very promising!
| Xmd5a wrote:
| I think the main reason why diagrams are not used as often as
| they should to document code bases is that we developers have
| to face opposite yet complementary approaches: text based
| graph specifications (but then the layout's quality doesn't
| scale with graph size), or GUI based approaches that lead to
| way better results but are too costly to maintain.
|
| The idea of using machine learning is just a kind of knee
| jerk reaction to this fact. Maybe we could just throw graphs
| at a graph neural network and have the model learn all the
| features we are interested in without listing them explicitly
| (let alone the rules to decide which to prioritize). It's
| more an art than a science, really.
|
| Among those listed in these papers[1][2] those I am the the
| most interesting in, beyond the usual overlap minimization,
| edge crossing and edge length reduction are the following:
| symmetry/alignment hierarchical layouts (subgraphs
| within nodes) Fine-grained control of flow direction
| (doesn't have to be the same in each subgraph)
|
| Those are the features that have constrained the most my
| search for a diagram engine. Aesthetics (I mean readability)
| is paramount to using diagrams as documentation IMO. They are
| not just graphs, they are mental palaces.
|
| A palace's layout must not change if you decide to build an
| extension. Stability isn't guaranteed with most graph layout
| algos: add a node and you might end up with a graph that
| doesn't look like the previous version. Nodes shifts, edges
| move around. Confusing. There has been research in this
| direction[3], namely "interactive graph layout". It forces us
| to move away from a stateless approach to graph generation
| (graph specification -> picture) and into a stateful paradigm
| where the previous state of the layout will be preserved to
| some extent in the new version. With the layout specified as
| a mixture of previous layout state + constraints I could
| picture a pipeline where an LLM watches the commit log of
| some git repo and updates diagrams via semantic reasoning
| automatically with a 90% success rate, while the remaining
| 10% is left to the developer to fix.
|
| And there is also "UI-bility". A high degree of
| customization, being able to plug your own
| (react,vue,whatever) components into a graph can turn it into
| a monitoring tool. I wrote an (incomplete) debugger for a go-
| style channel framework that displays interactions as
| sequential diagrams, and, although neither D2 nor PlantUML
| offer this, I had to give up on using the former because it
| did not provide on-hover tool-tips, which was critical for my
| use case.
|
| [1] https://nrl.northumbria.ac.uk/id/eprint/16689/1/survey_gr
| aph...
|
| [2] in particular chapter 6, https://repository.library.north
| eastern.edu/files/neu:4f196k...
|
| [3] https://rtsys.informatik.uni-
| kiel.de/~biblio/downloads/paper...
| billyp-rva wrote:
| Re: mental palaces and interactive diagrams, what is your
| take on Ilograph?
| Koffiepoeder wrote:
| I am working on a diagramming tool that has the combination of
| a syntax for diagramming as code, extended with a syntax to
| define rendering constraints (e. g. this part of the diagram
| shoukd be left of this part, or this arrow must not cross this
| arrow). I hope this will greatly ease consistent diagram
| rendering and also getting the final mile pixel perfect.
|
| Currently already have a very alpha version working of the
| renderer using Cassowary, and working on making a good GUI.
| elashri wrote:
| I 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 wrote:
| This is great and all, but this would better be served as a
| desktop app with lower overhead.
| dominicdewalt wrote:
| Hi 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-int...)
|
| Thanks for taking a look at our latest release!
| thangalin wrote:
| Any idea when Mermaid diagrams will render outside of web
| browsers?
|
| https://github.com/mermaid-js/mermaid/issues/2485
|
| <rant> Aside, I'm the author of KeenWrite
| (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/), 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>
| baobun wrote:
| Hello 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.
| aloisklink wrote:
| I think there are two slightly different issues here!
|
| 1. SVGs generated by Mermaid use the SVG 2 features, but
| other than browsers, most libraries only support SVG 1.1
| features, i.e. <https://github.com/mermaid-
| js/mermaid/issues/2102>, which is what the other comment
| mentioned.
|
| 2. Mermaid requires a browser layout engine to render the
| diagrams (your issue), i.e. <https://github.com/mermaid-
| js/mermaid/issues/3650>. This is something I also really want
| to fix (I maintain the [`mermaid-js/mermaid-cli`][1] project
| and we need to use Puppeteer/Headless Chrome to render
| mermaid diagrams, which isn't ideal.) However, I don't think
| this would be easy, since we'd need a browserless tool that
| supports a browser-like layout engine (although I'm hoping
| that [Servo][2] might eventually be able to support it).
|
| And if you do want to do headless renders of Mermaid
| diagrams, I'd recommend using (or adapting, since the code is
| all MIT licensed and I'm not aware of one that uses
| Selenium):
|
| - <https://github.com/mermaid-js/mermaid-cli>, which uses
| Puppeteer as the headless browser API.
|
| - <https://github.com/remcohaszing/mermaid-isomorphic>, which
| uses Playwright as the headless browser API.
|
| And make sure that whatever server is doing the headless
| renders of Mermaid diagrams has all the correct fonts
| installed!
|
| [1]: https://github.com/mermaid-js/mermaid-cli
|
| [2]: https://servo.org/
| jb3689 wrote:
| I'd like to see better controls for keeping diagram components
| from colliding. I'm sure that's a nontrivial ask, but I run
| into poorly placed components quite frequently, and I feel like
| that'd be a major selling point for Mermaid for me if you could
| solve it
| webprofusion wrote:
| You 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.
| crvdgc wrote:
| The 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 wrote:
| I 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 wrote:
| On a related subject, is there a tool to read code and generate
| Mermaid class diagrams, and, maybe, vice-versa?
| sBqQu3U0wH wrote:
| Finally. 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 wrote:
| My 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 wrote:
| Very 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 wrote:
| I 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
___________________________________________________________________
(page generated 2025-01-18 23:01 UTC)