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`
See this example in our online editor
Enable mathematical typesetting
Select Extras > Mathematical Typesetting from the draw.io menu.
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.
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.
- Select the text, then click
</>
in the toolbar to expose hidden HTML tags. - Delete any extra HTML tags, and re-enable Mathematical Typesetting in the menu.
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.