diff --git a/README.md b/README.md
index 8452395..c378b6f 100644
--- a/README.md
+++ b/README.md
@@ -15,26 +15,30 @@ L_AC = line(A, C);
 K_ABC = circle(A, B, C);
 ```
 
-## How to use 
+## How to use
 
 To create a graph create a code block with the language set to jessiecode. You can also use YAML frontmatter to set the width and height of the graph, or other attributes defined in the JSXGraph documentation.
 
-````
+````markdown
 ```jessiecode
 ---
-width: 700
-height: 500
-boundingBox: [-10, 10, 10, -10]
+width: 500
+height: 400
+boundingBox: [-5, 4, 5, -4]
 ---
-A = point(1, 0);
-B = point(-1, 0);
-C = point(0.2, 1.5);
-L_AB = line(A, B);
-L_AC = line(A, C);
-K_ABC = circle(A, B, C);
+A = point(3, -2);
+B = point(-3, -1);
+C = point(1, 3);
+line(A, B);
+segment(A, C);
+circle(A, B, C);
 ```
 ````
 
+And it will be rendered as:
+
+![Example graph](./images/00-how-to-use.png)
+
 ## Bugs
 
 If you find any bugs with this plugin please create a new issue so that they can be resolved.
@@ -45,7 +49,7 @@ If you want to contribute please create an issue or pull request.
 
 ## Attribution
 
-This plugin uses 
+This plugin uses
 
 - [JSXGraph](https://jsxgraph.org/wp/index.html)
 - [JessieCode](https://github.com/jsxgraph/JessieCode)
diff --git a/images/00-how-to-use.png b/images/00-how-to-use.png
new file mode 100644
index 0000000..50af111
Binary files /dev/null and b/images/00-how-to-use.png differ