Line9 is a new rendering engine for Mermaid flowchart diagrams that aims to remove the need for manual adjustment of layout. Mermaid is a popular text-based language for describing multiple types of diagrams.
Several Mermaid rendering engines already exist. Most, like the original mermaid.js, use Dagre or ELK graph drawing libraries to automatically lay out their diagrams. I’ve used Mermaid for the past four years but often recreated my flowcharts in a diagram editor so that I could modify the layout to something that better suited my needs.
Use Line9 when you want an automatic flowchart arrangement that optimises for clear communication. It seeks to layout flowcharts with regular grid spacing, closer positioning of related nodes, shorter, straighter edges and targets a page-like aspect ratio. The Compare button in the /diagram page (share panel on the left) shows you the Line9 and mermaid.js renders next to each other.
Use for free, no account required. A CLI tool can also be downloaded for Mac, Windows and Linux. Free-use diagrams carry a watermark. Commercial use of the CLI requires a paid account and you also get diagrams without watermarks. Line9 is not open source (I need to create an income and the business model is being tested).
I’ve tried to encode and automate the layout principles I use when creating flowcharts by hand. All rendering takes place in the browser, so no private data is sent to the web service. The CLI is written in Rust and embeds the renderer so you get a single binary install and all data and processing remains local. It’s currently a little slower than mermaid.js, due to the difficulty of solving node positioning and edge routing simultaneously to find the layout that best meets the design principles.
Output is produced in SVG or PNG formats. Diagrams can also be shared via a URL with a fragment that embeds the Mermaid text.
Things I know still need improvement: positioning and rotating subgraphs, folding graphs to hit good aspect ratios more often, further improvement on edge label placement, better interaction with long node labels and tidying up the display when scaling down. Then I also want to support more diagram types and the website needs lots of work.
Please paste your own Mermaid flowcharts into Line9 – particularly the ones that you previously discarded because the layout was bad. Let me know whether they improve, or what other work is needed.
I have a bunch of bad layouts so I'll give it a shot, but there's no way my org would pay 120 a year per seat for this. I don't think for any price it would get through procurement to be honest. Also we mostly render mermaid in confluence documents with a macro that renders it from the source in the document. Not sure how that would relate to this pricing/auth model.
Not trying to throw any shade or dissuade you from trying to earn a living, just providing feedback.
Thanks. I haven't yet got to looking into Confluence. I used to use a Confluence plugin for Lucid charts and I guess something like that for Line9 would be useful if it gets much traction. I don't know whether the embedding options in the Pro account would display well in Confluence.
On pricing, I'm testing numbers at the moment so your feedback is valuable. Anyway, please do paste in your bad layouts - I'd love to hear what happens.
I’m the author of one of the most popular mermaid renderers in Confluence. People spent huge sums of money on this. Feel free to message me if you have questions about the space.
Thanks, very kind offer. When people paid real money for this, were they paying to make diagrams look good, or for convenient source-editing and rendering in the page? Line9 is built around the first and doesn't have an ideal solution for the second yet.
I think the main thing people paid for was avoidance of change. Devs already use mermaid (by preference or policy) and therefore they wanted to keep using it. When I first build the Markdown Macro in 2012/2013 my thesis was that people would want to keep using Markdown in place of WYSIWIG, and that there was value to having a file in git be a source of truth and updating it there would keep Confluence automatically updated thereby reducing work to keep docs accurate. The first half proved true for devs, the second half did not, the stats showed that almost everyone would paste the markdown source into the in Confluence editor. When we added Mermaid, we saw more of the same. I am not sure how much I can say without violating NDAs, but I would encourage anyone working in this space to work to understand the ratio between how often content is authored vs consumed and by whom in each category. The idea that 1% of people author the content for 99% of consumers that we see on the internet does not translate to corporate environments and this has important product implications.
Ok, I've investigated Confluence some more. Publishing a diagram from Line9 Pro gives you a stable URL that serves a pre-rendered SVG and which updates when you modify the Mermaid. This can easily be displayed in Confluence by inserting an image from a link. Problems I found: 1) you'd need to published with public visibility 2) Confluence appears to cache the image, so updates don't appear in the page. Doing this properly in Confluence will need an app, which I don't have yet.
I dunno... This may not be for everyone but if I consider the amount of time spent correcting diagrams in excalidraw $10 / month seems more than reasonable to me: as long as it's for the creator not the viewer.
[dead]
Graph layout is a very interesting, very hard problem.
There's even a yearly competition - started in 1994 - whose results are announced at the yearly Symposium on Graph Drawing and Network Visualization.
It's not a subject I'm versed in, but can you talk more about your solution? Do you use a larger constraint solver or is it hand-coded?
--
Competition: https://mozart.diei.unipg.it/gdcontest/
The 34th International Symposium on Graph Drawing and Network Visualization, to be held in Ontario, Canada: https://graphdrawing.github.io/gd2026/
n.b. It's an independent conference, not under the auspices of e.g. IEEE or ACM.
Neither, really — it's closer to hand-rolled local search.
My first three phases are based on Sugiyama to produce a seed layout (which is broadly what Dagre does). Then I've added my new phases driven by a penalty score that grades candidate layouts using fourteen factors that I devised from my experience laying out graphs manually. The refinement phase is where the bulk of my work is. It applies targeted move types iteratively within a budget, trying to lower the penalty score.
Finally, the result goes through my own embedding and rendering with the theme system on top.
FYI for any new or casual Mermaid users, it comes with a built-in alternate layout called `elk` that I find does a much cleaner job on complex flowcharts.
See docs here: https://mermaid.ai/open-source/config/layouts.html
This is super interesting, but apparently neither Obsidian nor Typora include support for it. I guess it's actually provided by an optional plugin.
https://mermaid.ai/live/edit#pako:eNplUlFPwjAQ_ivNPW9EkMHWB4...
I'm trying some of the diagrams in elk and it seems to break the logical flow.
You can try it with Line9's first chart: https://mermaid.ai/live/edit#pako:eNpVVEtv2zAM_iuCTilgB1mbxq...
While it's nice and compact, it actually is rougher to grep.
Mermaid does indeed provide alternative layout engines. Please do try ELK before Line9. My experience is 1) hand-tuning the layout of Mermaid, having to try alternative engines or parameters, is not what I want. I just want a graph that I can use straight away. 2) ELK more often than not does give a clearer flowchart that I might be satisfied with for personal use but I still wasn't happy putting it in a presentation in front of others.
For sure, I was not implying ELK was a replacement, it's just been good to me for some types of flowcharts that get messy with the standard Dagre layout ...
Excellent work on Line9 BTW, it looks fantastic. :-)
I have my own flowchart layout code for a video processing application I wrote. But it is mainly to get everything on the page and connected, not to look nice. There is a visual editor for that. But something like this could be useful to me to improve that intial layout. I'll have to look into converting the flow diagram to Mermaid. From what I've seen of Mermaid that is probably not difficult. But I had AI building the Mermaid code in that case. Good work.
Right. Mermaid syntax for basic flowcharting is straightforward. But it's even easier to get your AI to produce Mermaid, which they do very readily. May I suggest you try the Line9 CLI, which lets your AI show you the diagram visually as soon as it's created.
https://frankorz.com/merman/ Here's a pretty solid Rust reimplementation of Mermaid btw
repo: https://github.com/Latias94/merman
Came here to post this. There is even a typst plugin for merman[0].
[0]: https://typst.app/universe/package/merman/
This solves my biggest gripe with Mermaid.
It's an amazing tool, but I wish it were open source.
Is this not open source enough for your purposes?
https://github.com/mermaid-js/mermaid https://github.com/mermaid-js/mermaid-live-editor https://github.com/mermaid-js/mermaid-cli
OP's product is not open source btw
Yeah sorry, I should have clarified that I wish OP's product was open source. mb
I’ve switched to D2 from mermaid after they removed ELK from the base. Dagre just doesn’t work for me. I wish there were better options.
Well, it is. Mermaid.js
Just vibe code a user interface to it.
I have given a try, line9 solve the ui experience of diagram than vanilla mermaid.
Delighted that you saw improvements.
Great idea! I will definitely try it with some graphs that could benefit from it.
Tangent
What is the current standard for generating valid BPMN diagrams. Does Mermaid support the level of control needed for formal diagrams of this nature with possible L1/L2/L3 drill down, multiple swimlanes, etc.
It doesn't work with 4 of 5 diagrams from our codebase I tried randomly :(
Oh dear, sorry that didn't work out well for you. If you’re pasting flowcharts that don’t work then I really want to try to address them. Can you say what happened? Nothing rendered at all, or something you couldn’t use? If you’re able to send them to me directly they’re worth a lot as real diagrams to improve Line9 from.
Looks cool. Price is pretty steep. Lucid chart is like $16/month.
I regret learning mermaid. The ecosystem is absolutely terrible.
I'd separate Mermaid the language from the tooling around it. The language has real strengths, like Markdown for diagrams, and not least in being ubiquitous so that both humans and AIs can use it easily. What I found poor was the tooling side and that's what prompted me to create a new layout engine. The ecosystem can be improved.
[flagged]
[flagged]