Skip to content
Flowmark

Quickstart

Create a diagram, save the .flowmark source, and choose how readers should receive it. Studio needs no account or installation; Node.js is only required for local tooling and build pipelines.

1. Start in Studio

Section titled “1. Start in Studio”

Open Studio and edit the starter diagram. Change a label, add another connection, or change -> to =>. Studio provides Monaco editing, diagnostics, layout and theme controls, live preview, formatting, and export while keeping every meaningful choice in the DSL.

If you cannot open Studio right now, the smaller editor below uses the same parser, layout engine, and SVG renderer:

Edit source — diagram updates live
Source

2. Save the source

Section titled “2. Save the source”

Use Studio’s Save or Save as action to keep the source as checkout.flowmark, or create the same file in your editor:

checkout.flowmark
diagram "Checkout" {
  direction LR


  browser: client "Web app"
  api: gateway "API"
  checkout: service "Checkout"
  orders: database "Orders"


  browser -> api "POST /orders"
  api -> checkout
  checkout -> orders "insert"
}

The file is ordinary UTF-8 text. Commit it, diff it, and review it like source code. You can reopen it in hosted Studio, launch local Studio with the CLI, or edit it with the Flowmark extension.

To work against repository files through local Studio:

Terminal window
pnpm dlx @ministryplace/flowmark-cli studio checkout.flowmark --allow-write

3. Choose the first output

Section titled “3. Choose the first output”

For a document, README, wiki, or slide, export SVG directly from Studio. The result includes its theme values and does not require Flowmark JavaScript where it is displayed.

For a repeatable local or CI render, use the CLI without installing it globally:

Terminal window
pnpm dlx @ministryplace/flowmark-cli render checkout.flowmark \
  --output checkout.svg \
  --theme light

Open checkout.svg in a browser. The CLI snapshots theme tokens by default, so the SVG keeps its appearance in a README, wiki, slide, or artifact viewer without Flowmark CSS.

If you use npm or Yarn, replace pnpm dlx with npx or yarn dlx.

4. Put the command in your project

Section titled “4. Put the command in your project”

For repeatable builds, install the CLI locally:

Terminal window
pnpm add --save-dev @ministryplace/flowmark-cli
package.json
{
  "scripts": {
    "diagrams:check": "flowmark check docs/checkout.flowmark",
    "diagrams:build": "flowmark render docs/checkout.flowmark --output docs/checkout.svg --theme light"
  }
}

check returns a non-zero exit code for invalid source, which makes it suitable for CI.

Prefer JavaScript?

Section titled “Prefer JavaScript?”

Install the SDK when your application owns the source or needs the SVG in memory:

Terminal window
pnpm add @ministryplace/flowmark
example.ts
import { writeFile } from "node:fs/promises";
import { Flowmark } from "@ministryplace/flowmark";


const result = await Flowmark.renderToSvg(source, {
  theme: "light",
  snapshotTheme: true,
});


if (!result.ok || !result.svg) {
  for (const diagnostic of result.diagnostics) {
    console.error(`${diagnostic.code}: ${diagnostic.message}`);
  }
  throw new Error("Diagram could not be rendered");
}


await writeFile("checkout.svg", result.svg, "utf8");

Expected source mistakes are returned as diagnostics; they are not thrown. See the JavaScript API for browser mounting and staged pipeline access.

Where to go next

Section titled “Where to go next”