Ozzy Ozzy Dev
Sign in
Packages
mermaid ^11.0.0 canonical

Diagrams-as-code renderer.

Component + sequence diagrams inline in the architecture doc.

Interfaces we consume
  • mermaid.initialize(config) — theme, layout, security level, font.
  • mermaid.render(id, source) — returns { svg } for a container.
  • Emitted via markdown code fences with ```mermaid; our DocView component hydrates them.
Assumptions we’re validating
  • Mermaid is a client-only render; SSR emits `data-mermaid` markers and hydration replaces them with SVG.
  • Our markdown pipeline escapes `<` and `>` inside mermaid sources before injecting them, blocking script injection.
  • Dark theme variables are set at `mermaid.initialize()`; they match our design tokens.
  • Mermaid 11.x TypeScript types are consumable from Svelte 5 without a shim.
Live smoke
Two mermaid diagrams below rendered from a live source string
flowchart LR A[Ozzy Dev] --> B[ABI Chat SDK] A --> C[Cubicle SDK] A --> D[KYM SDK] A --> E[NANDA SDK] C --> F[cubicle-adapter-local-mac] D --> G[Ozzy agent card] E --> H[NANDA payments]
sequenceDiagram autonumber User->>Console: request Console->>Mermaid: render(source) Mermaid-->>Console: SVG Console-->>User: rendered diagram