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.
/plugin marketplace add BitYoungjae/marketplace/plugin install obsidian-blocks@bityoungjae-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
reference.mdThe 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!
```desmos-graph
[settings]
---
[equations]
```
---, equations below| to add styling/restrictions to equations```desmos-graph
y=x^2
y=\sin(x)|blue
```
```desmos-graph
left=-2*pi; right=2*pi
bottom=-2; top=2
---
y=\sin(x)|red
y=\cos(x)|blue|dashed
```
```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)
| 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 |
| 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
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
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:
#c0c0c0#808080#404040y=x|gray # ❌ Error: parsed as restriction
y=x|#808080 # ✅ Correct
| Line | Point | Effect |
|---|---|---|
solid | point | Default (solid/filled) |
dashed | open | Dashed/open circle |
dotted | cross | Dotted/X mark |
(1, 2)|label shows "(1, 2)", (1, 2)|label:Point A shows custom text
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.
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
Order doesn't matter:
y=x^2|red|dashed|0<x<5
(1, 2)|open|blue|label:Start
| 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 |
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
⚠️ 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
⚠️ Escape curly braces with backslash:
y={x<0: -x, x} # ❌ Error
y=\{x<0: -x, x\} # ✅ Correct
```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
```
```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
```
```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
```
```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.
For complete documentation, see reference.md:
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.