Desmos Graphing
by aiskillstore
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.
Skill Details
Repository Files
3 files in this skill directory
name: desmos-graphing description: 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.
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
Related Skills
Mermaid Diagrams
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts,
Matlab
MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter
Dask
Distributed computing for larger-than-RAM pandas/NumPy workflows. Use when you need to scale existing pandas/NumPy code beyond memory or across clusters. Best for parallel file processing, distributed ML, integration with existing pandas code. For out-of-core analytics on single machine use vaex; for in-memory speed use polars.
Consult Zai
Compare z.ai GLM 4.7 and code-searcher responses for comprehensive dual-AI code analysis. Use when you need multiple AI perspectives on code questions.
Writing Effective Prompts
Structure Claude prompts for clarity and better results using roles, explicit instructions, context, positive framing, and strategic organization. Use when crafting prompts for complex tasks, long documents, tool workflows, or code generation.
Analyze Performance
Establish performance baselines and detect regressions using flamegraph analysis. Use when optimizing performance-critical code, investigating performance issues, or before creating commits with performance-sensitive changes.
Flowchart Creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
Bio Reporting Rmarkdown Reports
Create reproducible bioinformatics analysis reports with R Markdown including code, results, and visualizations in HTML, PDF, or Word format. Use when generating analysis reports with RMarkdown.
Performance
Rendimiento & Optimización - Atoll Tourisme. Use when optimizing performance or profiling code.
Performance
Performance & Optimierung - Atoll Tourisme. Use when optimizing performance or profiling code.
