Mermaid Diagrams for Your Website
Mermaid is a text-based diagram language. This page now shows a live rendered example using Mermaid itself, not a conceptual stand-in.
Use LR when you want the flow to run left to right. The example below is live Mermaid loaded from the CDN and rendered in the browser.
Live LR example
flowchart LR
A[Idea] --> B[Draft]
B --> C[Review]
C --> D[Publish]
flowchart LR
A[Idea] --> B[Draft]
B --> C[Review]
C --> D[Publish]
Canonical real-render page: the house-standard browser-rendered example that captures the live SVG output.
Open the canonical real-render page.
Practical rule: use Mermaid for explanatory diagrams, then keep the permanent version on your site so the diagram is not tied only to a third-party platform.
Authoritative sources
The official Mermaid documentation is the best place to learn the syntax and the more advanced diagram options.