Skip to main content

Use mathematical typesetting in text and labels

You can add maths equations to your diagrams by enabling mathematical typesetting via the draw.io menu. When you enter an equation into a text shape or label, enabling mathematical typesetting will use MathJax to render your equation. MathJax renders equations neatly and works in all browsers.
Mathematical typesetting will render equations in text shapes, even when they are in tables

Enable mathematical typesetting​

Select Extras > Mathematical Typesetting from the draw.io menu.

Click Extras /> Mathematical Typesetting to render your equations in MathJax

Disable mathematical typesetting​

Disable mathematical typesetting via the same menu item to see and edit the equation's LaTeX or AsciiMath.

Click Extras /> Mathematical Typesetting to render your equations in MathJax

Enter an equation in text or a label​

Enter your maths equation using LaTeX or AsciiMath in a text shape.

  • AsciiMath between single backticks `, for example: `a^2+b^2 = c^2`
  • LaTeX between double dollar signs $$, for example: $$\sqrt{3×-1}+(1+x)^2$$
  • Inline LaTeX between \( and \), for example: \(\sqrt{3×-1}+(1+x)^2\)

You can mix inline LaTeX and AsciiMath in the same text, for example:

LaTeX \(\sqrt{3×-1}+(1+x)^2\) and AsciiMath `a^b + b^2 = c^2`

Mathematical typesetting will render equations written in LaTeX or AsciiMath

Maths equations in tables​

Just like you can add shapes to table cells, you can also add maths equations to table cells and cross-functional tables.

Tip: Left-justify the text shapes, then reposition them as they are rendered so that you do not get blank areas or pages when you export your diagram to an image or a PDF file.

Mathematical typesetting will render equations in text shapes, even when they are in tables
Open these examples in our diagram viewer

Change the output format​

By default, the output uses SVG. You can use URL parameters to use HTML instead.

  • math-output=html to use HTML. This setting allows you to select most of the maths symbols in an exported PDF file.

Change the maths font​

The TeX font is used by default, and when converted to an image or PDF format, the equation is converted to SVG. You can change these settings using URL parameters.

  • math-output=html uses HTML-CSS to render the maths. Use this setting to allow the maths symbols to be selectable in an exported PDF file. Note that not all symbols are selectable.
  • math-font=STIX-Web changes the font to be STIX when generating the SVG version of the equation.
  • math-font=STIX uses the STIX font in the HTML-CSS version of the equation.

Troubleshooting​

Blank space or extra pages​

From draw.io 29.8.0 onwards, label autosize, view bounds, exports and the initial fit-to-window measure the rendered MathJax output instead of the formula source, so math cells no longer leave extra whitespace around them and exports are sized correctly. Self-hosters and embedders can revert to the previous behaviour with the mathOutputSize configuration option.

If you are running an older release of draw.io, or you have disabled mathOutputSize, you can work around the issue per cell:

In the Style tab of the format panel, expand the Property section, and look for the Text Overflow shape property. Use Block or Width (or in some cases Hidden) for resize the shape to match the math output.
Set the text overflow shape property and resize the shape to fit just the maths equation to prevent problems printing

Make sure you use either the left or right justification in the Text tab of the format panel for your text shapes and keep them away from the diagram edges to avoid extra whitespace when exporting your diagram to an image or a PDF document.
Use left or right justification when including maths equations in diagrams

Maths is not rendered​

If you find your maths equation is not rendered correctly, the text may be hiding some HTML formatting tags.

  1. Select the text, then click </> in the toolbar to expose hidden HTML tags.
  2. Delete any extra HTML tags, and re-enable Mathematical Typesetting in the menu.
    Unhide HTML tags if you have problems rendering your equation

See why text in exported SVG images may not display correctly

Note: Math typesetting is available in draw.io for Confluence Server or Data Centre from release 10.1.4 onwards.