Getting started

Vyuh Diagram gives your Flutter application a canvas for shapes, text and connections. The Apache-2.0 public foundations are free for commercial and open-source applications. Start with an interactive diagram, then add optional commercial extensions for specialized content and ready-made editing controls.

See all packages for the package list and registry version badges.

Understand the pieces

Before writing code, there are three pieces to know:

• The document holds the elements, their positions, styles and connections.
• The controller owns the document and changes it through methods such as createShape, connect and move. It also manages selection and undo/redo.
• The canvas is the Flutter widget that displays the controller's diagram and handles the viewport.

Keep one controller for the lifetime of your screen and dispose it when the screen closes. Flutter rebuilds do not require recreating your document.

What the foundations include

Capability	What you can build
Shapes	Rectangles, ellipses, polygons, cards, comments, groups, frames, images, vector paths and standalone lines.
Text	Text boxes and plain text inside shapes, with paragraph alignment and text sizing.
Connections	Straight connectors bound to elements or named ports, labels and basic arrowheads. Endpoints follow their owners.
Freehand	Stroke color and width, smoothing, pressure handling, and pen, brush and marker presets.
Edits and history	Create, move, resize, rotate and delete through controller methods; selection, undo/redo and grouped edits.
Flutter canvas	Pan and zoom, a configurable grid, rendering and interactive editing with DiagramFlutterExtension(editable: true).
Custom content	Define shapes, compose their contents and embed regular Flutter widgets in declared slots.
Document formats	JSON save/reopen and SVG output through the foundation codecs.

Core is independent of Flutter, so its document and controller APIs also work in a headless Dart application. Flutter adds the canvas and widget hosting. JSON and SVG are separate foundation codec packages.

Create a Flutter project

Use vyuh_diagram_flutter as the entry point. It exposes the canvas and shared controller APIs.

flutter create diagram_example
cd diagram_example
flutter pub add vyuh_diagram_flutter

Next, follow Hello world to put two shapes and a connector on an editable canvas. The complete public package example also runs with only free dependencies.

Build up gradually

1. Hello world: the free foundation example, from controller to interactive editing and saving.
2. Extending it with extensions: add the optional editor, shape libraries and routing.
3. Shape anatomy: compose your own shapes.
4. Widgets inside shapes: host interactive Flutter controls.

The vocabulary and controller verbs explain the API in more detail.