vyuhDiagram
A DIAGRAM KIT 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 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.

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.

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

03

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
import 'package:vyuh_diagram_kit/drawing.dart';

// Create once in your host state.
final session = DrawingSession();

session.createShape(
  type: Shapes.card,
  worldCenter: const DiagramPoint(300, 200),
  text: 'Start here',
);

// Mount inside a bounded layout.
DrawingCanvas(session: session);

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

Your industry.
Your diagram editor.

From network topology to production processes, give your users a canvas that speaks their language. Explore an example, then make it part of your app.

Telecom & network topology

Bring devices, connections and status into your network application. Start with the topology example and connect your own data.

Explore network topology

Manufacturing process design

Give teams a visual way to map production steps, decisions and rework paths. Adapt the flowchart example to your manufacturing process.

Explore the flowchart example

Workflow authoring

Visualize tasks, decisions and parallel branches. Build editable workflow drafts with typed connections and inputs for your application.

Explore workflow building blocks

Embedded diagram editors

Add a visual workspace to your product with custom shapes, rich text and familiar editing tools. Shape it around the way your users work.

Try the editor

Space & floor planning

Let users arrange rooms, walls, doors and dimensions inside your planning application. Start with the floor plan example.

Explore floor planning

Visualizing connections

Show direction and activity along connections with pulses and particles. Configure the effects to tell your application’s story.

Explore path effects

Make it part of
your product.

Bring a diagram editor into your Flutter application.
Tell us what you’re building and talk to us about a commercial license.