Remix.run Logo
Show HN: Line9 – A Mermaid rendering engine with its own layout(line9.ai)
40 points by jumpalongjim 6 days ago | 9 comments

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 2 hours ago | parent | next [-]

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.

WalterGR 3 hours ago | parent | prev | next [-]

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.

sbarre 3 hours ago | parent | prev | next [-]

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

CGamesPlay an hour ago | parent [-]

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...

nylonstrung 44 minutes ago | parent | prev | next [-]

https://frankorz.com/merman/ Here's a pretty solid Rust reimplementation of Mermaid btw

iamcoder18 3 hours ago | parent | prev | next [-]

This solves my biggest gripe with Mermaid.

It's an amazing tool, but I wish it were open source.

nylonstrung 43 minutes ago | parent | next [-]

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

doublerabbit 3 hours ago | parent | prev [-]

Well, it is. Mermaid.js

Just vibe code a user interface to it.

ryanackley 4 hours ago | parent | prev [-]

Looks cool. Price is pretty steep. Lucid chart is like $16/month.