vyuhDiagram
A DIAGRAM CANVAS FOR FLUTTER

A diagram editor.
Inside your Flutter app.

Build network topology editors, process designers and visual workflows. Your shapes, your data, your product.

Try the editor Get started
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

Free packages on pub.dev

SMALL PIECES. OPEN POSSIBILITIES.

A diagram is just
the beginning.

Give your users a visual way to work with your domain. Compose custom shapes, connect your application data and make the editing experience your own.

01

Your shapes. Your language.

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

02

The little details, connected.

Find a command, create the next connected shape, and edit shared properties. Every change shares one undo history.

03

At home in your application.

Bring your own tools and panels. Keep the document, camera, and interactions with one controller.

YOUR KIND OF CANVAS.

Pick a starting point.
Take it somewhere new.

Say it in verbs.

Every change is a named, undoable verb. Your code, the canvas and an agent all call the same ones.

Discover the verbs
your_canvas.dartFlutter
dart
final order = controller.createShape(
  Shapes.rectangle,
  at: DiagramPoint.zero,
  text: 'Order',
);
final invoice = controller.createShape(
  Shapes.ellipse,
  at: const DiagramPoint(260, 0),
  text: 'Invoice',
);

controller.connect(order, invoice);
Creation returns the new ID. Undo reverts each edit as one step.
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.

Start with one DiagramController and mount it with DiagramCanvas. List every extension once in its DiagramConfiguration: your shapes, tools and verbs, the editor and interactive controls. Each extension brings its own options.

Explore extensions and options Everything the controller can do
your_canvas.dartFlutter
dart
import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

// Create once in your host state.
final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [EditorExtension()],
  ),
);

controller.createShape(
  Shapes.rectangle,
  at: const DiagramPoint(300, 200),
  text: 'Start here',
);

// Mount inside a bounded layout.
DiagramCanvas(controller: controller);

// Dispose with the owning host state.
controller.dispose();
Use these statements in your host lifecycle: create once, mount in build, dispose on removal.
INDUSTRIES

Your industry.
Your diagram editor.

Focused starting points, each grounded in a real Flutter canvas. Choose the domain closest to your product.

Transportation & Transit

Connect terminals, depots and interchanges inside your Flutter planning application.

Explore transportation

Construction & Infrastructure

Connect work zones, deliveries and contractor handoffs inside your Flutter construction application.

Explore construction

Floor & space planning

Rooms, walls, openings, equipment, and dimensions in a native planning surface.

Explore floor planning

Network & building topology

Rooms, zones, devices, and links for KNX, IoT, telecom, and connected sites.

Explore topology

Manufacturing & MES

Work centers, routings, approvals, rework, and quality paths for shop-floor products.

Explore manufacturing

Energy systems

Generation, storage, charging, loads, and live power flow inside energy products.

Explore energy

Warehouse operations

Receiving, putaway, picking, dispatch, and exceptions as visible operational routes.

Explore warehouse

Make it part of
your product.

The Apache-2.0 public foundations are free for commercial and open-source applications.
For commercial toolkit extensions, choose Indie for your own application, Team for unlimited developers, or Enterprise for custom coverage.

Get started

Explore Free and other plans