Markdown

Flowmark provides build-time plugins for both major Markdown ecosystems. They turn fenced Flowmark source into accessible, theme-complete SVG during the build, so readers do not need client JavaScript.

Remark, Unified, Astro, and MDX

Use @ministryplace/flowmark-remark with Remark-based tools, including Astro, MDX, and Docusaurus.

pnpm add @ministryplace/flowmark-remark

For Astro, add the plugin to markdown.remarkPlugins:

astro.config.ts

import remarkFlowmark from "@ministryplace/flowmark-remark";
import { defineConfig } from "astro/config";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkFlowmark],
  },
});

In a generic Unified pipeline, place it after parsing and before the mdast-to-hast bridge:

render-markdown.ts

import remarkFlowmark from "@ministryplace/flowmark-remark";
import rehypeStringify from "rehype-stringify";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";

const html = await unified()
  .use(remarkParse)
  .use(remarkFlowmark)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(markdown);

The plugin passes parsed HAST through Unified’s normal bridge; it does not create raw HTML nodes or require rehype-raw. Renderer diagnostics are attached to the VFile at their corresponding Markdown lines.

Markdown-it and VitePress

Use @ministryplace/flowmark-markdown-it when your host is built on Markdown-it, including VitePress and similar static-site generators.

pnpm add @ministryplace/flowmark-markdown-it markdown-it

render-markdown.ts

import MarkdownIt from "markdown-it";
import { flowmarkMarkdownIt, renderFlowmarkMarkdown } from "@ministryplace/flowmark-markdown-it";

const md = new MarkdownIt();
flowmarkMarkdownIt(md);

const env = {};
const html = await renderFlowmarkMarkdown(md, markdown, env);
console.log(env.flowmarkDiagnostics);

Flowmark layout is asynchronous, so render through renderFlowmarkMarkdown() instead of calling md.render() directly. Theme values are resolved into the SVG by default, which keeps generated pages portable. Each diagnostic includes its Flowmark source range and the corresponding one-based Markdown line.

Both Markdown adapters delegate rendering and diagnostic normalization to @ministryplace/flowmark-build. They only understand their host’s fence and source-position model, so DSL and renderer evolution remains centralized in @ministryplace/flowmark.

VS Code

The first-party Flowmark extension uses the same fence metadata contract to render flowmark fences in VS Code’s built-in Markdown preview. For .flowmark files it also supplies the full language service, a side-by-side preview, and portable SVG export.