Maths equations in diagrams 20 Jul 2020


You can add maths equations to your diagrams by enabling mathematical typesetting via the 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.

LaTeX and AsciiMath

Input equations using LaTeX or AsciiMath.

LaTeX inline: surround your equation with \( and \).
Example: \(\sqrt{3×-1}+(1+x)^2\)

AsciiMath inline: by surrounding your equation with a single backtick `.
Example: `a^b + b^2 = c^2`

LaTeX in a block: surround your equation with two dollar signs $$.
Example: $$\sqrt{3×-1}+(1+x)^2$$

You can also mix LaTeX and AsciiMath inline in the one text field.
Example: LaTeX \(\sqrt{3×-1}+(1+x)^2\\) and AsciiMath `a^b + b^2 = c^2`

Click Extras > Mathematical Typesetting to render your equations in MathJax

Enable mathematical typesetting

Select Extras > Mathematical Typesetting in the menu to render your equations in MathJax.

You can disable it at any time and see the equation’s LaTeX or AsciiMath source through the same menu item.

Click Extras > Mathematical Typesetting to render your equations in MathJax
Open these examples in the viewer

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 the viewer

Troubleshooting: If you find your maths is not converted, you likely have pasted some text containing HTML tags that format the text. Select the text, then click on the HTML button in the toolbar to unhide HTML tags.

Unhide HTML tags if you have problems rendering your equation

Change the output 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.

Follow us on GitHub, Twitter, Facebook.