Use mathematical typesetting in diagrams

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

  • AsciiMath between `, for example: `a^2+b^2 = c^2`
  • LaTeX between $$, 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

See this example in our online editor

Enable mathematical typesetting

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

Click Extras > Mathematical Typesetting to render your equations in MathJax

Enabling mathematical typesetting will use MathJax to render your maths equations. MathJax renders equations neatly and works in all browsers.

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

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.

Troubleshooting

Blank space or extra pages

Use Block or Width (or in some cases Hidden) under Style, Property, Text Overflow for the cell and resize it to match the math output.

Make sure you use either the left or right justification 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.

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 also: 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.