# Ondine

> Mermaid diagrams, compiled to SVG ahead of time with Rust.

## Render Diagrams in Markdown

Markdown that cannot run scripts, such as a GitHub README, embeds a Mermaid diagram as an SVG image from this site. Percent-encode the source into the `source` query parameter:

![Flowchart](https://ondine.sh/svg?source=flowchart%20LR%0A%20%20A%5BREADME%5D%20--%3E%20B%5BOndine%5D)

- `?scheme=light` or `?scheme=dark` pins one color scheme. Without it, the image follows the reader's scheme.
- `https://ondine.sh/<payload>.svg` takes the source zlib-deflated, then base64url-encoded, for shorter URLs.
- `npx ondine README.md` rewrites every ` ```mermaid ` fence in a file to these images, and `--restore` turns them back into fences.
- URLs stay under 4,096 characters. Invalid Mermaid renders an error card with status 400.

Each link opens a page's Markdown. [llms-full.txt](https://ondine.sh/llms-full.txt) holds every page in one file.

## Introduction

- [Getting Started](https://ondine.sh/docs/introduction/getting-started.md): Compile Mermaid diagrams to SVG ahead of time and mount them with a 210-byte runtime.
- [Why Ondine](https://ondine.sh/docs/introduction/why-ondine.md): Mermaid source, compiled ahead of time into SVG that pages display without a renderer.
- [Benchmarks](https://ondine.sh/docs/introduction/benchmarks.md): Render speed and download size of Ondine, Pele 1.6.0, and Mermaid 12.1.0, each in its best measured configuration. Colors compare each library with Ondine.
- [FAQ](https://ondine.sh/docs/introduction/faq.md): Answers to common questions about Ondine.

## Guides

- [Vite](https://ondine.sh/docs/guides/vite.md): Import .mmd and .mermaid files as SVG compiled during the Vite build.
- [CLI](https://ondine.sh/docs/guides/cli.md): Render Mermaid files to SVG files from a terminal or a build script.
- [Node Compiler](https://ondine.sh/docs/guides/node.md): Render Mermaid to SVG from build scripts, servers, and static site generators.
- [In-Browser Compilation](https://ondine.sh/docs/guides/browser.md): Compile Mermaid in the browser or an edge runtime when the source is only known at runtime.
- [GitHub Images](https://ondine.sh/docs/guides/github.md): Embed Ondine diagrams in READMEs and other Markdown that cannot run scripts or load styles.
- [Theming](https://ondine.sh/docs/guides/theming.md): Set a diagram's colors, font, corners, and strokes with CSS custom properties, without compiling again.
- [Mounting](https://ondine.sh/docs/guides/mounting.md): Insert compiled diagrams into a page with the 210-byte ondine runtime.

## Diagrams

- [Agent Flow](https://ondine.sh/docs/diagrams/agentflow.md): Inputs, agents, tools, and the flows that connect them. Mermaid marks this type as beta.
- [Architecture](https://ondine.sh/docs/diagrams/architecture.md): Services and groups connected through their sides. Mermaid marks this type as beta.
- [Block](https://ondine.sh/docs/diagrams/block.md): Blocks placed on a grid of columns, with spans, nesting, and arrows.
- [C4](https://ondine.sh/docs/diagrams/c4.md): Context, container, component, dynamic, and deployment views of a system.
- [Class](https://ondine.sh/docs/diagrams/class.md): Classes with members, relationships, cardinality, and namespaces.
- [Cynefin](https://ondine.sh/docs/diagrams/cynefin.md): Items placed in the domains of the Cynefin framework. Mermaid marks this type as beta.
- [Entity Relationship](https://ondine.sh/docs/diagrams/er.md): Entities with attributes and the relationships between them.
- [Event Modeling](https://ondine.sh/docs/diagrams/eventmodeling.md): Screens, commands, events, and views placed along time frames.
- [Flowchart](https://ondine.sh/docs/diagrams/flowchart.md): Nodes and edges, grouped into subgraphs, laid out in one direction.
- [Gantt](https://ondine.sh/docs/diagrams/gantt.md): Tasks and milestones scheduled on a time axis, grouped into sections.
- [Git Graph](https://ondine.sh/docs/diagrams/git.md): Commits, branches, merges, and cherry-picks of a Git history.
- [Info](https://ondine.sh/docs/diagrams/info.md): The renderer name and version.
- [Ishikawa](https://ondine.sh/docs/diagrams/ishikawa.md): Causes branching from a spine toward an effect. Mermaid marks this type as beta.
- [Kanban](https://ondine.sh/docs/diagrams/kanban.md): Columns of cards with optional metadata.
- [Mindmap](https://ondine.sh/docs/diagrams/mindmap.md): A tree of ideas drawn out from a root, set by indentation.
- [Packet](https://ondine.sh/docs/diagrams/packet.md): Fields of a network packet laid out by bit range.
- [Pie Chart](https://ondine.sh/docs/diagrams/pie.md): Slices sized by value, with an optional title.
- [Quadrant Chart](https://ondine.sh/docs/diagrams/quadrant.md): Points plotted on two axes split into four quadrants.
- [Radar](https://ondine.sh/docs/diagrams/radar.md): Series plotted on axes that radiate from a center. Mermaid marks this type as beta.
- [Railroad](https://ondine.sh/docs/diagrams/railroad.md): Grammar rules drawn as railroad tracks. Mermaid marks this type as beta.
- [Requirement](https://ondine.sh/docs/diagrams/requirement.md): Requirements, elements, and the relationships that trace them.
- [Sankey](https://ondine.sh/docs/diagrams/sankey.md): Flows between nodes, with widths proportional to value.
- [Sequence](https://ondine.sh/docs/diagrams/sequence.md): Messages between participants over time, with blocks and notes.
- [State](https://ondine.sh/docs/diagrams/state.md): States, transitions, composite states, forks, and choices.
- [Swimlane](https://ondine.sh/docs/diagrams/swimlane.md): Flowchart steps placed in lanes. Mermaid marks this type as beta.
- [Timeline](https://ondine.sh/docs/diagrams/timeline.md): Events listed under time periods, grouped into sections.
- [Tree View](https://ondine.sh/docs/diagrams/treeview.md): A file or outline tree drawn from indentation. Mermaid marks this type as beta.
- [Treemap](https://ondine.sh/docs/diagrams/treemap.md): Nested rectangles sized by value. Mermaid marks this type as beta.
- [Use Case](https://ondine.sh/docs/diagrams/usecase.md): Actors, use cases, and the associations between them. Mermaid marks this type as beta.
- [User Journey](https://ondine.sh/docs/diagrams/journey.md): Tasks in sections, scored for each actor taking part.
- [Venn](https://ondine.sh/docs/diagrams/venn.md): Sets and their overlaps. Mermaid marks this type as beta.
- [Wardley Map](https://ondine.sh/docs/diagrams/wardley.md): Components of a value chain placed by evolution and visibility. Mermaid marks this type as beta.
- [XY Chart](https://ondine.sh/docs/diagrams/xychart.md): Bar and line series on an x and y axis.

## API

- [ondine › Overview](https://ondine.sh/docs/api/ondine.md): Mount precompiled diagrams in the browser without the compiler.
- [ondine › mount](https://ondine.sh/docs/api/ondine/mount.md): Insert a precompiled diagram into an element, replacing its contents.
- [ondine/compiler › Overview](https://ondine.sh/docs/api/compiler.md): Render Mermaid to SVG in Node, build tools, and servers.
- [ondine/compiler › render](https://ondine.sh/docs/api/compiler/render.md): Render Mermaid source to an SVG document in Node.
- [ondine/compiler › create](https://ondine.sh/docs/api/compiler/create.md): Create a renderer over compiler modules supplied by the caller.
- [ondine/compiler › RenderError](https://ondine.sh/docs/api/compiler/RenderError.md): The error thrown when Mermaid source cannot be rendered.
- [ondine/compiler/wasm › Overview](https://ondine.sh/docs/api/compiler-wasm.md): Compile Mermaid in browsers and edge runtimes with modules supplied by the caller.
- [ondine/compiler/wasm › wasm (all)](https://ondine.sh/docs/api/compiler-wasm/all.md): The size-optimized compiler module for every diagram type, inlined as base64.
- [ondine/compiler/wasm › Diagram Modules](https://ondine.sh/docs/api/compiler-wasm/types.md): One size-optimized compiler module per diagram type, as base64 or a raw .wasm file.
- [ondine/remark › Overview](https://ondine.sh/docs/api/remark.md): Compile Mermaid fences in Markdown and MDX to SVG at build time.
- [ondine/remark › remarkOndine](https://ondine.sh/docs/api/remark/remarkOndine.md): Replace each ```mermaid fence with the SVG Ondine renders from it.
- [ondine/vite › Overview](https://ondine.sh/docs/api/vite.md): Compile Mermaid file imports to SVG during the Vite build.
- [ondine/vite › ondine](https://ondine.sh/docs/api/vite/ondine.md): Create a Vite plugin that imports .mmd and .mermaid files as precompiled SVG.
- [CLI](https://ondine.sh/docs/api/cli.md): Render Mermaid files or standard input to SVG, and Mermaid fences in Markdown to images, from the command line.
- [Image Worker](https://ondine.sh/docs/api/worker.md): Serve diagrams as SVG images from a Cloudflare Worker, for Markdown hosts such as GitHub.