Optizon Diagrams

Mermaid diagrams for Optizon UI: our own implementation of the Mermaid 12 language, parsed, laid out and drawn as accessible SVG in the Optizon look. Every Mermaid 12 diagram type is supported, the chart-like ones drawn by @optizon/charts; nothing is fetched from the network.

Install it next to @optizon/ui at the same version (npm install @optizon/[email protected]; it brings @optizon/charts, @optizon/markdown and @optizon/math), and add its line, with the charts and markdown lines and the math stylesheet, to your stylesheet:

@import "@optizon/tokens";
@import "@optizon/math/styles.css";
@source "../node_modules/@optizon/ui/src";
@source "../node_modules/@optizon/charts/src";
@source "../node_modules/@optizon/markdown/src";
@source "../node_modules/@optizon/diagrams/src";

import { Diagram } from "@optizon/diagrams";

<Diagram title="Release pipeline" source={"flowchart LR\n  build[Build] --> test{Tests pass?}\n  test -->|Yes| ship[(Production)]"} />;

In Markdown, register diagramsPlugin() once on the app's root MarkdownProvider (from @optizon/markdown), and every mermaid fence below it draws. Usage, syntax, configuration, styling, icons and limits: https://github.com/optzn/ui/blob/main/docs/DIAGRAMS.md

The package is ESM-only, ships compiled JavaScript, TypeScript declarations and source, and has @optizon/tokens, @optizon/ui, @optizon/charts, @optizon/markdown and @optizon/math (same version) and React 19 as peers, and lucide-react as a dependency. Licensed under Apache-2.0.

The agent skill for Codex and Claude Code ships in @optizon/ui and covers diagrams too: npx @optizon/[email protected] install-skill.

Documentation, examples and source: https://github.com/optzn/ui