vyuhDiagram

Extending it with extensions ​

Keep the controller and canvas from Hello world. Extensions add capabilities to that same diagram; you do not switch to a different document model.

Foundation and commercial extensions

Hello World uses the free foundations. This tutorial adds commercial SDK extensions for the ready-made editor, specialized shapes and advanced connector routing. You can also build your own shapes, tools and Flutter extensions using the foundation APIs.

What an extension adds ​

An extension contributes named capabilities. EditorExtension adds the palette, toolbar and inspector. ShapesExtension adds specialized shape libraries. ConnectorsExtension adds routing and arrowhead choices.

Install extensions in one DiagramConfiguration.extensions list. Each extension takes its own options and installs the dependencies it needs.

Add the editor first ​

Install vyuh_diagram_extension_editor using the package setup guide, then import it:

dart
import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';

Replace Hello World's controller declaration with this configuration. Its shape creation code and canvas stay the same.

dart
final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [EditorExtension()],
  ),
);

The canvas now has an editing interface. The tools use the same controller, document and undo history.

Add specialized shapes and routes ​

Install the shapes and connectors packages before adding their imports. Then extend the same configuration:

dart
import 'package:vyuh_diagram_extension_shapes/vyuh_diagram_extension_shapes.dart';
import 'package:vyuh_diagram_extension_connectors/vyuh_diagram_extension_connectors.dart';

final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [
      EditorExtension(),
      ShapesExtension(),
      ConnectorsExtension(),
    ],
  ),
);

Shapes adds libraries such as flowchart symbols. Connectors adds elbow/orthogonal, quadratic and Bézier routing, plus additional arrowheads. Existing straight connectors keep their routing until you change it.

Continue building ​