A DIAGRAM KIT FOR FLUTTER

Give your ideas
a little room to move.

A canvas for the things you’re imagining.
Compose beautiful diagramming experiences, right inside your app.

Make a few connections Start building

Opening the live canvas…

Drag a shape. Resize a corner. Pull from a port to connect.

Flutter, through and through.

RIGHT IN YOUR ELEMENT

Feels like Flutter.
Because it is Flutter.

Dart all the way down. A real Flutter canvas, a familiar widget API, and room for the rest of your application.

Meet your new canvas widget

SMALL PIECES. OPEN POSSIBILITIES.

A diagram is just
the beginning.

An idea board today. A custom process designer tomorrow. One composable foundation, shaped around the application you’re building.

Your shapes. Your language.

Compose cards, ports, text, and geometry into shapes that feel native to your product.

The little details, connected.

Selection, snapping, rich text, routing, and undo share the same editing foundation.

At home in your application.

Bring your own tools and panels. Keep the document, camera, and interactions in one session.

ONE KIT. YOUR KIND OF CANVAS.

Pick a starting point.
Take it somewhere new.

Start with a little space.

Give your users a place to map an idea without taking over the rest of your application.

Make it your own

your_canvas.dartFlutter

dart

final session = DrawingSession(
  document: document,
  configuration: DrawingConfiguration(
    grid: DrawingGridConfiguration(
      visible: true,
      snap: true,
    ),
    canvasPolicy: const InfiniteCanvasPolicy(),
  ),
);

DrawingCanvas(session: session)

A minimal canvas. Your application supplies the surrounding controls.

THE FEELING IS IN THE DETAILS

A few things that
just click.

COMPOSE

Make yourself a shape.

A little text. A few ports. Your own geometry. Give your application a visual language.

Meet the shape grammar CONNECT

Follow a different path.

Straight, elbow, quadratic, or Bézier. Add particles and give a connection some personality.

Explore paths and effects EXPLORE

Try it. Then try again.

Move it, resize it, rotate it, or write it differently. Shared editing and undo leave room to experiment.

See how editing fits together VIEWPORT & CANVAS

A little change of perspective.

Pan, zoom, or glide into focus. Choose an open canvas or set its boundaries, then find your rhythm with dots, lines, layered grids, and snapping.

Explore your canvas MAKE IT YOURS

Your app. A little more possibility.

A focused editor or room to experiment. Choose the tools, bring your own controls, and make diagramming feel like part of your app.

Find your fit

YOURS TO COMPOSE

The canvas is ours.
The experience
is yours.

Define shape types in a registry. Give a DrawingSession your document and canvas configuration. Mount it with DrawingCanvas, then create and edit through the same session.

Explore the object model

your_canvas.dartFlutter

// One session. Your possibilities.
final session = DrawingSession(
  document: document,
  shapeRegistry: yourShapes,
  configuration: DrawingConfiguration(
    grid: DrawingGridConfiguration(
      visible: true,
      snap: true,
    ),
    extensions: yourExtensions,
  ),
);

DrawingCanvas(session: session)

Definitions describe shape types. The session owns editing. The canvas mounts it.

What will you connect?

Start with a blank canvas. Make it feel like your product.

Find your starting point

In active development. Read the API and current boundaries, or explore the capability guide.

Give your ideasa little room to move.

Feels like Flutter.Because it is Flutter.

A diagram is justthe beginning.