/obsidian-desmos

Embed graphs directly into your obsidian notes

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Obsidian Desmos

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

demo

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
(a) Filesystem caching must be on
(b) All target graphs must be in the filesystem cache (c) The renderer must be disabled
(a) and (c) can be found in the plugin settings. (b) can be achieved by viewing all graphs at least once after enabling filesystem caching.

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
    ```
View Graph

linear

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}
    ```
View Graph

latex

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)
    ```
View Graph

restriction

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)

View Graph

equation-control

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)
    ```
View Graph

hidden

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
    ```
View Graph

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;
}