Obsidian Desmos Tutorial: Graph Math in Your Notes
- Smars
- Tutorials , Obsidian
- 23 May, 2026
If you use Obsidian for math notes, the usual graph workflow is clumsy: write equations in Markdown, open Desmos in a browser, rebuild the graph, screenshot it, then paste the image back into your vault. The moment you change one formula, the screenshot is stale.
Obsidian Desmos fixes that. It lets you render Desmos graphs directly inside Obsidian notes with a simple desmos-graph code block. The graph lives with the equations, so your note stays editable instead of turning into a pile of screenshots.
What Obsidian Desmos does
Obsidian Desmos is a community plugin by Nigecat. It embeds Desmos graphs into Obsidian notes and works both online and offline. The current release is 0.6.8, and the plugin is written in TypeScript.
Use it when your note needs a real graph, not just a formula:
- Calculus notes with functions, derivatives, and tangent lines
- Algebra examples where the shape matters
- Teaching material that needs a graph next to the explanation
- Research notes where formulas should remain editable
If you mainly write linked notes and publish them later, this pairs nicely with a digital garden workflow like Quartz for Markdown notes. If you need system diagrams instead of math graphs, drawio-mcp solves a different problem.
Install the plugin
The recommended path is the normal Obsidian community plugin flow.
- Open Obsidian Settings
- Go to Community plugins
- Turn off Restricted mode if you have not already
- Browse community plugins
- Search for Desmos
- Install and enable the plugin
Manual installation also works. Download main.js and manifest.json from the latest GitHub release, then place them in this folder inside your vault:
<vault-root>/.obsidian/plugins/obsidian-desmos/After that, enable community plugins and toggle Desmos on.
For most users, use the community plugin browser. Manual installation is only worth it if you are managing a locked-down vault or testing a specific release.
Create your first graph
Create a code block with the tag desmos-graph. Put one equation inside it.
```desmos-graph
y=x
```Switch to reading view or live preview, and Obsidian Desmos renders the equation as a graph.
The important detail: equations use LaTeX-style math syntax. That means fractions, trig functions, exponents, and named functions should be written the way you would write them for math rendering.
Graph multiple equations
Put each equation on its own line.
```desmos-graph
y=\sin(x)
y=\frac{1}{x}
```This is where the plugin starts to feel useful. You can keep the explanation and the graph definition in the same note:
The sine curve is bounded, while 1/x has a vertical asymptote near x=0.
```desmos-graph
y=\sin(x)
y=\frac{1}{x}
```The source stays readable. You are not maintaining a separate image file.
Set the graph window
For teaching notes, the default viewport is often too broad. Add settings before the equations, separate settings from equations with a line containing three hyphens, then write the graph body below it.
```desmos-graph
left=0; right=100;
top=10; bottom=-10;
---
y=\sin(x)
```Settings can be separated by newlines, semicolons, or both. That makes compact graph blocks possible without turning the note into config soup.
Useful graph-level settings:
| Setting | What it controls |
|---|---|
| left | Left x-axis bound |
| right | Right x-axis bound |
| top | Upper y-axis bound |
| bottom | Lower y-axis bound |
| height | Rendered graph height |
| width | Rendered graph width |
| grid | Show or hide the grid |
| degreeMode | Use radians or degrees |
| defaultColor | Default equation color |
For trigonometry, degreeMode accepts radians or degrees. The default is radians.
Style equations
Equation control happens after the equation. Add options between vertical bars. Order does not matter.
This draws a green dashed vertical line at x=2, only where y is greater than zero:
```desmos-graph
x=2|y>0|green|dashed
```These mean the same thing:
```desmos-graph
x=2|dashed|green|y>0
```Valid built-in colors include red, green, blue, yellow, magenta, cyan, purple, orange, black, and white. Hex colors work too:
```desmos-graph
y=x^2|#42ddf5
```Line styles:
- solid
- dashed
- dotted
Point styles:
- point
- open
- cross
Use this when a note contains several related equations and you want the visual meaning to be obvious at a glance.
Hide helper equations
Sometimes you need a function as a helper, but you do not want it drawn. Add hidden.
```desmos-graph
f(x)=x^2|hidden
f'(x)
```This is useful for derivative notes. The original function can define the derivative, while the graph only shows the part you want to discuss.
Add point labels
Point labels use the label: flag.
```desmos-graph
(0,0)|label:(0,0)
(5,4)|open|label:sample point
```Desmos does not support equation labels in this plugin, so treat labels as a point feature. If you need to explain a curve, do it in the surrounding note text instead of forcing the graph to carry the whole lesson.
Export notes with graphs to PDF
PDF export has one catch: graphs need to be available from the filesystem cache.
Before exporting:
- Turn on filesystem caching in the plugin settings
- Open every graph at least once so it enters the cache
- Disable the renderer before export
The plugin README is blunt about this because PDF export is not the same as normal note rendering. If a graph has not been cached, Obsidian cannot reliably include it in the exported PDF.
My rule: if a note is going to PDF, do a quick reading-view pass from top to bottom after enabling caching. That forces every graph to render once before export.
Center graphs with CSS
The plugin applies the obsidian-desmos CSS class to graphs. If your theme leaves graphs awkwardly aligned, add a CSS snippet:
/* Horizontally center Desmos graphs in note content */
.desmos-graph {
display: block;
margin-left: auto;
margin-right: auto;
}Keep the snippet small. If you over-style the embedded graph container, you may fight both Obsidian’s theme and Desmos’s own layout.
A complete example
Here is a practical note block for explaining a quadratic function, its derivative, and two points.
```desmos-graph
left=-4; right=4;
top=8; bottom=-4;
height=420;
defaultColor=blue;
---
f(x)=x^2-2|hidden
f'(x)|orange|dashed
y=x^2-2|blue
(-1,-1)|label:vertex side
(0,-2)|open|label:minimum
```The hidden line defines f(x). The derivative is dashed and orange. The visible parabola stays blue. The points carry labels, so the surrounding paragraph does not need to over-explain the graph.
Common mistakes
- Forgetting the desmos-graph code block tag: Obsidian will show a plain code block.
- Writing regular Markdown math instead of LaTeX-style graph expressions: Desmos needs graphable expressions.
- Putting graph settings below the three-hyphen separator: settings must go above it.
- Expecting PDF export to work without cache: enable filesystem caching and view each graph first.
- Using labels on equations: labels are for points, not curves.
Should you use it?
Yes, if your Obsidian vault contains math, teaching notes, or technical explanations where the graph is part of the argument. Obsidian Desmos is not trying to become a full math publishing system. That is the appeal. It does one thing: keeps Desmos graphs close to the notes that explain them.
If a formula needs a graph, stop screenshotting it. Put the graph source in the note.
