Mermaid Native · Kotlin Multiplatform

Diagram examples

Small, copyable examples for the bounded Mermaid Native support matrix. Unsupported syntax is shown as a typed diagnostic, never silently substituted.

Quickstart

Render your first diagram

Paste Mermaid text, render with the typed Wasm adapter, then copy source or permalink.

Loading examples…

How to use

From source to SVG

  1. Write Mermaid text in a .mmd file or the editor above.
  2. Call renderMermaidResultJson(source) from the Wasm adapter.
  3. On ok: true, insert the returned SVG after the safety checks; on ok: false, show typed diagnostics with line and column.
  4. Use Copy source or Copy permalink to share a reproducible example.

Examples are intentionally bounded. A family or syntax not listed as supported returns a typed failure instead of falling back to another renderer.

Reference

Support, accessibility and safety

Unsupported or malformed input returns typed diagnostics with line and column; no fallback renderer is used. SVG is parsed detached and executable nodes/handlers are removed before insertion.

Call renderMermaidResultJson(source), check ok, then consume svg or diagnostics[]. The 32-family gallery is a bounded subset of Mermaid syntax; verify support before relying on advanced directives.

Accessibility

Controls have labels, keyboard focus, and live status announcements. Provide meaningful source titles and text alternatives when embedding diagrams.

Browser support

Modern evergreen browsers with ES modules, WebAssembly, DOMParser and Clipboard API. Clipboard is optional; copy actions fail safely.

Security boundary

Rendering is local and offline. Keep a strict CSP, do not enable inline scripts, and treat SVG as untrusted output even after sanitization.

Examples beyond the minimum

Try theme directives, long labels, Chinese text (例如：订单已提交) and malformed input in the editor to exercise success and typed-error paths.