Use the editor

Navigation

• Documentation
• Use the model
• Use the view
• Build your own editor
• Operate the editor

Use DiagramEditor for a quick, batteries-included editing experience.

It wires:

• tool palette
• action toolbar
• style controls
• prompts and file dialogs
• DiagramEditView orchestration

Quick setup

import { DiagramEditor } from '@samatawy/diagrams';

const host = document.getElementById('editor-host')!;

const editor = new DiagramEditor(host, {
  prompts: {
    onUnsavedChanges: async () => 'save',
    onNoChangesSave: async () => true,
  },
});

const diagram = editor.getDiagramView();
diagram.setTool('rectangle');
Copy

Load, save, export

await editor.openDiagram();
await editor.saveDiagram();
await editor.exportDiagram({ format: 'png' });
Copy

Configure handlers (optional)

const editor = new DiagramEditor(host, {
  fileDialogs: {
    onOpenDiagram: async () => ({
      content: '{"id":"demo","nodes":[],"layers":[]}',
      source: 'memory',
      name: 'demo.json',
      mimeType: 'application/json',
    }),
  },
});
Copy

Use this when you want to ship quickly and keep customization incremental.