Skip to content
Flowmark
Flowmark

Beautiful, interactive diagrams from text.

Write services, events, decisions, tables, and sequences in a readable language. Flowmark handles compound layout, routed edges, icons, and interactive playback from the same source.

Open StudioGet startedLanguage guide
$npx @ministryplace/flowmark-cli studio

Describe software structure, control the layout, and animate the flow.

01

Software-specific language

Node kinds include clients, gateways, services, brokers, databases, decisions, and outcomes. Calls and events use different edge operators. Tables include fields, keys, and cardinality.

checkout => events "OrderPlaced"
02

Structural layout controls

Groups participate in layout. Arrange regions as rows, stacks, or named grids; span tracks; tune density; and choose how routed edges handle crossings.

arrange: grid · rowSpan: 2
03

Diagram stories

Animation blocks reference existing nodes and edges. Trace a path, activate or pulse a node, pause, jump, or run steps in parallel. Browser embeds provide playback controls.

flow api -> checkout for 1.2s

Diagram-as-code does not have to look generic.

Flowmark combines software-specific shapes with content-aware sizing, architectural icons, typography, group treatment, labeled routes, and coordinated themes. The defaults are meant to produce a coherent diagram before you write custom styles.

  • Clients, gateways, services, brokers, stores, decisions, and outcomes
  • Brand-aware and theme-aware icons built into the node vocabulary
  • Custom themes, styles, shapes, and icon collections when the defaults are not enough
Explore themes and customization →
Diagram with 9 nodes and 7 edges Order platformExperienceCommerceData & eventsWeb appMobileAPI GatewayCheckoutBillingPostgresRedisKafkaStripewritesessionOrderPlacedauthorize

One source, delivered wherever your readers are.

README · wiki · static siteSelf-contained SVG

Snapshot theme values into a portable file with no browser runtime.

Any browser frameworkWeb component

Pan, zoom, fullscreen, theme switching, source updates, and playback.

React applicationsLive view and playground

Use the interactive view directly or include an editable source panel.

Astro · MDX · VitePress · documentationMarkdown fences

Render fenced diagrams to static SVG through Remark or Markdown-it.

Vite · Rollup · Webpack · application buildsFirst-class .flowmark imports

Choose SVG, data URL, source, React, or custom-element imports explicitly.

Pull requests · CICLI validation and rendering

Check source, render artifacts, and detect generated-file drift in a build.

A diagram change can be reviewed as a model change.

Flowmark files are ordinary text. A pull request can show that an interaction became an event, while CI renders the updated SVG for readers who only need the result.

  billing: service "Billing"
- billing -> events "Payment"
+ billing => events "PaymentCaptured"

Build and export a diagram in about five minutes.

Open the quickstartBrowse source examples