Show HN: Line9 – A Mermaid rendering engine with its own layout (line9.ai)
74 points by jumpalongjim 6 days ago
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.
hankbond 9 hours ago
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.
jumpalongjim 2 hours ago
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.
albert_e 34 minutes ago
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.
sbarre 9 hours ago
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
ramoz 6 hours ago
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.
jumpalongjim 2 hours ago
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.
CGamesPlay 8 hours ago
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...
WalterGR 10 hours ago
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.
jumpalongjim 2 hours ago
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.
nylonstrung 7 hours ago
https://frankorz.com/merman/ Here's a pretty solid Rust reimplementation of Mermaid btw
msmagh 5 hours ago
japanuspus 4 hours ago
Came here to post this. There is even a typst plugin for merman[0].
iamcoder18 10 hours ago
This solves my biggest gripe with Mermaid.
It's an amazing tool, but I wish it were open source.
nylonstrung 7 hours ago
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
horacemorace 6 hours ago
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.
doublerabbit 9 hours ago
Well, it is. Mermaid.js
Just vibe code a user interface to it.
romanhotsiy 2 hours ago
It doesn't work with 4 of 5 diagrams from our codebase I tried randomly :(
jumpalongjim 2 hours ago
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.
ryanackley 10 hours ago
Looks cool. Price is pretty steep. Lucid chart is like $16/month.
rdwrrr 5 hours ago
I regret learning mermaid. The ecosystem is absolutely terrible.