Skip to content

Commit

Permalink
Removed misunderstood functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
erelling committed Feb 13, 2020
1 parent f524ab3 commit 878d80a
Showing 1 changed file with 2 additions and 47 deletions.
49 changes: 2 additions & 47 deletions docs/n00b-advanced.md
Original file line number Diff line number Diff line change
@@ -1,52 +1,5 @@
# 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:


```
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
Here is one mermaid diagram:
<div class="mermaid">
MyFirstDiagram.js
</div>
And here is another:
<div class="mermaid">
MySecondDiagram.js
</div>
</body>
</html>
```

Where the content of the file `MyFirstDiagram.js` is:
```
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.
Expand Down Expand Up @@ -98,6 +51,8 @@ To achieve this we:
```
The new setting was defined in a variable `config`, which we referenced as we initialized the mermaid renderer. The variable could have any permissible name.

*Note* In this example, no mermaid version is referenced in the path to the mermaid renderer. We automatically get the latest version.

## config options - example 2
Some configuration options have their own attributes, i.e. specific configuration values are set through hiearchical levels.

Expand Down

0 comments on commit 878d80a

Please sign in to comment.