Beta — Line9 is under active development and not yet production-ready
Mermaid examples · Authentication flow

User authentication flow (with MFA)

A user authentication flow (login flow) is a flowchart of how a person signs in: open the login page, validate credentials, optionally complete multi-factor authentication (MFA), create a session, and land on the dashboard. Retry loops for invalid credentials or invalid codes are part of the real path — and they are exactly where stock Mermaid layout usually fails.

§ 01
Line9 render
crawlable SVG text
Auth Flow User Login Page ValidCredent-ials? MFAEnabled? Create Session Enter MFACode CodeValid? Dashboard No Yes Yes No Yes No
User authentication flow with MFA rendered by Line9 — login, credentials, MFA, session, and dashboard as a compact two-band flowchart
§ 02
Mermaid source
§ 03
Stock Mermaid vs Line9 on this authentication flow
legibility, not aesthetics
Stock Mermaid layout of the same user authentication flow — wide shallow band with hard-to-read labels and overlapping retry arcs
Stock Mermaid · same source as the Line9 render above

On this graph, stock Mermaid strings the whole login → MFA → session path into one shallow band roughly 1600px wide, so at page width the node labels shrink toward illegibility. The “No” edge that bypasses MFA floats its label over empty canvas far from either endpoint, and both retry loops (invalid credentials, invalid MFA code) render as overlapping twin arcs where the label cannot be attributed to a direction. Line9 lays out the same Mermaid source as a compact two-band flowchart with every edge label on its edge — credentials and MFA decisions stay readable without zooming.

For a fuller product comparison — layout, export, CLI, and pricing — see Line9 vs mermaid.live.

§ 04
Open this diagram
Open in editor Install the CLI →

More scenarios on the Mermaid examples hub.