Obsidian Desmos

Render Desmos graphs right inside your notes.
Works both online and offline.

Installation

Automatic (Recommended)

Search for Desmos in the inbuilt Obsidian community plugin browser and install it from there.

Manual

Download the attached files from the latest release and place them in <vault-root>/.obsidian/plugins/obsidian-desmos/ (you may need to create any missing directories) then enable community plugins (if needed) and toggle the Desmos plugin on.

Exporting

If you wish to export a note with a graph in it to a pdf then caching must be enabled and the graph(s) must be in the cache (meaning you've viewed it at least once) - as however Obsidian is doing the pdf export causes the Desmos API to break and never return a rendered graph.

Usage

The most basic usage of this plugin involves creating a codeblock with the tag desmos-graph and placing the equations you wish to graph in the body:

    ```desmos-graph
    y=x
    ```

Equations use the LaTeX math format and you can graph multiple equations by placing each one on a seperate line:

    ```desmos-graph
    y=\sin(x)
    y=\frac{1}{x}
    ```

You can restrict the bounds of the graph and apply other settings by placing a --- seperator before your equations. The content before it must be a set of key=value pairs seperated by either newlines or semicolons (or both):

    ```desmos-graph
    left=0; right=100;
    top=10; bottom=-10;
    ---
    y=\sin(x)
    ```

You can set the dimensions of the rendered image by using the height and width fields.
Additionally, you can disable the graph grid by setting grid=false.

You can set the mode of trigonometry functions by using the degreeMode setting.
This has two valid values: radians or degrees. By default, it will be set to radians.

Equation Control

You can additionally set three other fields for each equation - the style, color, and a restriction. Each of these must be placed between a series of | characters after the equation (in any order).

The valid colors are (case-insensitive):

• RED
• GREEN
• BLUE
• YELLOW
• MAGENTA
• CYAN
• PURPLE
• ORANGE
• BLACK
• WHITE
• Any hex color code beginning with # (e.g #42ddf5)

Note that the default color can be set by using the defaultColor field in the graph settings. This field follows the same format.

The valid styles are (case-insensitive):

• Line (e.g y=x)
  • SOLID (default)
  • DASHED
  • DOTTED
• Point (e.g (1,4))
  • POINT (default)
  • OPEN
  • CROSS

For example, if we wanted to create a straight green dashed line of x=2 with a restriction of y>0 we could do any of the following.

    ```desmos-graph
    x=2|y>0|green|dashed
    ```

    ```desmos-graph
    x=2|y>0|dashed|green
    ```

    ```desmos-graph
    x=2|green|y>0|dashed
    ```

    ```desmos-graph
    x=2|dashed|green|y>0
    ```

(you get the idea)

Additionally, individual equations can be hidden with the hidden flag, this can be useful when graphing things such as derivatives:

    ```desmos-graph
        f(x)=x^2|hidden
        f'(x)
    ```

Labels

Point labels can be specified with the label:<content> flag (equation labels are unsupported by Desmos):

    ```desmos-graph
        (0,0)|label:(0,0)
        (5,4)|open|label:This is a label
    ```

Custom Styling

The obsidian-desmos CSS class is applied to all graphs. This can be used in themes and snippets to override certain behaviour.
For instance, if you wanted all graphs to be centered in the page content, you could use the following snippet:

/* Horizontally center the graph in the page content */
.desmos-graph {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Offline Usage

If you've rendered at least one graph while connected to the internet then any future graphs (irrespective of the cache setting) should be able to render (if they don't then make an issue here).
*Requires enabling legacy API mode in the plugin settings.