@mermaid-editor-sdk/ui

@mermaid-editor-sdk/ui / MermaidCanvasHandle

Interface: MermaidCanvasHandle

Defined in: package/ui/src/ui/components/MermaidCanvas.tsx:69

Imperative viewport controls exposed through the canvas ref.

Example

import { useRef } from 'react';
import { MermaidCanvas, useMermaidEditorParts, type MermaidCanvasHandle } from '@mermaid-editor-sdk/ui';

function CanvasArea() {
  const parts = useMermaidEditorParts();
  const canvasRef = useRef<MermaidCanvasHandle>(null);
  return <>
    <button onClick={() => canvasRef.current?.fit()}>Fit</button>
    <MermaidCanvas {...parts.canvas} ref={canvasRef} />
  </>;
}

Methods

center()

center(): void

Defined in: package/ui/src/ui/components/MermaidCanvas.tsx:73

Centers the diagram in the viewport without changing its zoom.

Returns

void

fit()

fit(): void

Defined in: package/ui/src/ui/components/MermaidCanvas.tsx:71

Scales the rendered diagram to fit the viewport, clamps zoom to 0.1–4, and resets scroll.

Returns

void

setZoom()

setZoom(scale): void

Defined in: package/ui/src/ui/components/MermaidCanvas.tsx:79

Sets zoom, clamped to the supported range of 0.1–4.

Parameters

Returns

void

zoomIn()

zoomIn(): void

Defined in: package/ui/src/ui/components/MermaidCanvas.tsx:75

Increases zoom by one toolbar step (0.1), up to 4.

Returns

void

zoomOut()

zoomOut(): void

Defined in: package/ui/src/ui/components/MermaidCanvas.tsx:77

Decreases zoom by one toolbar step (0.1), down to 0.1.

Returns

void