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 diagrams.net

Enable mathematical typesetting

Select Extras > Mathematical Typesetting from the diagrams.net 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 and font

By default, the output uses SVG and the TeX font. You can use URL parameters to use HTML-CSS and the STIX font.

math-output=html to use HTML-CSS. This setting allows you to select most of the maths symbols in an exported PDF file.
math-font=STIX-Web to use the STIX font in the SVG render.
math-font=STIX to use the STIX font in the HTML-CSS render.

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.

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

Tìm kiếm Blog này

Lương Thanh Tường