React

FlowmarkLive is a typed React wrapper around the same web component used everywhere else. FlowmarkPlayground adds a source editor and should be loaded only when editing is part of the experience.

Install

pnpm add @ministryplace/flowmark @ministryplace/flowmark-element @ministryplace/flowmark-ui

Import the live styles once:

styles.css

@import "@ministryplace/flowmark-ui/live.css";

Live diagram

example.tsx

import { FlowmarkLive } from "@ministryplace/flowmark-ui";

export function Architecture({ source }: { source: string }) {
  return (
    <FlowmarkLive
      source={source}
      theme="auto"
      height={480}
      frameless
      showThemeToggle={false}
      showViewControls
      onFlowmarkRender={(event) => {
        if (!event.detail.ok) console.error(event.detail.diagnostics);
      }}
    />
  );
}

Changing source rerenders without remounting the viewport. The component accepts animation props including animation, autoplay, animationLoop, and showAnimationControls. Set frameless to remove the host border and panel background while keeping control props independent.

Use a ref when the host needs view methods:

example.tsx

import { useRef } from "react";
import type { FlowmarkDiagram } from "@ministryplace/flowmark-element";

const diagram = useRef<FlowmarkDiagram>(null);

<FlowmarkLive ref={diagram} source={source} />;
<button onClick={() => diagram.current?.fit()}>Fit diagram</button>;

Editable playground

Import the playground from its separate entry point so ordinary live diagrams do not pull editor and syntax-highlighting code:

styles.css

@import "@ministryplace/flowmark-ui/playground.css";

example.tsx

import { FlowmarkPlayground } from "@ministryplace/flowmark-ui/playground";

<FlowmarkPlayground source={initialSource} layout="split" height={560} showStats={false} />;

The playground supports split, stacked, and gallery layouts. It lazy-loads syntax highlighting, and accepts the same animation, autoplay, animationLoop, and showAnimationControls props as the live view. It is still a much larger and more interactive surface than a static diagram. Reserve it for tutorials, sandboxes, and authoring tools.

Server-rendered SVG

For a diagram that does not need browser interaction, render during the server or static build:

example.ts

import { renderFlowmarkSvg } from "@ministryplace/flowmark-ui";

const { svg, diagnostics } = await renderFlowmarkSvg(source, {
  theme: "light",
  snapshotTheme: true,
});

This avoids shipping the live rendering path to the client. See SVG and static sites for trust boundaries and theme choices.