View-only diagrams

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Select shapes and connections, drag to pan, scroll to navigate, or pinch to zoom. Ctrl/Command-scroll zooms around the pointer. Arrow keys pan; Escape clears the selection. None of these operations modifies diagram content.

Mount DiagramCanvas(controller: controller) on a controller with no editable extension installed (leave out EditorExtension). The canvas then has no editing tools, transform handles, text input or editing shortcuts. It draws the same diagram, so shapes, text and images look exactly as they do in the editor. Attribution is built in. Pass DiagramController(configuration: DiagramConfiguration(license: token)) to remove it; see License.

The view follows the controller, so application code can still load or update the diagram through the controller. View-only describes canvas interaction, not a restriction on your application's controller verbs. Custom widget shapes use their portable painted representation in this mode. Without an editable extension there are no editing toolbars or inspectors.

Source

Widget buildExample() => ExampleCanvas(
  title: 'View only',
  instructions: 'Select a card or connection. Drag or scroll to pan; pinch or Ctrl/Command-scroll to zoom. Shapes and text cannot be edited.',
  createController: () => DiagramController(
    document: connectedCardsDocument(),
    configuration: DiagramConfiguration(extensions: demoModelExtensions),
  ),
);