diff --git a/docs/n00b-advanced.md b/docs/n00b-advanced.md
index 407be8c081..973ba39182 100644
--- a/docs/n00b-advanced.md
+++ b/docs/n00b-advanced.md
@@ -1,21 +1,154 @@
-# Advanced n00b mermaid (Coming soon..)
+# Advanced mermaid usage
+
+## splitting the mermaid code
+In the [previous example](n00b-gettingStarted.md), mermaid was embedded directly in a web page.
+
+A more condensed html code can be achieved by embedding the mermaid diagram in its own .js file.
+
+Using the previous example with two diagrams, the two corresponding .js files can be referenced as follows:
-## splitting mermaid code from html
-A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
```
-stuff stuff
-
+
+
+
+
+
+ Here is one mermaid diagram:
+
+ MyFirstDiagram.js
+
+
+ And here is another:
+
+ MySecondDiagram.js
+
```
-The actual mermaid file could for example look like this:
+Where the content of the file `MyFirstDiagram.js` is:
```
-mermaid content...
+graph TD
+A[Client] --> B[Load Balancer]
+B --> C[Server1]
+B --> D[Server2]
```
+
+And the content of the file `MySecondDiagram.js` is:
+```
+graph TD
+A[Client] -->|tcp_123| B(Load Balancer)
+B -->|tcp_456| C[Server1]
+B -->|tcp_456| D[Server2]
+```
+
+*Note* In this example, no mermaid version is referenced in the path to the mermaid renderer. We automatically get the latest version.
+
---
## mermaid configuration options
-...
+Often, using mermaid is as easy as just writing the diagram code.
+
+But sometimes we need to tweak how the diagram is rendered. This is done using the configuration options of the [mermaidAPI](mermaidAPI.md).
+
+- A simple example could be to define a theme, maybe we want the diagram to display in `dark` mode? Then we would set the `theme` configuration option to `dark`.
+
+- Or, maybe we want clickable html links inside the mermaid diagram? Then we would set the `securityLevel` to `loose`, changing it from the default of `strict`, and use the `click` keyword inside the diagram.
+
+- Or, maybe the area of the diagram is too narrow to contain our flowchart? Then we could set the `diagramMarginY` to a value greater than the default of `50`.
+
+The different configuration options are documented on the [mermaidAPI](mermaidAPI.md) page together with their default vaules.
+
+## config options - example 1
+To call the mermaid API, we expand on the content of the `
+
+
+ Here is one mermaid diagram:
+
+ graph TD
+ A[Client] --> B[Load Balancer]
+ B --> C[Server1]
+ B --> D[Server2]
+ click B "http://www.github.com" "This is a tooltip for a link"
+
+
+ The second diagram was removed in this example.
+