Localizing Diagram Editor

By default, all labels in Diagram Editor are defined in English, but you can provide custom translations for:

labels on the inputs and buttons
tooltips for shapes

The Diagram Editor widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

Diagram Editor titles are stored in the following object:

export default {
    "Link arrow": "Link arrow",
    "Default link arrow": "Default link arrow",
    "Link mode": "Link mode",
    "Default link mode": "Default link mode",
    Fill: "Fill",
    Size: "Size",
    "Block settings": "Block settings",
    "Default block size": "Default block size",
    Font: "Font",
    "Line style": "Line style",
    "Border style": "Border style",
    Content: "Content",
    None: "None",
    Reset: "Reset",
    Autoplace: "Autoplace",
    Apply: "Apply",
    Background: "Background",
    Transparent: "Transparent",
 
    // Titles of default groups in the list of shapes
    Block: "Block",
    Flow: "Flow",
    Common: "Common",
    Extra: "Extra",
 
    // Built-in shapes: block
    Circle: "Circle",
    Dot: "Dot",
    Ellipse: "Ellipse",
    Head: "Head",
    Heptagon: "Heptagon",
    Join: "Join",
    Junction: "Junction",
    Octagon: "Octagon",
    Pentagon: "Pentagon",
    Plus: "Plus",
    Rrect: "Rounded rectangle",
    Rtriangle: "Right triangle",
    Square: "Square",
    Star: "Star",
    Tail: "Tail",
    Trapezoid: "Trapezoid",
    Triangle: "Triangle",
    // Built-in shapes: flow
    Action: "Action",
    Collate: "Collate",
    Connector: "Connector",
    Data: "Data",
    Database: "Database",
    Decision: "Decision",
    Delay: "Delay",
    Display: "Display",
    Document: "Document",
 
    Input: "Input",
    Internal: "Internal",
    Looplimit: "Loop limit",
    Merge: "Merge",
    Multidoc: "Multiple documents",
    Note: "Note",
    Operation: "Operation",
    Or: "Or",
    Output: "Output",
    Preparation: "Preparation",
    Process: "Process",
 
    Sdata: "Sequential data",
    Sort: "Sort",
    Start: "Start / End",
    Storage: "Storage",
    Subroutine: "Subroutine",
    Tape: "Tape",
    // Built-in shapes: common
    Default: "Default",
    Org: "Organization",
    Text: "Text",
    "Add label": "Add label",
    "Alignment relative to link": "Alignment relative to link",
    "Position shift": "Position shift",
};

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

1. Set custom translations by creating the needed locale (below it is "ru") within the diagram.locales object:

// Russian translations
diagram.locales.ru = {
    "Link arrow": "Стрелка линии",
    "Link mode": "Тип линии",
};

2. Define the current locale for Diagram Editor. For these purposes, set the locale property of Diagram Editor in its constructor:

// use custom scrolls, optional
webix.CustomScroll.init();
 
webix.ui({
  view: "diagram-editor",
  locale: {
    lang: "ru",
    webix: {
      // switch all webix widgets to the selected locale
      ru: "ru-RU"
    },
  },
});

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

1. First, set custom translations to the desired labels:

diagram.locales.ru = {  // Russian
  Heptagon: "Гептагон", ...
};
 
diagram.locales.en = {  // English
  Heptagon: "Heptagon", ...
};

2. Switch between languages using Diagram Editor "locale" service and its setLang method:

{
  view: "segmented",
  options: ["en", "ru"],
  width: 250,
  click: function() {
    const locale = $$("editor").getService("locale");
    locale.setLang(this.getValue());
  }
}

How to Synchronize Diagram Editor and Webix Locale

The built-in labels of Webix components within the Diagram Editor, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Diagram Editor and Webix, define webix parameter in the locale setting of the Diagram Editor constructor:

{
  view:"diagram-editor",
  locale: {
    lang: "en",
    webix: {
      // switch Webix the selected locale
      en: "en-US",
      zh: "zh-CN"
    }
  }
}