desmos-graphing
Create interactive Desmos graphs in Obsidian using desmos-graph code blocks. Use when visualizing functions, parametric curves, inequalities, or mathematical relationships with customizable styling and settings.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
Desmos Graphing in Obsidian
⚠️ CRITICAL: Dual Parser System
The plugin uses different parsers for different parts:
| Location | Parser | pi | sqrt | Example |
|---|---|---|---|---|
| Settings | mathjs | pi |
- | left=-2*pi+0.5 |
| Equations | Desmos (LaTeX) | \pi |
\sqrt{x} |
y=\sqrt{x}+\pi |
| Points | Desmos (LaTeX) | \pi |
\sqrt{x} |
(\pi/2, 1) |
| Restrictions | plain math | numeric | x^0.5 |
x>-1.5708 |
✅ CORRECT
left=-0.5; right=2*pi+0.5
---
y=\sqrt{x}|blue
y=x/\sqrt{3}|green|0<=x<=3^0.5
(\pi/2, 0)|label:cos(90°)=0
❌ WRONG (will error)
left=-2*\pi # Error: "Syntax error in part '\pi'"
y=\sin(x+pi/4) # Error: "Too many variables" (p*i)
(pi/2, 0) # Error: "Too many variables" ← Points need LaTeX!
y=x/sqrt(3)|0<=x<=sqrt(3) # Error: "Too many variables" (s*q*r*t)
Key rule: \sqrt{x} in equations, x^0.5 in restrictions!
Code Block Format
```desmos-graph
[settings]
---
[equations]
```
- Settings (optional) above
---, equations below - Each equation on its own line
- Use
|to add styling/restrictions to equations
Quick Start
Basic Function
```desmos-graph
y=x^2
y=\sin(x)|blue
```
With Settings
```desmos-graph
left=-2*pi; right=2*pi
bottom=-2; top=2
---
y=\sin(x)|red
y=\cos(x)|blue|dashed
```
Points and Labels
```desmos-graph
(0, 0)|label:Origin
(3, 4)|red|label:Point A
(\pi/2, 1)|blue|label:π/2 # Use \pi in coordinates!
y=x|dashed
```
⚠️ Points use LaTeX: (\pi/2, 0) not (pi/2, 0)
Essential Settings
| Setting | Default | Description |
|---|---|---|
width |
600 | Graph width in pixels |
height |
400 | Graph height in pixels |
left |
-10 | Left boundary |
right |
10 | Right boundary |
bottom |
-7 | Bottom boundary |
top |
7 | Top boundary |
grid |
true | Show grid lines |
degreeMode |
radians | radians or degrees |
Additional Settings
| Setting | Default | Description |
|---|---|---|
hideAxisNumbers |
false | Hide axis number labels |
xAxisLabel |
- | Custom x-axis label |
yAxisLabel |
- | Custom y-axis label |
xAxisLogarithmic |
false | Logarithmic x-axis scale |
yAxisLogarithmic |
false | Logarithmic y-axis scale |
defaultColor |
- | Default color for all equations |
Settings use = for values, separated by ; or newlines.
Bounds accept math expressions: left=-2*pi
Equation Styling
Use | (pipe) to add styling after an equation:
equation|color|style|restrictions|label
Segment order is flexible - the parser auto-detects each segment type.
⚠️ CRITICAL: | is RESERVED as delimiter!
The pipe character cannot appear in equations or labels:
(1, 0)|label:|v|=5 # ❌ Error: label parsed as empty
(1, 0)|label:∥v∥=5 # ✅ Use Unicode ∥ (U+2225)
y=|x| # ❌ Error: pipes split the equation
y=abs(x) # ✅ Use abs() function
Colors
Supported names: red, green, blue, yellow, orange, purple, cyan, magenta, black, white
Hex codes: #rrggbb or #rgb (e.g., #ff6600, #f60)
⚠️ gray/grey are NOT supported! Use hex instead:
- Light gray:
#c0c0c0 - Medium gray:
#808080 - Dark gray:
#404040
y=x|gray # ❌ Error: parsed as restriction
y=x|#808080 # ✅ Correct
Line & Point Styles
| Line | Point | Effect |
|---|---|---|
solid |
point |
Default (solid/filled) |
dashed |
open |
Dashed/open circle |
dotted |
cross |
Dotted/X mark |
Labels
(1, 2)|label shows "(1, 2)", (1, 2)|label:Point A shows custom text
Restrictions
Limit where equations are drawn:
y=x^2|0<x<5 # Only draw for 0 < x < 5
y=\sin(x)|x>0|y>0 # Multiple restrictions
y=2x|0<=x<=1 # <= and >= supported
y=\tan(x)|x>-1.5708|x<1.5708 # Use numeric values (π/2≈1.5708)
⚠️ CRITICAL: Use plain math, NOT LaTeX in restrictions!
| ✅ Correct | ❌ Wrong | Why |
|---|---|---|
x/2<y |
\frac{x}{2}<y |
No LaTeX commands |
x^0.5<2 |
\sqrt{x}<2 |
Use ^0.5 not \sqrt |
0<x<3^0.5 |
0<x<sqrt(3) |
sqrt() → sqr*t |
x>-1.5708 |
x>-pi/2 |
pi → p*i, use numeric |
0<x<1 |
\{0<x<1\} |
No braces needed |
The plugin auto-wraps restrictions with {} - don't add them yourself.
Hidden & Special Tags
f(x)=x^2|hidden # Define but don't display
y=f(x)+1 # Use the hidden function
y=\sin(x)|noline # Points only, no connecting line
Combining Styles
Order doesn't matter:
y=x^2|red|dashed|0<x<5
(1, 2)|open|blue|label:Start
Equation Types
| Type | Example |
|---|---|
| Explicit | y=x^2 |
| Implicit | x^2+y^2=25 |
| Parametric | (\cos(t), \sin(t)) |
| Polar | r=1+\cos(\theta) |
| Piecewise | y=\{x<0: -x, x\} |
| Point | (3, 4) |
| Function def | f(x)=x^2 |
⚠️ Polar Equations Must Be Linear in r
Desmos only supports polar equations where r appears linearly:
r=1+\cos(\theta) # ✅ Linear in r
r^2=\cos(2\theta) # ❌ Error: "must be linear in r"
Solution: Convert to parametric curve:
# Lemniscate (r² = cos(2θ)) → parametric form
(\cos(t)\sqrt{\cos(2t)}, \sin(t)\sqrt{\cos(2t)})|blue
Parametric Curves Warning
⚠️ Expand parenthetical expressions to avoid parsing errors:
(2t, 4t(1-t))|blue # ⚠️ May be misinterpreted as piecewise
(2t, 4t-4t^2)|blue # ✅ Expanded form is safer
Piecewise Functions
⚠️ Escape curly braces with backslash:
y={x<0: -x, x} # ❌ Error
y=\{x<0: -x, x\} # ✅ Correct
Complete Examples
Trigonometric Phase Shifts
```desmos-graph
left=-2*pi; right=2*pi
bottom=-2; top=2
---
y=\sin(x)|blue
y=\sin(x+\pi/4)|red
y=\sin(x+\pi/2)|green
y=\sin(x+\pi)|purple|dashed
```
Bezier Curve with Control Points
```desmos-graph
left=-0.5; right=2.5
bottom=-0.5; top=2.5
---
(2t, 4t-4t^2)|blue
(0, 0)|black|label:P0
(1, 2)|black|label:P1
(2, 0)|black|label:P2
y=2x|#808080|dashed|0<x<1
y=-2x+4|#808080|dashed|1<x<2
```
Easing Functions
```desmos-graph
left=-0.2; right=1.2
bottom=-0.2; top=1.2
---
y=x|dashed|black
y=1-\cos(\pi*x/2)|blue|0<=x<=1
y=\sin(\pi*x/2)|red|0<=x<=1
```
Cosine with Special Points
```desmos-graph
left=-0.5; right=2*pi+0.5
bottom=-1.5; top=1.5
---
y=\cos(x)|blue
(0, 1)|red|label:cos(0)=1
(\pi/2, 0)|red|label:cos(π/2)=0
(\pi, -1)|red|label:cos(π)=-1
(3*\pi/2, 0)|red|label:cos(3π/2)=0
```
⚠️ Note: Settings use 2*pi, points use \pi, 3*\pi/2, etc.
Advanced
For complete documentation, see reference.md:
- All 13 settings with defaults and auto-adjustment rules
- Hex codes for unsupported colors (gray, pink, brown, etc.)
- 13 error messages with causes and fixes
- Detailed troubleshooting for common issues
- Polar-to-parametric conversion examples
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-28
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!