Translate diagrams in the draw.io editor

draw.io 20 Jul 2022

Share:

By using URL parameters with our online version of draw.io, you can add translation properties in the shapes themselves while you work in the diagram editor. You can switch languages in the editor via the Extras > Diagram Language in Classic mode, and via Settings > Diagram Language if you use Simple mode.
Translate labels on shapes and connectors directly in the draw.io editor

If you want to make a diagram available in multiple language, most diagramming applications require you to use separate files. Changes made to the original diagram require edits to multiple copies of a diagram.

Translating directly in the diagram editor has a number of advantages:

  • See the label strings in context and translate a diagram faster.
  • Check that labels in different languages still fit, without having to understand the language.
  • Modify the diagram once - not separately for each language.

Diagram translation is enabled by default

If switching the diagram language as described below doesn’t work, make sure it is not disabled via the menu.
If you can't switch the diagram language even though you have written labels in multiple languages, check that Diagram Language is not Disabled via the Extras or Settings menu

Explicitly enable diagram translation

Add the translate-diagram=1 URL parameter to the URL of our diagram editor, or go directly to the following link:

Alternatively, add "translateDiagrams": true to the draw.io editor configuration.

Translate labels on shapes and connectors

When you have enabled the diagram translation feature via the URL parameter above, the original label is shown at the top of the Edit Data dialog.

  1. Right-click on a shape or connector and select Edit Data from the context menu. Alternatively, select a shape and press Ctrl+M or Cmd+M.
  2. Add a language for the label in the format label_XY where XY is a two-letter language code, and click Add Property.
    Add a shape property for each language of a shape's label in the diagram editor to translate directly in the editor
    E.g. label_de is German, label_es is Spanish, label_jp is Japanese, etc.
  3. Enter the translated text to the right of the shape property you just added. Click Apply when done.
    Add the translation of the label to the shape property and click Apply

Now, when you hover over a shape in the editor, you can see which languages have been added.
Hover over a shape in the diagram editor to see which languages have been added to the Shape data

Tip: To get rid of a translation, click the x to the right of the translated string.

Note: If you don’t see the original label in the Edit Data dialog, you haven’t enabled the diagram translation feature with the URL parameter above. Add the parameter to the app.diagrams.net URL in your browser, and if necessary, reload the diagram in the editor.

Switch diagram language in the editor

Once you have added a translation to a shape or connector label, you can switch the diagram to that language via the menu. This doesn’t change the editor’s language - only the text in the diagram.

In the diagram editor:

  1. Open the menu and select Settings > Language.
  2. Choose the language you want to use and refresh the browser tab.
    Select Extras > Diagram Language and enter a two-letter language code to switch the diagram to another language using the shape properties for that language
    Open this example in the draw.io editor

The labels of shapes that have that language in their shape properties will update and display in that language. Any shapes that have not yet been translated will continue to display a label in the original language.

Switch diagram language in the lightbox viewer

At the moment, you need to use URL parameters to change the language of a diagram when it is displayed in the lightbox (such as when you export the diagram as a URL).

Add both &translate-diagram=1&diagram-language=XY to the lightbox URL, where XY is the language you want to view the diagram in.
Add URL parameters to select a different language in the Lightbox at viewer.diagrams.net

Follow us on GitHub, Twitter, Facebook.

Share: