Translate diagrams in the draw.io editor
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.
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.
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.
- Right-click on a shape or connector and select Edit Data from the context menu. Alternatively, select a shape and press
Ctrl+M
orCmd+M
. - Add a language for the label in the format
label_XY
whereXY
is a two-letter language code, and click Add Property.
E.g.label_de
is German,label_es
is Spanish,label_jp
is Japanese, etc. - Enter the translated text to the right of the shape property you just added. Click Apply when done.
Now, when you hover over a shape in the editor, you can see which languages have been added.
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:
- Open the menu and select Settings > Language.
- Choose the language you want to use and refresh the browser tab.
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.