Step 5. Create plugin types

Now that the default plugin is ready, you can start coding other plugin types.

Each plugin type has specific plugin items. Define the context menu item that will be displayed when you right-click on audio or video files:

export const contextMenuItem: IContextMenuItem = {
    key: "speech-to-text-context-menu-item",
    label: "Convert to text",
    icon: "speech-to-text-16.png",
    onClick: assemblyAI.speechToText,
    fileType: [],
    withActiveItem: true,
Context menu item

You can add more plugin types. For example, the plugin can be accessed from the main button menu, so we need to specify the main button item:

const mainButtonItem: IMainButtonItem = {
    key: "draw-io-main-button-item",
    label: "",
    icon: "drawio.png",
    onClick: (id: number) => {

        const message: IMessage = {
            actions: [Actions.showCreateDialogModal],
            createDialogProps: {
                title: "Create diagram",
                startValue: "New diagram",
                visible: true,
                isCreateDialog: true,
                extension: ".drawio",
                onSave: async (e: any, value: string) => {
                    await drawIo.createNewFile(value);
                onCancel: (e: any) => {
                onClose: (e: any) => {

        return message;
    // items: [createItem],

When the main button item is clicked, the modal window appears where you can type the diagram's name and open an empty .drawio file.

Create diagram

For the plugin, you also need to configure the file plugin type which works when the user opens the specific .drawio file:

  1. Define the file item that is represented as a file with the specific extension (.drawio) and icon:

    export const drawIoItem: IFileItem = {
        extension: ".drawio",
        fileTypeName: "Diagram",
        fileRowIcon: "drawio-32.svg",
        fileTileIcon: "drawio-32.svg",
        devices: [Devices.desktop],
  2. Define the onClick event which will execute the editDiagram method each time the .drawio file is opened:

    const onClick = async (item: File) => {
        return await drawIo.editDiagram(;
    Drawio file