How to use LaTeX Math in Draw.io & Diagrams.net models

Making publication-quality system models with complex mathematical notation can be a tedious task. In the past, I've been using Inkscape with TexText. This combination works fine and can produce great-quality images. However, I found it is not ideal for models that are basically diagrams. As the interconnections between the items and layout, in general, are hard to re-arrange.

Previously known as draw.io, diagrams.net has become a convenient tool for making complex system models. It supports has good support for mathematical typesetting that should feel familiar to anyone with a background in LaTeX.

This post will show you how to draw a system model for a downlink multi-user system with a full description of the system parameters embedded into the illustration.

Start by downloading or using the online version from diagrams.net. Choose Change storage to pick the place where to save the model. For this example, I used Device to store it on my laptop.

Type in the name of the file and choose the basic layout components. I used Network as I will be using the predefined symbols for network diagrams.

After creating the empty diagram, enable the mathematical typesetting from Extras -> Mathematical Typesetting. Diagrams.net has support for LaTeX and AsciiMath. LaTeX notation can be used inside the text elements by writing the expressions between $$ $$ or for inline version \( \).

Next, we start placing the components. First, we pick the base station by using the radio tower symbol. You find the symbols by using the search textbox. For the receivers, I used the cell phone symbol.

This is our basic layout, which we will be filling with the mathematical notation.

You can modify the text objects from the right-hand side toolbar. For the receiver labels, I've used these settings.

Now, we plugin the math. I'll add \(g_n\) to denote the channel gains between the transmitter and the corresponding receiver. Further, I'll add SNR expression in general form and for Receiver 1 as an example.

All the math expressions are done by using conventional text elements. For instance, the general SNR expression is given by

$$ 
\gamma_n = {g_n p_n \over{ \sum_{i \neq n} g_n p_i + N_0 }}
$$

The model can be exported in common formats including SVG, PDF, and PNG for further processing.

It took me maybe 5 minutes to make this model. Far faster than the previous Inkscape + TexText combo.