Step 4. Configure the plugin's interface elements

If necessary, define the plugin's UI elements. Consult our Storybook to develop your plugin's UI.

For example, the plugin contains two main UI elements - the modal window and the diagram editor. Create the files for configuring each element. For your convenience, you can put these files into a separate DrawIO folder.

  • In the Dialog.ts file, configure the modal window settings. Specify the IFrame UI component that is used to embed the website into a modal window:

    export const frameProps: IFrame = {
        width: "100%",
        height: "100%",
        name: "test-drawio",
        src: "",

    Create the IBox container to add the iframe to it:

    const body:
    IBox = {
        widthProp: "100%",
        heightProp: "100%",
        children: [
                component: Components.iFrame,
                props: frameProps,

    Configure the modal window properties:

    export const drawIoModalDialogProps: IModalDialog = {
        dialogHeader: "",
        dialogBody: body,
        displayType: ModalDisplayType.modal,
        fullScreen: true,
        onClose: () => {
            const message: IMessage = {
                actions: [Actions.closeModal],
            return message;
        onLoad: async () => {
            return {
                newDialogHeader: drawIoModalDialogProps.dialogHeader || "",
                newDialogBody: drawIoModalDialogProps.dialogBody,
        autoMaxHeight: true,
        autoMaxWidth: true,
  • In the Editor.ts file, configure the diagram editor. Create the DiagramEditor function with the following parameters:

    Parameter Description Type Example
    Defines the editor's ui theme. string "default"
    Defines the editor's dark theme. string "auto"
    Specifies if the offline mode is active or not. boolean false
    Specifies if the libraries are enabled or not. boolean false
    Defines the editor's language. string "auto"
    Defines the URL to the editor. string ""
    Specifies if the Save button will be displayed in the editor. boolean true

    Then specify methods to work with diagrams:

    Method Description
    Starts the editor with the given data.
    Returns the diagram's data.
    Returns the diagram's title.
    Returns the diagram's format.
    Returns the editor's frame ID.
    Returns the URL to the iframe.
    Handles the given message.
    Posts the load message to the editor.
    Saves the given data.

    The full code for the DiagramEditor can be found here.