# FAQ

Answers to common questions about Ondine.

## Relation to Mermaid

Ondine does not run Mermaid. Ondine is a separate compiler written in Rust. It follows the syntax of Mermaid 12.1.0, so the same source parses into the same diagram model. The layout and the drawing are Ondine's own.

## Diagram Appearance

Layout and appearance are different from Mermaid by design. Ondine draws diagrams with square outlines and rounded orthogonal edges. The `--ondine-*` CSS custom properties set the theme.

## Custom Colors

Diagrams can use color. Each color is a custom property, so a page can set `--ondine-fg`, `--ondine-accent`, or the chart series properties to any value. [Theming](/docs/guides/theming) lists all of the properties.

```css
/* Draws lines and text in blue */
.diagram {
  --ondine-fg: #1d4ed8;
}
```

## Mermaid Themes

Mermaid themes do not apply. Theme variables in front matter or in `%%{init}%%` directives do not set the colors of Ondine. Use the `--ondine-*` properties instead.

## Diagram Types

Each Mermaid diagram type has a page under [Diagrams](/docs/diagrams/flowchart) that shows its status. If a type is not ported, the compiler throws a `RenderError` with the code `unsupported-diagram`.

## Runtime Dependencies

Mounting does not need the compiler. The `ondine` runtime only inserts precompiled SVG and imports nothing from the compiler. Compilation in the browser is opt-in through [`ondine/compiler/wasm`](/docs/guides/browser).

## Output Safety

The output is safe to insert. It follows the strict security level of Mermaid. The compiler escapes authored strings, and the SVG has no scripts, no event handlers, and no external references.

## GitHub Diagrams

GitHub draws ` ```mermaid ` fences with its own renderer. To show an Ondine diagram, a README embeds an image from the [image Worker](/docs/guides/github).