Build tools

Use @ministryplace/flowmark-unplugin when diagrams live in standalone .flowmark files. The same adapter supports Vite, Rollup, Rolldown, Webpack, Rspack, and esbuild through dedicated entry points.

pnpm add @ministryplace/flowmark-unplugin

Vite and Astro

Astro uses Vite plugins directly:

astro.config.ts

import flowmark from "@ministryplace/flowmark-unplugin/vite";
import { defineConfig } from "astro/config";

export default defineConfig({
  vite: {
    plugins: [flowmark()],
  },
});

Use the same plugin in a plain Vite configuration:

vite.config.ts

import flowmark from "@ministryplace/flowmark-unplugin/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [flowmark()] });

Choose the import behavior

Imports require an explicit query so static and runtime behavior never changes accidentally:

example.ts

import svg from "./system.flowmark?svg";
import url from "./system.flowmark?url";
import source from "./system.flowmark?source";
import Diagram from "./system.flowmark?react";
import DiagramElement from "./system.flowmark?element";

Query	Result
?svg	Portable SVG markup rendered during the build
?url	Self-contained SVG data URL
?source	Original Flowmark DSL
?react	Live FlowmarkLive component with the source embedded
?element	Unregistered FlowmarkDiagram subclass with the source embedded

React imports require react and @ministryplace/flowmark-ui. Register element imports under an application-owned tag:

example.ts

import SystemDiagram from "./system.flowmark?element";

customElements.define("system-diagram", SystemDiagram);

Add the bundled declarations to TypeScript:

tsconfig.json

{
  "compilerOptions": {
    "types": ["@ministryplace/flowmark-unplugin/client"]
  }
}

For another bundler, replace /vite with /rollup, /rolldown, /webpack, /rspack, or /esbuild. The plugin watches each imported file, so development builds update when its source changes.

Markdown versus standalone files

The Unplugin adapter does not replace the Markdown integrations. Remark and Markdown-it locate fenced blocks and map diagnostics into their host documents. Unplugin resolves standalone files and JavaScript imports. All three delegate rendering, portable defaults, and module generation to @ministryplace/flowmark-build, which keeps them aligned as the language and renderer evolve.