vyuh_diagram_flutter 2.18.0

Flutter diagram canvas with rendering, selection, pan and zoom, text layout and themes. Build flowchart, topology and workflow editors on Vyuh Diagram.

vyuh_diagram_flutter

A Flutter diagram canvas: rendering, selection, pan and zoom, text and themes for your own diagram editor.

Vyuh Diagram · Docs · Examples · API reference

Put a diagram in your Flutter app. DiagramCanvas renders a controller's document, lets people select and navigate, lays out text and applies a theme. Build flowchart tools, network topology views, process designers and visual workflow editors on top of it.

What you get

• A canvas widget: DiagramCanvas with light and dark themes (DiagramTheme.light, DiagramTheme.dark).
• Navigation and selection: pan, zoom, marquee and element selection, with NavigationExtension to configure them.
• Text: shared text layout and editing for shapes and labels.
• Your widgets inside shapes: embed regular Flutter widgets in shapes, so a node can hold live controls.
• Images and effects: ImagesExtension and animated effects.
• Everything in one import: it includes vyuh_diagram_core and the JSON codec.

The core canvas lets people navigate and select. Your app can edit through controller methods. The separate commercial editor extension adds drawing tools, a toolbar and a property inspector.

Install

flutter pub add vyuh_diagram_flutter

Requires Flutter 3.47 or later.

Show a diagram

import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final controller = DiagramController();
controller.createShape(
  Shapes.rectangle, at: DiagramPoint.zero, text: 'Hello Flutter',
);

// Place this widget in a bounded layout.
DiagramCanvas(controller: controller, theme: DiagramTheme.light);
// Dispose the controller when its owner closes.

Let people edit

An editable extension makes the canvas edit with every installed tool:

import 'package:vyuh_diagram_flutter/extension_api.dart';

final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [
      const DiagramFlutterExtension(id: 'my.editing', editable: true),
    ],
  ),
);

For a complete toolbar and inspector, add the commercial vyuh_diagram_extension_editor.

Learn more

• Getting started
• Embedded widgets
• Theming
• Extensions
• Playground: try it in the browser

Coding-agent skill

Give your coding agent the integration guide:

dart run skills@ get -p vyuh_diagram_flutter -s vyuh-diagram-flutter-integration

Where this fits

Vyuh Diagram is a diagram editor you embed in your own app. Five packages are open source (Apache-2.0) on pub.dev:

Package	What it is
vyuh_diagram_types	Immutable document model and geometry.
vyuh_diagram_core	Controller, edits and history, in pure Dart.
vyuh_diagram_flutter	Flutter canvas, input and rendering.
vyuh_diagram_codec_json	Save and load diagrams as JSON.
vyuh_diagram_codec_svg	Export diagrams as SVG; import SVG shapes.

Commercial extensions add the editor, shape libraries, automatic layout, rich text, tables, a minimap and more. They come from pub.vyuh.tech; see package access and the full package list.

License

Apache License, Version 2.0 (text). Third-party materials keep their own licenses; see the notices shipped in this package.