Why Line9
Your AI agent is an expert in Mermaid language. So when you ask for a diagram to explain your codebase or plan your next project, it happily delivers the Mermaid text that you paste into a Mermaid website and…
… you know the results. Yes, it shows how the code works, but what a disappointment the diagram is. Sometimes usable, but frequently ugly and other times so untidy that it just has to be binned.
Line9 is a new rendering engine for Mermaid, written from scratch to be superior in both layout and style. It’s available as a free online viewer at line9.ai, with a CLI for agents coming soon.
Seven states of a network connection. Mermaid steps the boxes diagonally down the canvas, so Idle — where the machine starts — ends up in the top right, and its only successor sits at the far left.
The three arrows back to Connected arrive as curves converging on one point, so each has to be traced back to its tail to find out where it came from.
The same source in two rows: the connect path along the top, the states you reach once connected along the bottom.
The arrows run horizontally and vertically rather than diagonally, so an edge can be followed by eye instead of untangled — and the return from Disconnecting to Idle is a line up the side, not an arc across the middle of the diagram.
The problem solved by Line9
Mermaid text needs to be ‘rendered’, i.e. turned into a diagram, and most renderers produce diagrams that range from drab to unreadable. There isn’t an easy fix for this problem because it’s not simply about colours and fonts: the real, deep-seated problem is layout.
All widely-used Mermaid renderers before Line9 are built on the same layout algorithms in Dagre or ELK. These are complex and clever libraries but they don’t deliver flowcharts that are easy to read - which is the whole point.
Surprisingly, existing renderers also fail badly with the easy part, the style and presentation. I was never content with presenting a Mermaid diagram to an audience that I wanted to influence or impress.
Line9 delivers 1) vastly improved, automatic flowchart layout and 2) presentation-ready style.
The syntax stays the same, existing diagrams render better without modification. There’s no need to point and click for hours to get a diagram you can be proud of.
Mermaid describes diagrams. Line9 makes them presentable.
Paste your Mermaid flowchart into the free to use Line9 diagram page and see for yourself. For a durable, side-by-side comparison of Line9 and mermaid.live — layout, export, CLI, and pricing — read Line9 vs mermaid.live.